Particles are very frequently used in visual effects animation to recreate natural events like fire, smoke, cloud, fog and flocks of birds. But particle animation is quite different from the standard “discrete” animation of individual elements traditionally associated with CSS and SVG. This can lead to confusion for developers approaching particle animation for the first time, so a broad introduction can be helpful:

Particle Rules

Particle animation can be defined by a few things:

• Particles are spawned, live and die in a system.
• Unlike traditional discrete animation, there may be hundreds or thousands of particles in an animation.
• An individual particle is a dynamic point in space.
• This particle point could be associated with any representation you wish: a circle, a blobby sphere, a fish, anything. In the final animation, the particle’s position and motion in space as a tiny point is replaced by the new entity.
• Particles that are replaced with entities that are sufficiently large and blurry will tend to blend together, which is the key to creating effects like fire and fog.
• a collection of particles may have a source or origin (think of the exhaust streaming from a jet engine). This source is frequently referred to as an emitter.
• Particles may also have an attractor or destination that they are drawn to, like stars circling a black hole.
• Particles may respond to physical laws, recreated in code, such as gravity, or the effects of wind or current.
• In some cases, particles might have a limited “awareness” of each other, acting to maintain a certain distance (like a school of fish).
• Particles may also be “unbound”, exhibiting random motion inside a region.
• In some cases, the trajectory or path of the particle is used; this is commonly used to create effects like hair or grass.

• Most importantly, you do not have individual control over a particle: rather, particles exist under a set of broad rules, with their behaviour controlled by random variables within defined ranges.

One way of thinking about particles is looking at a population of bacteria in a petri dish: you can determine where the bacteria might spawn from (a source of food, for example), but you can’t control the induvidual fates of cells in the bacterial culture.

There are many ways of creating particles, but the most common method in JavaScript uses the Canvas API… which I will be looking at next.

Photograph by peaceful-jp-scenery, used under a Creative Commons license.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.