Game Development Reference
In-Depth Information
if(controls.hasFocus) {
emit(controls.mouse.x, controls.mouse.y);
}
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
ctx.fillRect(0, 0, width, height);
var imgdata = ctx.getImageData(0, 0, width, height),
data = imgdata.data;
for(var i = 0; i < PARTICLES_LENGTH; i+= NFIELDS) {
// check age
if((particles[i+4] += td) > MAX_AGE) continue;
// ~~ = double bitwise inversion = Math.ceil
var x = ~~(particles[i] = (particles[i] +
(particles[i+2] *= drag)*td)),
y = ~~(particles[i+1] = (particles[i+1] +
(particles[i+3] = (particles[i+3] + gravity*td)*drag)*td));
// check bounds
if(x < 0 || x >= width || y < 0 || y >= height)
continue;
// calculate offset
var offset = (x+y*width)*4;
// set pixel
data[offset] += r;
data[offset+1] += g;
data[offset+2] += b;
// dont touch alpha
}
ctx.putImageData(imgdata, 0, 0);
requestAnimationFrame(draw, canvas);
}
requestAnimationFrame(draw, canvas);
})();
You can find this example in fastfireworks.html . Play with it and see how crazy you can get.
Conclusion
In this chapter, I introduced you to particle systems and the basic math required to create them. I showed
you how to create fireworks, fire, and smoke. I taught you to create a high-performance particle system
that can deal with tens of thousands of particles. But all this is only the beginning. Play with all the
examples in this chapter to get a feeling for what the individual parameters and forces do. Try to create
your own particle effects based on the ones that I have shown you, or create your own from scratch. You
might not always get what you expected, but more often than not, the result will be awesome!
 
Search WWH ::




Custom Search