For a new experiment in HTML5 Canvas, I decided to recreate my popular particle effect Nova from flashandmath (but with mouse interaction removed). Click below to see the result, and then read below to learn more about the code. Also see my last post Pure HTML5 canvas and JavaScript particles – methods for fading trails for another example which uses the same basic code but with a different fading effect.

The code for this example is almost identical to my last example: Pure HTML5 canvas and JavaScript particles – methods for fading trails. See that post for more information on the particle animation code. In this new example, the only difference is that the particles are not faded by dimming the previous display, but rather blurring it.

Having created many particle effects in Flash, I have become accustomed to working with a variety of filters. The Nova effect I created in Flash made use of a blur filter in between frames in order to create a pleasant fading effect. But there are no usch filters readily available for the HTML5 canvas. Here is where Mario Klingemann, a.k.a quasimondo comes to the rescue, with his publicly shared code for a fast blur effect (also see his Stack Blur). This works beautifully, but applying this blur on every frame is asking the CPU to do quite a bit of work. However, I kept the canvas size small and quasimondo’s blur is able to keep up.

The idea behind the code is very similar to my previous example. Particle positions are computed on every tick of a timer, but before the particles are drawn in their new position, the last image is altered in such a way as to gradually fade out the previous images. In the last example, I darkened the screen; here I am applying the blur. Because of the black background which was drawn before the particles were added to the display, the blur has the effect of fading the whole display to black over time.

Quasimondo’s blur is very easy to apply. Here is the line of code where the canvas is blurred:

boxBlurCanvasRGB("canvasOne",0,0,theCanvas.width,theCanvas.height,2);

The first argument gives the ID of the canvas, the next four parameters define the rectangle on which to apply the blur, and the final parameter sets the number of iterations. You could set the iterations to 1 for a faster execution of the code, but I prefered the look of the twice-applied blur.

Acknowledgments

Sincere thanks to quasimondo for the blur code, and the team at Modernizr for the browser-support testing code.