Particle Systems - HTML5 Games Most Wanted - page 120

// fireworks example. Again, just because I find it looks better that way.
radius = Math.sqrt(Math.random()+0.1)*100;
// choose a random texture
particle.image = choose(images);
// make speed dependent on image size so the small spark will be faster
// and the big filling texture slower
radius *= 32/Math.max(25, particle.image.width);
particle.velocity.x = Math.cos(alpha)*radius;
particle.velocity.y = Math.sin(alpha)*radius-4;
particle.maxAge = 5;
system.particles.push(particle);
}
Implementing the forces
We will also need to adjust the forces a bit to create fire. We will turn gravity into anti-gravity to simulate
the lift created by the hot fire, and make the wind a bit more extreme.
var drag = dampingf(0.975);,
lift = accelerationf(new Vec2(0, -50));
function wind(particle, td){
particle.velocity.x += td*fuzzy(50);
}
Implementing the main loop
The main loop we use to create fire is very similar to the one we used to create fireworks. The main
difference is that we emit a new particle in every frame.
function main(images){
var canvas = document.getElementById('c'),
ctx = canvas.getContext('2d'),
system = new ParticleSystem();
system.forces.push(lift);
system.forces.push(wind);
system.forces.push(drag);
ctx.fillRect(0, 0, canvas.width, canvas.height);
window.setInterval(function() {
while(Math.random()<0.80){
emit(system, images, canvas.width, canvas.height);
}
system.update(1/30);
ctx.fillStyle = 'rgba(0, 0, 0, 0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighter';