ITP Blog

My journey in making things

ICM – Lesson#1

We kicked off ICM with an introduction to P5.js. Given the opportunity to learn a new library I was very keen to get my hands on the keyboard and start working, but first thing’s first, CONCEPT, CONCEPT and yeah, CONCEPT.

After thinking (at times out loud), about possible ideas, I decided to pay tribute to one of my all time favorite desktop drawing app, Alchemy. One feature I particularly love about it, is it’s audio reactive brush. Simply put, it allows the user to hook up his microphone input signal into an analyser and assign it’s values to a brush size and pattern, time to get to work.


I started by investigating [P5.dom.js & P5.js]’s reference to get a sense of how the library operates, and found the learning curve to be surprisingly small. I then went on to use P5.sound.js abstraction of the Web Audio API to capture the user’s microphone input and get values back into a variable.


For finishing touches I added jQuery to control some UI elements in the DOM (I guess you can get out of jQuery, but you can’t get the jQuery out of you) and wrapped it up with a slider that acts as a multiplayer to the sound input for quieter environments and/or effects. Last but not least I added colors and functionality:


I am currently working on a few advancements including noise patterns controlled by sound, different brush types and better audio analysis.


The link to the code & demo can be found here

Hi I am Or, I am a director, developer and artist. My current interest in research is sound interaction, computer vision & immersive media development.

Leave a Reply

Your email address will not be published. Required fields are marked *