Adam Khoury

Donate funds to show love and support

Click the button below to donate funds securely online. You can use your PayPal account or a credit card.

Your donations help free up my time to produce more content and assist in covering server costs. It's also a great way to say thanks for the content!

Application Configuration

Adam will be adding options here soon.

Particle Effect System Tutorial Snow Falling Animation

Published :
Author :
Adam Khoury
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>