As a platform for trying out EaselJS I wanted to create a simple particle demo using the Coffee Physics engine. Through a bit of experimentation and (mainly) curiosity, I ended up with something half particle generator, half generative art tool.
Having not used EaselJS before it was reassuringly easy to get to grips with, and there’s good documentation available. Anyone who’s done any work with the Flash display list should have no problems diving straight in. It takes very little code to setup a Stage and a rendering loop, and keeps your application nicely browser and platform agnostic. The demo runs (from best to worst) in Chrome, IE9, Firefox and Safari for iOS (although very slowly), without the need to write specific code for any of them, which is a great reason for using it.
Although the Coffee Physics demo source contains various renderers, the engine itself is, as you’d expect, completely independent of any rendering process. This makes it very easy to integrate with Easel, or any other rendering method you choose. I didn’t end up using any of the the supplied behaviours in my demo (collision, attraction etc.), but I did play around with these to begin with. The behaviour architecture makes it very easy to leave out any heavy-lifting you don’t need, and easily create and add your own features.
The idea to ‘paint’ the particles came simply from browsing the EaselJS API docs and is achieved easily by setting the autoClear property of the Stage to false. This prevents automatic clearing of the canvas before each render update and would be useful for more serious generative art pieces.
Saving the image seemed like an obvious progression, and it was nice to be able to output and save image data without needing a server transaction or, dare I say it, Flash. It is however, not the most polished solution: dump a base64 encoded image string into a browser window and hope it knows what to do with it. Internet Explorer doesn’t know what to do with it.