HTML5 Canvas Particle System

With the HTML5 Canvas now a web standard, this small research project was designed to test how a basic 2D particle system would look and perform on modern web browsers. The code written for this demo was re-implemented for use in Cosmos Fight (a game project that a partner and I have been working on).


Your browser does not support the canvas element.

Click on the screen above, or press the Toggle Animation button below!


Number of Particles:
60
Particle Lifespan:
10
Dispersion Range (degrees):
45
Direction Angle (degrees):
90
Particle Speed:
8
Particle Size:
1

Particle Color: Fire Red Green Violet Blue     

    


When animating, move your mouse across the screen, and the particles will follow your cursor.
Click on the screen to lock their position.



The Particle System source code is available under the MIT Licence and can be downloaded here.




Back to Top