Drawing Simple Particle Systems with HTML5’s Canvas Tag

published 22 jun 2011

Inspired by this awesome series of articles on BIT-101 (Keith Peters’ blog, which I found via a tweet from Paul Irish) intended to introduce Flash developers to <canvas>, I finally decided to get down to learning some canvas tag for myself. Here’s a few things I made.

Basics: a vibrating particle system

To start off, I wanted to just get a handle on drawing and animating the particles using the 2D canvas API. First, I made an array of points with a randomized x and y position. Then, using setInterval, I made a timer that every 20 milliseconds moves those particles a random amount, and then redraws them.

Code: random.particles.js

Less chaos: falling particles

Next, I wanted to animate the particles in a more systematic way, so I made them fall with gravity. For this first example, I used the formula x=.5*a*t^2+v0*t+x0, where x0 means the initial position, t is the elapsed time, and a is the acceleration. In practice, I just tweaked a until it fell at a rate I found appealing. I also gave the particles a randomized initial velocity. Once they hit the ground, they stay there.

Code: falling.particles.js

More chaos! Bouncing particles

Another simple addition to this was to make the particles bounce off the walls. Learning from the previous code, instead of calculating the position using a formula, I simply tracked the x and y velocities of the particle and changed their velocities. Then, I moved the particle vX and vY units each time step.

Code: bouncing.particles.js

Emitting Particles

The first three follow from each other in a pretty straightforward way, so I wanted to do something else. One of the next steps suggested by BIT-101 was to make a particle emitter. Particles emerge from a selected point (the emitter) and are given an x and y velocity. As they go off screen, the emitter recycles them, spewing them out again with a new velocity. I was also tired of my ugly black-border circles, so I changed to using filled circles of random radius, which actually look pretty nice.

Code: emitted.particles.js

Particle networks!

Finally I wanted to do something way different, so I looked again at BIT-101. Keith has a series of articles (start here) where he draws a series of connected points that end up looking very pretty. I figured I wanted to do something along those lines.

In my case, I decided I’d draw simple points that floated around and made connections with the nearby points around them. To keep from drawing connections between points twice (which ends up looking bad), I had to make a connectivity matrix—a matrix such that matrix[i][j] == matrix[j][i] == 1 iff a line has been drawn between points[i] and points[j]. Incidentally, finding nearby points is done using a dumb O(n^2) search. I’d be intrigued if there’s a way of doing it faster. Pretty curves are drawn between points using drawQuadraticCurveTo (2nd order b-splines!)

Code: connected.particles.js