Particle Systems - HTML5 Games Most Wanted - page 114

Figure 6-3. An individual spark
It is important that no component of the color used for the spark is 0. If one component is zero it will not get
brighter when additively blended. That's because 0 * anything === 0 (except if anything is NaN!).
Implementing the main loop
The main loop for this example is very simple. For every frame, we update the particle system and draw all
the sparks. There is a 1 in 100 chance that we emit a new burst of particles.
function main(){
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d'),
system = new ParticleSystem();
emit(system, canvas.width, canvas.height);
window.setInterval(function() {
if(Math.random() < 0.01){
emit(system, canvas.width, canvas.height);
}
system.update(1/30);
ctx.fillRect(0, 0, canvas.width, canvas.height);
renderCanvasImage(ctx, system.particles);
}, 1000/30);
}
var spark = new Image();
spark.onload = main;
spark.src = 'spark.png';