Hosting Solutions
mobile_logo Table of Contents
seal_frontseal_back

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>
thumb

JavaScript Videos

Canvas Programming

2D Context Object and Rectangle MethodsFill and Stroke Styles Color Gradient PatternLine Styles for Lines and StrokesBuilding and Drawing PathsDrawing Images and VideosDrawing Text on CanvasRendering Shadows on CanvasCanvas Transformation EffectsPixel Manipulation on CanvasCompositing on the CanvasDynamic Centering and Alignment on the CanvasCanvas Animation and App InitializationObject Oriented Assets OOP on CanvasDetect Mouse Coordinates on CanvasAnimated Background Layers on Canvas TutorialKeyboard Control and MovementJSON Object Arrays and Loops on CanvasHit Detection Mouse Touch Over Object ArraysCollision Detection Hit Game EnemiesParticle Effect System Tutorial Snow Falling AnimationInteractive Canvas Imaging Applications JavaScript PHP TutorialCircular Progress Loader Canvas JavaScript Programming Tutorial