I’ve been meaning to start playing with the HTML5 <canvas> element for a while now, and yesterday I took the opportunity. I translated a Processing sketch I made a while ago into JavaScript (with a few minor enhancements).
Essentially, 1 to 3 swarms of particles move around the canvas, reproducing when the conditions are just right, and dying of old age. Quite simple, but the patterns produced can be really quite pretty.
One interesting thing that I discovered whilst doing this is that you can’t pass around a canvas’ context at the instantiation of a MooTools class — it complains about wrapped natives. That’s why, if you like in the source JavaScript, you’ll see me pass the actual context around to various functions. I’d be interested in hearing if anyone has a workaround for this, because this is, well, a bit clunky.
This is my first project using Mobile Processing. It’s essentially a MIDI drum machine, with five preset drums: kick, snare, open/closed hihat, and cowbell. Each row represents a ‘tick’, and when you press play, each tick is played in turn. It has been tested on a Sony Ericsson K800i.
Note that at the moment, you can’t change the tempo, can’t load or save patterns, can’t have more than one pattern, and can’t choose which drums to use. I might include those features in a later release. For the moment, though, it’s a fun way to waste a few minutes.
View the applet in your browser (and source)
Download the applet for your phone
This is based on the leaves from “Droplets”. Essentially, the leaves are turned on their sides, and become blades of grass, pushed (or, if you’re poetic, ‘caressed’) by the wind. Each blade is made up of up to 17 particles: a root particle, which anchors the entire blade, and then a series of particle pairs describing its position. Each pair has a fixed particle which is the ‘preferred’ point for that node, and a flexible particle, which can move freely. These pairs are connected with springs, and each flexible particle is also connected to the flexible particle before it with a spring. This keeps everything together but moving fairly organically.
View the applet (and source)
This was an attempt at getting to grips with the Traer Physics library. Basically, droplets of water fall from the top of the screen, land on a couple of leaves, join up to form larger droplets, and then, when they’re too heavy, fall off again. The collision detection used isn’t fantastic, so you’ll notice some strange droplet behaviour every now and then.
View the applet (and source)
