Particle Effect System Tutorial Snow Falling Animation
Learn to program a particle effect system on the canvas element using JavaScript. We demonstrate a snow fall particle effect using many tiny sprites that are given randomized values. When any snowflake travels past the bottom of the canvas we remove it from the flakes object array, and continue pouring in more snowflakes from the top of the canvas. We also demonstrate how to set a rotation on the snowfall to add a wind blown effect to the snow animation.
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:10px; background:#CCC; }
#my_canvas{ background: #036; border:#000 1px solid; }
</style>
<script>
var bg = new Image();
bg.src = "xmas_scene.jpg";
function initCanvas(){
var ctx = document.getElementById('my_canvas').getContext('2d');
var cW = ctx.canvas.width, cH = ctx.canvas.height;
var flakes = [];
function addFlake(){
var x = Math.floor(Math.random() * cW) + 1;
var y = 0;
var s = Math.floor(Math.random() * 3) + 1;
flakes.push({"x":x,"y":y,"s":s});
}
function snow(){
addFlake();
addFlake();
for(var i = 0; i < flakes.length; i++){
ctx.fillStyle = "rgba(255,255,255,.75)";
ctx.beginPath();
ctx.arc(flakes[i].x, flakes[i].y+=flakes[i].s*.5, flakes[i].s*.5, 0, Math.PI*2, false);
ctx.fill();
if(flakes[i].y > cH){
flakes.splice(i,1);
}
document.getElementById('status').innerHTML = "Snow Flake Count = "+flakes.length;
}
}
function animate(){
ctx.save();
ctx.clearRect(0, 0, cW, cH);
ctx.drawImage(bg,0,0);
//ctx.rotate(0);
snow();
ctx.restore();
}
var animateInterval = setInterval(animate, 30);
}
window.addEventListener('load', function(event) {
initCanvas();
});
</script>
</head>
<body>
<canvas id="my_canvas" width="700" height="350"></canvas>
<h1 id="status"></h1>
</body>
</html>