Fireworks in your browser: particle systems using HTML5, javascript, paper.js

Posted: July 17th, 2011 at 5:53 pm | Tags: html5, javascript, paperjs

View the demo here.

A week or so ago, in celebration of the Fourth of July I decided to create fireworks using the the paper.js framework I played around with previously.

At first I used symbols¹ but I couldn’t access the alpha (transparency) property of a symbol. So, instead I drew a bunch of circles². Then I created a bunch of arrays to keep track of each circle’s (particle) gravity along the X-axis, the y-axis, and alpha value. It was important that I had access to each individual particle’s alpha because I wanted to fade out the particle as time went on. Once a particle’s alpha reaches 0, the code would stop rendering that particle. It’s important that old particles get removed from the canvas or else there would be speed issues.

1. paper.js allows you to create symbols of an object (such as a Path), which is simply an instance of that object. If you’ve Adobe Illustrator before, the paper.js symbol works the same as Illustrator’s symbols [↩]
2. in paper.js, circles are not pre-defined shapes but rather pre-define paths (i.e. lines [↩]