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.

ICM – Week Uno

I’ve never written code in my life…I’m a little scared….¬†Although I’ve managed to complete the quiz with relative ease, it took me quite some time to really understand what I was doing. I ran into the following problems when trying to complete my little monster:

I’m trying to add a yellow background color to my script and I keep getting this error:

Here is what my script currently looks like:

It is my understanding that the background color should be listed under function setup, and it appears that I have it in the right place. Now that I’m looking at the error code again it refers to an “unexpected token” in line 6, column 14 so I’m assuming one of the numbers is incorrect. What is even more distressing is that I tried editing this from a previously correct example named “Zoog” so when I refer to that one and correct it, my error still pops up! I have to admit, I gave up on the problem and started to watch the instructional videos which gave me some confidence to create a monster from scratch.

As a side note, I should mention that when creating the reproduced olive I ran into a problem making the line red. This was because I was putting “fill” instead of “stroke” (see below) Now I understand that order is very important.

………………………………………………………………………………………………………………..Just from playing around with Javascript for the first time, I’m starting to realize it’s massive functionality. The possibilities seem endless and it is both exciting and overwhelming. Although I’ve only scratched the surface of p5.js, I can already tell that it will enable me to create interactive webpages, the likes of which I never knew I could code myself! Having a creative website to illustrate the work I will do in this program will certainly help my endeavors. I can see how javascript will make it possible to have a unique online presence.