GridTone is a 99% JavaScript generative sound instrument.
A total of 24 notes from middle C plus one full octave make up the [current] sound range.

Examples

1. Hang 1 * - simple.
2. Hang FemVox * - sounds like squarepusher meets deadmau5.
3. Hang 3 * visually pleasing
4. Hang 4 * - this one evolves... it's weird.
5. Minor Scale - wanted to make sure you saw how the parameters change the dynamics.
6. Major Scale - another variation
7. SquareMau5 - ish - My current fave
8. Guitar Minor, Complex

* Integral Hang Drum

Cellular Automatation

The instrument follows these basic set of rules:

• For each grid block a note is assigned.
• Blocks travel in the direction shown with the arrow and when they hit a wall, they play the note on the grid block.
• When a block collides with another block, they rotate and continue on.
• Speed is determined by the step input in milliseconds. Higher value means longer delay between steps.

Advanced

• Size - Determines the size of the grid. Numbers only. Changes take effect after you press rebuild.
• Scale - Will modify the notes played on the grid to match the musical scale selected.
• Step - Delay between steps. Numbers only. In milliseconds, so higher number = longer delay.
• Echoplex - Will add an echo to the sound giving it an ethereal sound. The delay in echoes is timed to the 'step' parameter.
• Debug - Shows notes on grid and current activity to the right of grid.

Patterns will emerge and they may take 15 seconds to appear or an hour. The patterns will always repeat, eventually.

Tools

• I'm using Soundmanager2 to play the sounds and fiddle with the panning and volume. It's an impressive library. It uses flash however to actually play the sounds. See the 'Gripes' section for what I've learned about the current state of HTML5 audio. I was hoping to write this thing and have it play on my iphone, but html5 audio is not ready.
• I used Reason to generate the sounds. I created a midi file where I played each note from middle C up one octave. Then I just changed the samples.
• I wrote a script to slice up the sounds and auto name them, so creating new tones is simple.
• JQuery is used throughout for the DOM manipulation. I looked at using the html5 canvas object, but it's not as well supported as jquery is.
• Tested and working on the latest versions of Chrome, Firefox, Opera and Safari on Windows. Chrome, Firefox on linux. I don't have access to a mac so I don't know if it works or not, but feel free to let me know.

Inspiration

I saw this site http://www.earslap.com/links/otomata-online-generative-music-instrument off of http://reddit.com the other day and wanted to see how it worked. The author did not release any source code, just some rules. So I wrote my own, in javascript, and I expanded on it a bit, with adjustable grid size, step count and scale. Enjoy.

Gripes

• It's 99% javascript because HTML5 <audio> architects should be drawn and quartered. HTML5 will never replace flash until they figure this giant, gaping, design-flaw out that is caused by legalease and shows the absurdity of greed. It seems that the audio tag was only designed for streaming songs and not for, oh... I don't know... sound effects. Then there is the whole licensing on format battle going on. Basically all sides think the other side is out to screw them, meanwhile technology is stiffled by greed.
• IE engineers write stuff like they are from another dimension. I hate to have an early 90's throwback of 'this works best in {insert crappy browser here}', but IE guys make this a reality even today. Lynx works better than IE (thick on the sarcasm).
  Just plain doesn't work on Internet Explorer.