Similarity JukeBox @ ITP Winter Show

Showing my final at the ITP Winter Show was the most intense user testing process that taught me a lot about how to display my work and how to quickly explain what my project was about to the public.

If I had to do it all over again I would probably make the buttons on the interface have the play, next set, and last set symbols on them and move the fader down a little more. Although some people knew exactly how to use controls, there were a few that didn’t know where to start. Musically inclined people spent more time playing around with it and I was especially surprised to find that it was a big hit with high school students. I assumed that because a majority of the music referenced is from the 60’s and 70’s that they wouldn’t find it entertaining but I was wrong!

Laser cutting Illustrator File

I realized after putting my wood panel into the laser cutting machine that I needed to make the squares for the buttons double the size. I also added the symbols for the buttons underneath which could explain why they were so close to the fader. This was my first try at the laser cutting machine, and my first solo fabrication project – not too shabby! I tried using the same font that was on my cigar box but it looks like I should have adjusted the spacing of the font because it’s a little bit different. I used¬†Berthold Akzidenz Grotesk Bold and found it by uploading a picture of a word on the box to

The final code:

let playbutton, stopbutton, nextbutton, backbutton;
let slider;
let fader = 0;
let songAFileNames =
let songBFileNames =
let songAs = [];
let songBs = [];
let albumAs = [];
let albumBs = [];
let currentIndex = 0;
let serial;
let portName = '/dev/cu.usbmodem1411';
let hasStarted = false;
let isPlaying = false;
let volumeA = 1;
let volumeB = 1;
function preload() {
for (let i = 0; i < songAFileNames.length; i++) { songAs[i] = loadSound("assets/sounds/" + songAFileNames[i] + ".mp3"); songBs[i] = loadSound("assets/sounds/" + songBFileNames[i] + ".mp3"); albumAs[i] = loadImage("assets/images/" + songAFileNames[i] + ".jpg"); albumBs[i] = loadImage("assets/images/" + songBFileNames[i] + ".jpg"); } } function setup() { createCanvas(1334, 750); background(255); serial = new p5.SerialPort(''); // make an instance of the serial library; // open port serial.on('connected', function(){ console.log("CONNECTED"); background(15); }); serial.on('data', gotData); // declare serial data callback function } function draw() { //checkSliderAndUpdateSound(); if(hasStarted) checkFaderAndUpdateSound(); } function checkFaderAndUpdateSound() { console.log("checkFaderAndUpdateSound"); volumeA = map(fader, 0, 1023, 0, 1); volumeB = map(fader, 0, 1023, 1, 0); console.log(volumeA); songAs[currentIndex].setVolume(volumeA); songBs[currentIndex].setVolume(volumeB); tint(255,255); let xPos = width/2 - 750/2; image(albumBs[currentIndex], xPos, 0, 750, 750); tint(255, fader/4); image(albumAs[currentIndex], xPos, 0, 750, 750); } function playsound() { if (!songAs[currentIndex].isPlaying()) { songAs[currentIndex].loop(); songBs[currentIndex].loop(); } } function pausesound(){ songAs[currentIndex].pause(); songBs[currentIndex].pause(); } function stopsound() { songAs[currentIndex].stop(); songBs[currentIndex].stop(); } function nextsetsound() { stopsound(); currentIndex++; if (currentIndex > songAs.length - 1) {
currentIndex = 0;
function lastsetsound() {
if (currentIndex < 0) { currentIndex = songAs.length - 1; } playsound(); } function gotData() { let arduinoInput = serial.readLine(); // read an ASCII-encoded string if(arduinoInput.length > 0) {
if (arduinoInput === 'P') {
if(isPlaying) {
isPlaying = false;
} else {
isPlaying = true;
} hasStarted = true;
else if (arduinoInput === 'B') {
else if (arduinoInput === 'N') {
else {
if(arduinoInput == NaN) arduinoInput = 0;
fader = arduinoInput;

const int playButton = 2;
const int backButton = 3;
const int nextButton = 4;
int threshold = 2;
const int fader = A0;
int faderValue = 0;
int playButtonState = LOW;
int backButtonState = LOW;
int nextButtonState = LOW;
int prevFaderValue = 1;
int prevPlayButtonState;
int prevBackButtonState;
int prevNextButtonState;
void setup() {
pinMode(playButton, INPUT);
pinMode(backButton, INPUT);
pinMode(nextButton, INPUT);
void loop() {
faderValue = analogRead(fader);
backButtonState = digitalRead(backButton);
playButtonState = digitalRead(playButton);
nextButtonState = digitalRead(nextButton);
if (playButtonState != prevPlayButtonState && playButtonState == HIGH) {
if (backButtonState != prevBackButtonState && backButtonState == HIGH) {
if (nextButtonState != prevNextButtonState && nextButtonState == HIGH) {
if (abs(faderValue - prevFaderValue) > threshold) {
prevFaderValue = faderValue;
prevPlayButtonState = playButtonState;
prevBackButtonState = backButtonState;
prevNextButtonState = nextButtonState;

I’m shocked that in three months I was able to go from making an LED blink and a circle move on the screen to creating a jukebox which has been an idea of mine for quite some time. I can’t say that I love coding, but using code to create this project definitely made me appreciate the power of that language.

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 4

This week I reviewed the material by creating a blinking led on a trum potentiometer that allows the led to blink faster or slower on a dimmer. The code was borrowed from here.

2017-10-04 01.39.24 from Marco Wylie on Vimeo.

And here is the code:
int sensorPin = 0;
int ledPin = 13;
void setup()
pinMode(ledPin, OUTPUT);
void loop()
int sensorValue;
sensorValue = analogRead(sensorPin);
digitalWrite(ledPin, HIGH);
digitalWrite(ledPin, LOW);

pComp Week 3 – Digital i/o & Observation

Set up a digital out and in and created short vid about it:

2017-09-23 18.44.42 from Marco Wylie on Vimeo.


For this weeks assignment I chose the Bedford L’s subway turnstile (although this observation applies to all of nyc’s subway turnstiles). I noticed that people generally flow through with their cards with ease when and if their cards work. The swiping function and whether or not a person has insufficient funds on their card determines the flow of the crowd. Whenever someone gets stuck swiping their card many times for lack of functional knowledge or whatever it may be, the crowd gets backed up. If this occurs during rush hour, the chaos it creates is stronger. People end up having to back out of the front of the turnstile, which leads to the line behind them having to awkwardly back up too. Not having enough money on your card could cause the same problem, backing up the flow.

I think this could be solved a few different ways. The MTA has already introduced an automatically refillable Metrocard, but this doesn’t get around the issue of swiping the card to fast and trying to go through only to awkwardly get jolted back by the turnstile. In other countries, take France for example, you put a small card through the top of the machine and it takes it and spits it out half a foot below and opens the doors to let you in. I think you can buy a card that allows you to just place it near a sensor that allows you to open the doors and proceed as well.

While observing the turnstile traffic at the L train on Bedford Ave, I noticed that the people who were the slowest were usually tourists trying to figure out how to position the Metrocard correctly or struggling with the rate of speed of the swipe. Being a native New Yorker, I’m very familiar with how to use the turnstiles, but that is not to say that I don’t ever hold up the line trying to swipe.

I’m guessing the way that the whole process works is that by registering the swipe of a Metrocard, a lever is released ¬†which then allows you to go through the turnstile.

Assuming everything goes smoothly, the act that takes the least amount of time is going through the turnstile. Getting your metro card out, if you didn’t in advance, and swiping it takes the longest amount of time.