Time for action – using point sprites to create a fountain of sparks

1. Open the file ch10_PointSprites.html in an HTML5 browser.

   

2. This sample creates a simple fountain of sparks effect with point sprites. You can adjust the size and lifetime of the particles using the sliders at the bottom. Play with them to see the effect it has on the particles.

3. The particle simulation is performed by maintaining a list of particles that comprises of a position, velocity, and lifespan. This list is iterated over every frame and updated, moving the particle position according to the velocity and applying gravity while reducing the remaining lifespan. Once a particle's lifespan has reached zero, it gets reset to the origin with a new randomized velocity and a replenished lifespan.

4. With every iteration of the particle simulation, the particle positions and lifespans are copied to an array which is then used to update a vertex buffer. That vertex buffer is what is rendered to produce the onscreen sprites.

5. Let's play...