Audio Interface Controller

In terms of P5JS, I used a serial template provided from class for initial testing. An important file to keep note of was “p5.serialport.js”. Without this file, serial communication between Arduino and P5JS would not work. 

With both Arduino and P5JS ready, I was prepared to make the serial connection. First, I plugged my sensor box (Arduino) into my computer and opened p5.serialcontrol. The port I chose was called “COM3”, and I could see this on the p5.serialcontrol interface. All I had to do was open the port and include “serial.open(‘COM3’);” in the serial template. When I ran the code in P5JS, I could see my potentiometer and photocell values being printed in the console and on the screen. I could also change these values by interacting with my sensor box. 

In general, I had to set up Arduino and P5JS one at a time. It was very easy to forget to close out of the Arduino IDE before opening P5JS. In fact, I couldn’t see my sensor values on P5JS at some point because the Arduino IDE was running and accessing the serial monitor.

Audio Controller: For this project, I decided to make a sound visualizer on P5JS, where my sensor box would control both the volume of my song and the color of my visuals. To get started, I found a sound visualizer example for P5JS by Ruyi Chen. Each pulsing rectangle represents a different frequency or note in the song and reacts to the volume and presence of its respective frequency in the song. I modified the code by changing the look of these rectangles, adding pulsing ellipses in the center of the screen, and uploading an mp3 of a song I composed in my sound class. The ellipses are similar to the rectangles in the sense that each ellipse represents a different note in the song, and the diameter changes based on the volume and presence of the note. 

With my sound visualizer functioning the way I wanted it to, I needed to incorporate the serial template so that I could connect my sensor box to it. This process was fairly doable, since I just copied the serial code and pasted it into my sound visualizer code. As it was at the moment, my serial code could read in my sensor values, but they were represented as a single string. This wasn’t very useful. To utilize these values, I had to modify a function called gotData(). My sensor values were stored in a string called “latestData”, so I had to split the string and convert the values into integers. Then, I stored the converted integers into variables called “potValue” and “lightValue”. This way, I could use my sensor values for my P5JS code. 

For my sound visualizer, “potValue” changed the volume of my song, and “lightValue” changed the color of the ellipses and rectangles.