Similarity JukeBox

My song comparison box has finally started to come together. Although I haven’t figured out one section of code on the p5.js side that will let the physical fader control not only the sound but the album display, the rest of the functionality seems to be working.

What I hope to convey with this project is how similar two songs can be, using clips of the songs to emphasize exactly what sounds the same between the two.

I’ll be running the p5.js script through an old iphone  which will be fastened to the interface shown in the video below. All I need to do is figure out the following:

  1. How to get the songs to play in the order I wanted and not randomly after pressing the next button.
  2. How to map the tint function in p5.js so that the fader works with the album images as well as the song clips.
  3. How to properly fabricate everything so that it fits neatly inside the cigar box.

A p5.js functional sketch version of the project can be seen here.

Serial Problems

I’m having a lot of trouble making a serial connection between my Arduino, the three buttons, and my p5.js sketch. Here is my current Arduino sketch:

const int pinButton2 = 2;
const int pinButton3 = 3;
const int pinButton4 = 4;
int lastButtonState = LOW;
int buttonPressCount = 0;
void setup() {
pinMode(pinButton2, INPUT);
pinMode(pinButton3, INPUT);
pinMode(pinButton4, INPUT);
void loop() {
char incoming =; // read incoming bytes
if (incoming == 'P') { // if you get P
digitalWrite(2, HIGH); // Play is Pressed
int currentButtonState = digitalRead(2); //read the play button
if (currentButtonState != lastButtonState) { // if the button changed
buttonPressCount++; // increment buttonPressCount
Serial.print('P'); // send a P
// int stateButton2 = digitalRead(pinButton2);
// int stateButton3 = digitalRead(pinButton3);
// int stateButton4 = digitalRead(pinButton4);
// Serial.println(stateButton2);
// Serial.println(stateButton3);
// Serial.println(stateButton4);
// delay(20);
lastButtonState = currentButtonState; // save the current state for next time
// int sensorValue = analogRead(A0);
// Serial.println(sensorValue);
// int sensorValue1 = analogRead(A1);
// Serial.println(sensorValue1);

(Based on this code)

And my p5.js sketch is here.

Every time I press the button on my breadboard I get a serial monitor reading of “P” but then I get another “P” when I release the button as well. This is making the song clips play twice and distorting the sound heavily in my p5.js sketch. Although, now I’m not getting anything on the p5.js side since I changed “1” to “P” in the .js sketch.

Button Press from Marco Wylie on Vimeo.


pComp Week 6 CEREAL (nomnom) input to p5.js


2017-10-14 16.48.26 from Marco Wylie on Vimeo. (sorry for the sideways video)

void setup() {
void loop() {
int analogValue = analogRead(A0)/4;

So in this video I’ve used a serial connection between my Arduino and my laptop, and with the code in the Arduino software I can see the binary values that the potentiometer gives out which is why it looks crazy on the screen. I also noticed that the board lights up “TX” which means it’s transmitting information, not receiving.

After that I downloaded Processing and was able to read the data there:

I couldn’t seem to get any farther than that though because I was getting a string of errors and then my computer shut down. 🙁 I moved onto the next lab in the effort of time.

Below, I tried using an example from tigoe’s examples to see if I have my potentiometer serially hooked up to p5.js but the browser kept freezing.

No matter what I tried that tab kept freezing so I moved onto another lab “serial input to p5js ide” and ran into the following error after copying the code:

I thought I found part of the problem — I didn’t upload the p5.serialserver.js file to my sketch, but I’m still running into the same error! Soooo frustrated….

OK! After an hour or so of mind-blowing frustration I realized I uploaded the wrong #&*@ file…I had uploaded p5.serialserver.js instead of p5.serialport.js — to my dismay, I’m still getting errors: (see below)

After commenting out all those functions I was able to get a sensor reading.

Serial Sensor p5 reading from Marco Wylie on Vimeo.

Here’s a link to the p5.js sketch.

When trying to go a step further and add a graph to my sketch I encountered this error:

There seems to be a problem with my background but I can’t figure out what the issue is. I tried restarting with a fresh tab but now I’m not seeing any results or errors…

Here’s the code:
var serial; // variable to hold an instance of the serialport library
var portName = '/dev/cu.usbmodem1421'; // fill in your serial port name here
var inData; // for incoming serial data
var xPos = 0; // x position of the graph
function setup() {
createCanvas(400, 300);
background(0x08, 0x16, 0x40);
serial = new p5.SerialPort(); // make a new instance of the serialport library
serial.on('list', printList); // set a callback function for the serialport list event
serial.list(); // list the serial ports
// get the list of ports:
function printList(portList) {
// portList is an array of serial port names
for (var i = 0; i < portList.length; i++) { // Display the list the console: //println(i + " " + portList[i]); } } function graphData(newData) { // map the range of the input to the window height: var yPos = map(newData, 0, 255, 0, height); // draw the line in a pretty color: stroke(0xA8, 0xD9, 0xA7); line(xPos, height, xPos, height - yPos); // at the edge of the screen, go back to the beginning: if (xPos >= width) {
xPos = 0;
// clear the screen by resetting the background:
background(0x08, 0x16, 0x40);
} else {
// increment the horizontal position for the next reading:
function draw() {