Snow Effect using HTML5 Canvas and Javascript

Hangs

Hi… that’s my tutorial.thank’s for using it =)

Aaron Bien

hi there,

really nice tutorial!

I think I can use this code to create a sparkling background. Can you show me how to make the flakes bigger and turn down their opacity?

Thanks

Mustafa

Blur effect:
-webkit-filter: blur(1px);

Brent

Very cool. Thanks. Also, if you turn the background to #111 and the opacity to 1., it makes it into outer space. Very cool.

white

hey there
i have to say, it’s so naturally and so beautiful.

thanks for sharing it

Ricardo

This and other tutorials on the site are absolutely mind blowing. Keeps me visit for more brilliant tutorials.

Liam

How can you change the shape of the snow? for example instead of dots snowflakes

Thanks in advance.

Archie

How can I use an animated GIF instead of the snowflakes?

Thanks

Jeroen Visser

This might be the single nicest animation I’ve seen. Really nice annotated source. Was a thrill to watch, thanks a lot!

Patsy

Thank you so much for your code and demonstration.

Andrey

Nice coding. But I think, must be
var mp = 1000; //max particles

And this will be real russian snow..

Liam, you can use the Unicode chars for the snow (cannot remember the exact numbers but look an Unicode table and browse the u24xx range). BTW, if you are going to use those snowflake chars, remember to increase the font size for a better effect (to 24px or even more).

Gen

i love this snow effect! can this be integrated in tumblr? where should i place the entire code? thanks much! and advance happy new year!

Nishan

Can’t I use it as my background????

Harminder

how can i use it as my background page

Harminder

i have made some alteration in the code but browsers blinks a lot — please suggest——-

window.onload = function () {
//canvas init
var canvas = document.getElementById(“canvas”);
var ctx = canvas.getContext(“2d”);
var mybody = $(‘body’);
//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
var dataURL;
canvas.width = W;
canvas.height = H;

//snowflake particles
var mp = 25; //max particles
var particles = [];
for (var i = 0; i < mp; i++) {
particles.push({
x: Math.random() * W, //x-coordinate
y: Math.random() * H, //y-coordinate
r: Math.random() * 4 + 1, //radius
d: Math.random() * mp //density
})
}

//Lets draw the flakes
function draw() {
ctx.clearRect(0, 0, W, H);

ctx.fillStyle = “rgba(255, 255, 255, 0.8)”;
ctx.beginPath();
for (var i = 0; i < mp; i++) {
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI * 2, true);
}

ctx.fill();
update();
mybody.css(‘background-image’, ‘url(‘ + dataURL + ‘)’);

}

//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update() {

angle += 0.01;
for (var i = 0; i < mp; i++) {
var p = particles[i];

//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
//Lets make it more random by adding in the radius
p.y += Math.cos(angle + p.d) + 1 + p.r / 2;
p.x += Math.sin(angle) * 2;

//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if (p.x > W + 5 || p.x < -5 || p.y > H) {

if (i % 3 > 0) //66.67% of the flakes
{

particles[i] = { x: Math.random() * W, y: -10, r: p.r, d: p.d };

//mydiv.css(‘background-image’, ‘url(‘ + dataURL + ‘)’);
}
else {
//If the flake is exitting from the right
if (Math.sin(angle) > 0) {
//Enter from the left
particles[i] = { x: -5, y: Math.random() * H, r: p.r, d: p.d };

}
else {
//Enter from the right
particles[i] = { x: W + 5, y: Math.random() * H, r: p.r, d: p.d };

}
}
dataURL = canvas.toDataURL(“image/png”);
}
}
}

//animation loop
setInterval(draw, 33);

}