Trisha Trisha - 3 months ago 21
Javascript Question

HTML5 Canvas Floating Particles responsive fix?

What I have is an overlaying canvas element with floating particles that bounce around the screen, meant to mimic floating leaves and/or dust particles. The canvas element overlays a scenic background, and when the page is viewed on a mobile device the particles seem too large to be viewed as floating leaves/dust, they look like balls floating around which hinders the imagination of them being leaves/dust.

I'm wanting to resize the particles when the browser screen is smaller than 600px, and I'm not sure how to modify the code to do so.

Here is the JS used:

(function() {
jQuery(function() {
var H, Particle, W, animateParticles, canvas, clearCanvas, colorArray, createParticles, ctx, drawParticles, initParticleSystem, particleCount, particles, updateParticles;
Particle = function() {
this.color = colorArray[Math.floor((Math.random() * 5) + 1)];
this.x = Math.random() * W;
this.y = Math.random() * H;
this.direction = {
x: -1 + Math.random() * 2,
y: -1 + Math.random() * 1
};
this.vx = 1 * Math.random() + .05;
this.vy = 1 * Math.random() + .05;
this.radius = .9 * Math.random() + 1;
this.move = function() {
this.x += this.vx * this.direction.x;
this.y += this.vy * this.direction.y;
};
this.changeDirection = function(axis) {
this.direction[axis] *= -1;
};
this.draw = function() {
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
ctx.fill();
};
this.boundaryCheck = function() {
if (this.x >= W) {
this.x = W;
this.changeDirection("x");
} else if (this.x <= 0) {
this.x = 0;
this.changeDirection("x");
}
if (this.y >= H) {
this.y = H;
this.changeDirection("y");
} else if (this.y <= 0) {
this.y = 0;
this.changeDirection("y");
}
};
};
clearCanvas = function() {
ctx.clearRect(0, 0, W, H);
};
createParticles = function() {
var i, p;
i = particleCount - 1;
while (i >= 0) {
p = new Particle();
particles.push(p);
i--;
}
};
drawParticles = function() {
var i, p;
i = particleCount - 1;
while (i >= 0) {
p = particles[i];
p.draw();
i--;
}
};
updateParticles = function() {
var i, p;
i = particles.length - 1;
while (i >= 0) {
p = particles[i];
p.move();
p.boundaryCheck();
i--;
}
};
initParticleSystem = function() {
createParticles();
drawParticles();
};
animateParticles = function() {
clearCanvas();
drawParticles();
updateParticles();
requestAnimationFrame(animateParticles);
};
W = void 0;
H = void 0;
canvas = void 0;
ctx = void 0;
particleCount = 100;
particles = [];
colorArray = ["rgba(65,61,11,.5)", "rgba(112,94,12,.6)", "rgba(129,123,114,.4)", "rgba(122,105,17,.5)", "rgba(188,188,188,.2)", "rgba(75,69,16,.5)", "rgba(136,107,13,.5)"];
W = window.innerWidth;
H = jQuery('.fullscreen-cover').height();
canvas = jQuery("#headerballs").get(0);
canvas.width = W;
canvas.height = H;
ctx = canvas.getContext("2d");
initParticleSystem();
requestAnimationFrame(animateParticles);
});

}).call(this);

Answer

Adjust the radius on window resize event.

    function setRadius(value) {
        self.radius = value;
    }

    function resize(event) {
        if ($(window).width() > 600) {
            setRadius(.9 * Math.random() + 10);
        } else {
            setRadius(.9 * Math.random() + 2);
        }
    }

    resize();
    $(window).on('resize', resize);   

Working Demo: http://jsfiddle.net/moogs/x5rwgcfv/3/