So since my last post exactly 2 months ago it’s remained fairly quiet on the site. The reason being that I’m currently tech lead on a big project at Specialmoves that is due to go live really soon (more on that later). However, I’ve had a rare quiet weekend and somehow found the motivation to fire up the Macbook and write some code.

The project I’m currently working on features a fair amount of particles (it’s a Christmas site, need I say more). For the vast majority of them I’ve used Richard Lord’s brilliant Flint library but there was a couple of loaders on the site where I used my own simple particle system. I’ve always enjoyed playing around with particles as you can see from the posts featured on this blog, e.g. ColorWall, WobbleWall and Simple JavaScript Physics.

So with yesterday being November 5th (bonfire night here in the UK) I started playing around with creating a sparkler effect using JavaScript and Canvas. It didn’t really look exactly how I hoped but in creating it I stumbled across some other cool effects, the best being the one below. Click here to view the particles in action, move your mouse around and click anywhere on the screen.

I’ve always enjoyed creating simple visual effects that are nice to interact with and fun to watch and I think this one is just that. It’s a simple effect but I found myself dragging the mouse around for ages playing with it.

I plan to write a simple particle tutorial soon (ambitious for me since I’m currently averaging 1 post every 4 or so months) where I’ll explain the basics of creating a simple particle effect. Many developers think particle effect are really hard to create but once you’ve got the basics down it’s easy peasy.

Below are some of the other particles experiments I made yesterday. The first is the sort of sparkler effect. The second a slower more mellow version of the above and finally the sparkler effect without the canvas being cleared.