Parcycle: A Particle System with HTML5 canvas

All this PPK "iPhone developers are stupid" awesomeness got me thinking. Now, if there's one guy I've got respect for, it's PPK. And if he tells me to ditch objective-c for JavaScript, then I'm damn well going to do it. Accordingly, I decide to create "Parcycle": a Particle Emitter system that I re-wrote from a set of great openGL iPhone tutorials by the good guys at 71Squared.

See the wonders of HTML5 Canvas!!

(here's a proof-of-concept version as an offline iPhone Web app)

After updating an old JavaScript platformer to work on the iPhone, I decided to step it up a notch. A full-featured Particle System: lots of particles, lots of colours, lots of fluffy clouds of pixels! I ported the 71Squared Particle Emitter code pretty-much directly: in fact, a bunch of it was straight copy/paste - I just had to change "->" to ".". Well, mostly.

...actually, the real reason for this undertaking was because I just learned about the "lighter" value for the canvas globalCompositeOperation. In this mode, when you draw two things on top of each other the overlapping area will become lighter. Which makes the particles look fully-sick.

The particle system itself is straightforward enough, so I thought I'd tack on a couple of extra bits - I added a couple of extra parameters, made it bouncy, and also let you (kind of) save and load data. If you click the save icon you can copy/paste out the current parameters - and as an added bonus, the data is a very re-tweetable form.

"Why would you tweet it?" you ask, incredulously. Well... if you click the "Twitter" button, then it will search Twitter's public search service for saved "files": these are just tweets with lots of numbers and the #parcycle hash tag. Any saved settings get loaded them into the example containers, so you can see what other people have made. Pretty groovy - annnd, I don't have to worry about writing any server-side nonsense. Win-win!

I'm going to write a cut-down version for use on future iPhone Web games. Even my dodgy first-pass seems to function reasonably well with a hand-full of particles: with some optimizing it should be good enough to get rid of objective-c forever!*

So anyway, go See the wonders of HTML5 Canvas!!