Category: Processing

  • Canvas Swarms

    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.

  • Mobile phone drum machine

    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

  • Grass

    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)

  • Droplets

    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)

  • Energy

    A musical project.

    The first thing you’ll notice is that this is atonal. I did initially work with a fixed key (E minor, in fact), and experimented with a variety of other keys, too; everything from simple triads to pentatonics, seventeen tone equal temperaments, and even a completely random set of frequencies, but overall, I think that a three octave span of twelve tone equal temperament frequencies is the most effective.

    The sounds are generated on-the-fly; they are simple sine waves with a decay. Internally, the x-coordinates of the particles are broken into a series of ‘frequency bars’. Particles move along, building up energy, and eventually release this energy as a musical tone; the frequency is determined by the bar they are in. The frequencies are randomised.

    Left clicking will create a ‘beat-particle’ for the frequency bar under the cursor. These particles will emit a tone every 2, 4, or 8 quantisations. Right clicking creates a ‘pulse-particle’, which emits a tone every x quantisations, where x is randomly determined.

    Also in the code, but not enabled in the applet, are ‘orbit particles’ – these are the same as normal particles, but they choose a normal particle to follow as quickly as their current energy level will allow them to. They have a 5% chance of changing their target every tick.

    If you run the applet, you will probably notice that the audio and the visuals are not perfectly in sync; unfortunately, this is a drawback of the Java sound API in conjunction with all of the maths and rendering going on every drawing cycle (at around 60 frames per second).

    Download a post-processed MP3 created using this applet

    View the minimal atonal applet (and source)

    View the full applet (in E minor, no source)

  • Swarms

    A swarm of particles that move around together. Particles are of two sexes, and can reproduce when two particles of opposite sex touch. Particles grow old and die; the younger they are, the faster they can move.

    View applet (and source)

  • Particle Swarm Optimisation

    A simple visualisation of Particle Swarm Optimisation in a 2D plane.

    View applet (and source)