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.

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.

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.

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.

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!)