MIDI > P5

R&D

I’ve been re-exploring p5.js recently (a JavaScript library for creative coding) and am pleased to see a growing number of additions that make it look more and more like a fully fledged creative platform.

As a proof of concept I created a simple sketch that visualises basic geometric shapes in response to incoming MIDI notes. I used the excellent p5.scribble.js library and the super useful WEBMIDI.js utility.

Shapes drawn using p5.scribble.js

A sub-optimal directory structure, but good enough for a proof of concept.

WEBMIDI is well documented and easy to use – see the WEBMIDI Basics documentation

Following OOP principles, I created custom drawing classes for the specific shapes that I wanted to visualise, each with its own draw method making use of appropriate p5.scribble functions.

In Ableton, I created a simple drum pattern.

And sent the outgoing MIDI to a virtual port via Loop MIDI.

Back in p5, I added a listener for the incoming MIDI notes, instantiated the relevant drawing class for each one and passed it to the ‘BlobManager’, responsible for managing time-limited visibility for each note shape.

It all went smoothly and resulted in a fairly responsive, if very simple, audio visual proof of concept. Interestingly enough, when I ported the code to good old fashioned Processing, which uses Java rather than JavaScript, I saw no difference in perfomance or latency which makes me think that p5 is just as good a choice as Processing for creative experimentation.

If you are interested in more detail, here is the code, offered without liability, warranty or support! – https://github.com/jamiegledhill/P5-MIDI-notes