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:

<iframe width=“100%” height=”320” src=”” frameborder=”0” allowfullscreen></iframe>

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:

Some things that make this fun:

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:

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:

Find a typo?

More Things Written

» October 1, 2017
» October 10, 2017