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 theToggle Animationbutton 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
Toggle Animation
Reset All Values
Reset Position
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 Misc Page