Game Development Reference
In-Depth Information
ctx.globalAlpha = 0.6;
renderCanvasImage(ctx, system.particles, 5);
ctx.globalAlpha = 1.0;
ctx.globalCompositeOperation = 'source-over';
}, 1000/30);
}
You can see the complete example in fire.0.html . It does already look like a fire, but something is still
missing. It looks kind of blocky and inorganic. We can change this by introducing rotation.
Rotation
To add rotation, we need to extend our particle system a little bit. We will introduce an angle and
angularVelocity to the particles. The angle is the rotation of the particle in radians. The angularVelocity
is the change to that value in one second. Both default to zero in the prototype.
function Particle(position) {
this.position = position;
this.velocity = new Vec2(0, 0);
this.angle = 0;
this.angularVelocity = 0;
this.age = 0;
}
Particle.prototype = {
maxAge: Infinity,
update: function(td) {
this.age += td;
this.position.iadd(this.velocity.muls(td));
this.angle += this.angularVelocity*td;
return this.age < this.maxAge;
}
}
The render function also needs an update to deal with the rotation:
function renderCanvasImage(ctx, particles, fade){
for(var i = 0; i < particles.length; i++) {
var particle = particles[i];
ctx.save();
ctx.translate(particle.position.x, particle.position.y);
ctx.rotate(particle.angle);
ctx.drawImage(particle.image, -particle.image.width/2, -particle.image.height/2);
ctx.restore();
}
}
Now we can initialize the angle and angularVelocity in the emitter.
particle.angularVelocity = fuzzy(1.5);
particle.angle = fuzzy(Math.PI);
 
Search WWH ::




Custom Search