Canvas Particles Emission
So, I've decided that I am going to make a series of creations where I'll hopefully show you how to do some basic (to intermediate and few advanced) stuffs with canvas like the following:
- Particles Emission.
- Emission of Particles with different shapes and effects.
- Emission of Particles leaving trails.
- Rebound against wall.
- Rebound against each other.
- Collision and Rebound with floor only.
- Pulling each other in groups using spider webs (web matrix?).
- Add gravity to particles.
- Different types of diagrams and objects.
- 3D particles.
- ... and probably few more stuffs ;).
This is the first one of the series - Particles Emissions. To understand this experiment, check out the Javascript code, it's heavily commented!
The basic concept behind it is that, you need to run a function at regular intervals that can create a particle and then add to an array (a pool of particles). After creating and adding to the master array, the function needs to repaint (re-render or re-draw) all the particles from the master array using a for loop.
While redrawing, the x and y positions of the particles change based on a speed which is basically an integer that needs to be added to the current (old) x and y co-ordinates everytime the function (or the for loop) is executed. Yeh, it's that simple!
If you cannot understand something, ask in the comments!