Playing with cellular automata, JavaScript & MIDI

This past year I’ve spoken at conferences about fun things you can do with JavaScript and MIDI. One of the more memorable conferences I participated in was at FullStack London 2017 in July. There were three full days of talks, a lot of topics covered and some pretty smart cookies — like Douglas Crockford!

One of the other talks I enjoyed quite a bit was Generative Music with JavaScript by Tero Parviainen (@teropa on Twitter). There was one slide in particular that illustrated how to use cellular automata for generating music. I found it captivating — particularly the demo that restricted the notes each cell could correspond to to a specific musical node.

Another reason I found it captivating was I immediately thought of a way I could incorporate it into what I would be talking about later:

The video demonstrates Tero’s cellular automata demonstration, more or less as it was presented in his slides, but in an interactive way with a MIDI controller — specifically this Novation Launchpad MK2 — through the browser and JavaScript.

I’ve made the source code available here:

https://github.com/georgemandis/cellular-automata-javascript-midi

Some things that make this fun:

• Specify and change the rules in realtime via simple input fields on the page. The default set is, I believe, Wolfram’s Rule 30.
• Tap individual cells to turn them on or off. If you interact with cells along the bottom row it will influence the next generation.
• Clicking the bottom-right button (labeled “Record / Arm”) will completely clear the bottom row in case you want to stop the cells from generating.

My demo is not terribly dissimilar to a Conway’s Game of Life demo for Web MIDI by Chris Wilson I found on this old Web Audio demo website:

https://webaudiodemos.appspot.com/conway/index.html

Chris’ is also designed to work with a Novation Launchpad MK2, though I found it doesn’t seem to work correctly with the newer model I linked to above. On my older model it works perfectly.

I will confess the demo doesn’t do much besides provide something pretty to look at for a couple minutes. I think the next step would be to bring in some sound using the Web Audio API, experiment with changing the direction the cells generate in and manipulating speed.

The demo requires some pretty specific hardware, but if you have a Novation Launchpad MK2 hanging around you can give it a whirl right now, provided you’re using Chrome. Just plug the MIDI controller into your computer, navigate to the following page and you should be able to start interacting with the demo as seen in the video:

https://georgemandis.github.io/cellular-automata-javascript-midi/