Lighting a little canvas fire

21 Oct 2012

Two years ago I got very excited about the new HTML5 Canvas element. After a while I came up with a project to experiment with the canvas element and I even wrote a blogpost about it but I never published it. Due to a lack of time I never finished the actual project but I'd like to share it with you anyways.
[back in 2010] Just a few weeks ago, I was working on a project to learn the basics of the HTML5 Canvas element. This little project, soon turned into a little experiment. I wanted to create a good looking firework, within the canvas element. I have created two demo pages so far. Both pages have a very simple, but different purpose. The first page I'd like to show you, is the burst of the firework. The colors are picked at random (from a couple of images), and so are the number of sparks en the distance they travel.

Check out the burst demo here. The other page I'd like to share with everyone, is a simple mouse-drag test (no touch support). When dragging the mouse across the screen, little sparks will ignite from the cursor. Colors, once again, are random within a certain range, and so is the distance where the sparks show up. A similar kind of technique will be used to track the firework when it ignites and flies towards the sky. You can check out the spark mouse-drag demo here.   Both pages use @Seb_ly's little particle library as a baseline! I think it's great!! It is very well commented, easy to use and extremely effective! Hope you like the tiny demo's so far!! You'll be seeing more soon.... Alex Meijer