Particle Systems - HTML5 Games Most Wanted - page 124

particles faster is no longer needed. I increased the angularVelocity and maxAge a bit to match the
behavior of smoke a bit better. The new emitter looks like this:
function emit(system, images, x, y){
// emit the particle at the center of the canvas with some random
// variation
var position = new Vec2(x+fuzzy(5), y+fuzzy(5)),
particle = new Particle(position),
alpha = fuzzy(Math.PI),
radius = Math.sqrt(Math.random()+0.1)*35;
particle.image = choose(images);
particle.velocity.x = Math.cos(alpha)*radius;
particle.velocity.y = Math.sin(alpha)*radius;
particle.angularVelocity = fuzzy(2.0);
particle.angle = fuzzy(Math.PI);
// choose a random texture
particle.maxAge = 6;
system.particles.push(particle);
}
Implementing the main loop
The main change to the main loop is the addition of the input handler to get the mouse position. I have
also greatly reduced the alpha values used for clearing and drawing to make the smoke look more smooth
and fluid.
For the fire, we emitted random amounts of particles from the main loop to get a flickering effect. Smoke is
far more continuous than fire in that regard, so we emit it at a constant rate of 10 particles per second in an
external callback. The updated code looks like this:
function main(images){
var canvas = document.getElementById('c'),
controls = new window.input.Handler(canvas),
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() {
system.update(1/30);
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.globalCompositeOperation = 'lighter';
ctx.globalAlpha = 0.1;
renderCanvasImage(ctx, system.particles, 6);