# 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