Electronic Music Interface

Interface LabCreative Coding
Written By Danni Wang

Ideation

For my final project, I create a MIDI controller that allows a person to interact with both the physical and digital world by playing a simple musical instrument made with Arduino and visualizing sound effects in p5.js. My goal is to have things I learned in the session connected and worked well instead of achieving high standards in terms of aesthetics due to the time constraint.

🎵 MIDI Controller for a DAW. I use Ableton in this project.
👁‍🗨 Music Visualizer when playing songs in p5.js

System diagram

Schematic diagram

Playtesting round 1

Prototype

The problem is that the song needs 18 notes, but my breadboard can support up to 9 buttons. My guess is to use both pushbuttons and a keyboard in Ableton. From my current understanding, A to L on the keyboard are C3 D3 E3 F3 G3 A3 B3 C4 D4, which can cover 9 notes of my project, so breadboard is suitable for the remaining 9 notes. But this method actually separated the continuous notes, for example, F2 A2 B2 // E4 F4 G4 A4 B4 C5 on a breadboard and C3 D3 E3 F3 G3 A3 B3 C4 D4 on a keyboard, which makes it technically difficult to play with, especially when D4 E4 or B2 C3 need to be played in one bar (1 note on breadboard and another one on keyboard). After several attempts, I ordered a second breadboard, which is available and easiest to me. Here are other ways that may work.

1️⃣ have each button able to play 2 notes in code
2️⃣ fabricate buttons out of wire and cardboard

// Thanks to David's help, this problem has been solved

p5.js sound exercise and testing

There are few high-frequency sounds in the song, and the low-frequency sounds are loud, which causes the visual effect of the sound to have not yet reached a full 360-degree circle (only the circle in the bottom half changes with the song). I tried to change my mapping to have 360 effects but it didn't work well.

// Thanks to Enrique's help, this problem has been solved

Playtesting round 2

I learned new things in Creative Coding class this morning and attempted to add some of them to my project. Just things went a bit complicated when I tried to incorporate them into my project. For the p5.js, I created faded concentric circles using loops as background, so there is a variable "d" as a parameter in the "fill( );" I tried to declare three more parameters "cr, cg, cb" and put them in the "fill( );" with "*d" or "/d" or other ways that allow them to be connected with "d", but the outcome was not working in the way I meant to be – changing background color smoothly with rate.

// Thanks to Carrie's help, this problem has been solved

I2C pins were not working for digital inputs based on my code. As opposed to other Arduino Nano boards, pins A4 & A5 have an internal pull-up and default to be used as I2C bus, so the usage as analog/digital inputs is not recommended. Connected these two buttons to other pins.

Final result

💻 Click me to view the full vision of sound visualization in p5.js

🎹 Click me to watch the 3-mins demo

Danni Wang
Previous

Live Space Station
Next

Serial Labs