This simple particle system uses the HTML5 canvas object. It is based on Dan Shiffman‘s Nature of Code processing library, and runs best on Chrome and Safari, not as fast on Firefox, and will hopefully run in the upcoming IE9.

The particle system generates particles every 10 ms from an origin point which follows the mouse location within the canvas. Each released particles is born with a given lifespan, acceleration and velocity. As the user’s mouse moves on the canvas, the particle follows along. As its lifespan ends, the particle fades and dies.

Here’s the crux of the code:

1. Create a canvas elementInsert a canvas element into the body of your html page.
 
2. Instantiate the visualization class
   I use a variable called ‘viz’ to hold the visualization class, which I later use to define the particle system.
var viz = new Visualization();
3. Pointers to canvas attributes
   When rendering to the canvas we constantly need to use its context. By getting a handle to the canvas div element, we can access three super important attributes: (a) the canvas width (b) the canvas height (c) a pointer to its context
var el = document.getElementById("viz");
this.canvasWidth = el.width;
this.canvasHeight = el.height;
window.ctx = el.getContext("2d");
4. The particle system
   The particle system class is effectively an array of particles and an origin point. There are 2 main methods: (a) add a new particle (b) run the system
   Here’s the run function for the particle system:
// running the particle system
this.run = function(){
// iterate through particles
for (var i=viz.ps.particles.length - 1;i>=0;i--){
var p = viz.ps.particles[i];
p.run();
if (p.dead()){
viz.ps.particles.splice(i,1);
}
}
}
5. A particle
   Each particle has a location (x,y coordinates), acceleration, velocity and size attributes. Additionally, every particle has a lifespan (this.timer) which defines how many iterations the particle will display, before it fades and dies. The main particle loop is comprised of two important functions:

(a) update the particle movement and remaining life span

this.update = function(){
// particle loop: acceleration, velocity, location update
this.vel.add(this.acc);
this.loc.add(this.vel);
this.timer -= 1;
}

(b) render the particle to the canvas. Here I’m making it fade by setting it’s alpha value to decline as its remaining lifespan (this.timer) diminishes.

this.fill = "rgba(255,255,255,"+this.timer/300+")";
this.drawCircle(ctx,this.loc.x,this.loc.y,this.r/2,this.fill);

this.drawCircle = function (ctx, x, y, r, fill) {
ctx.fillStyle = fill;
ctx.beginPath();
ctx.moveTo(x, y);
ctx.arc(x, y, r, Math.PI * 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
}
6. Run the draw loop
   This is the most important piece of the puzzle. By using the setInterval function, the draw function will be called every 25ms. This is very similar to what you do in processing (draw loop function). The loop is enabled by ‘setInterval’, while the draw function first clears the screen and then calls the particle system run function. There’s a neat effect when clearing the screen with such small alpha value. It creates a smearing effect which makes the circles have less defined borders. It is also computationally intensive, so beware…
// draw loop
this.timeUpdateInterval = setInterval(draw, 25);

function draw(){
clear();
viz.ps.run();
}

function clear(){
ctx.fillStyle = "rgba(0,0,0,0.1)";
ctx.fillRect(0, 0, viz.canvasWidth, viz.canvasHeight);
}

That’s it. Put it all together, add the jquery library, and you have yourself a simple particle system.

See the full size version here.

And download the full code here.