ICM Final

Figuring out the code for this was pretty difficult. Thankfully I had a lot of help from my instructor and we got the code up and running! I still haven’t come up with a suitable name for the project but I think that by the time I combine this with the pComp side I should have a better idea of what it should be called. I’m very happy with the results I have so far, and I certainly learned a lot putting it together.

Two more links in case the embedded version above doesn’t load:



let playbutton, stopbutton, nextbutton, backbutton;
let slider;
let songAFileNames = ['BabyDidABadBadThing', 'RunThroughTheJungle', 'MySweetLord',
'UnderPressure', 'YouNeedLove', 'LastNight', 'SurfinUSA',
'DaniCalifornia', 'WalkAndTalkIt', 'WhatIGot',
'SteppinOut', 'SemiCharmedLife', 'Mmmbop', 'GetOnYourBoots',
'WhyDontYouGetAJob', 'Taurus', 'TheAirThatIBreathe',
'PictureBook', 'LetForeverBe', 'LittleMermaid'];
let songBFileNames = ['SpiritInTheSky', 'TheOldManDownTheRoad', 'HesSoFine',
'IceIceBaby', 'WholeLottaLove', 'AmericanGirl', 'SweetLittleSixteen',
'MaryJanesLastDance', 'BrownSugar', 'LadyMadonna',
'DontStopTilYouGetEnough', 'TwoPrinces', 'Unpretty', 'PumpItUp',
'ObLaDiObLaDa', 'StairwayToHeaven', 'Creep',
'Warning', 'TomorrowNeverKnows', 'Nude'];
let songAs = [];
let songBs = [];
let albumAs = [];
let albumBs = [];
let currentIndex = 0;
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(400, 400); background(215); // slider slider = createSlider(0, 255, 100); slider.position(125, 320); // play button playbutton = createButton('Play'); playbutton.position(140, 350); playbutton.mousePressed(playsound); // stop button stopbutton = createButton('Stop'); stopbutton.position(200, 350); stopbutton.mousePressed(stopsound); // last set button backbutton = createButton('Last Set'); backbutton.position(50, 350); backbutton.mousePressed(lastsetsound); //next set button nextbutton = createButton('Next Set'); nextbutton.position(275, 350); nextbutton.mousePressed(nextsetsound); } function draw() { checkSliderAndUpdateSound(); } function checkSliderAndUpdateSound() { let slidervalue = slider.value(); let volumeA = map(slidervalue, 0, 255, 0, 1); let volumeB = map(slidervalue, 0, 255, 1, 0); songAs[currentIndex].setVolume(volumeA); songBs[currentIndex].setVolume(volumeB); tint(255,255); image(albumBs[currentIndex], 55, 20); tint(255, slidervalue); image(albumAs[currentIndex], 55, 20); } function playsound() { songAs[currentIndex].loop(); songBs[currentIndex].loop(); } 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;

Open ended questions for class:

  1. What buttons are useful? Should any be taken away?
  2. Which sets of songs are clearly related and which aren’t?
  3. Did you learn anything new about songs you might have heard before after playing with the sketch?
  4. How did the interface feel?

Final Update #3 – The coding part

Having finalized the conceptual part of my project, it’s time to code! Over the break I spent quite some time trying to figure out how to get two preloaded songs mapped out on the slide corresponding to the volume of each track.

Here’s what I have of the sketch so far. I’m adding buttons because this part of my project is due before the pComp part and I won’t have enough of the physical side done in time to present in a few days.

I still need to add images of the album covers fading into each other above the slider to emphasize what’s going on. And if I have time, I’d like to be able to add up to six songs per set. That reminds me I need to get that “Next Set” button working too! A nice background would be nice to have as well.

let playbutton, nextbutton, backbutton;
let slider;
let soundGroupPath1 = ['assets/sounds/BabyDidABadBadThing.wav', 'assets/sounds/LaGrange.wav'];
let soundGroup1 = [];
let soundGroupPath2 = ['assets/sounds/RunThroughTheJungle.mp3', 'assets/sounds/TheOldManDownTheRoad.mp3'];
let soundGroup2 = [];
function preload()
for(let i =0; i<soundGroupPath1.length; i ++) {
soundGroup1[i] = loadSound(soundGroupPath1[i])
for(let i =0; i<soundGroupPath2.length; i ++) {
soundGroup2[i] = loadSound(soundGroupPath2[i])
// album = loadImage('assets/images/BabyDidABadBadThing.jpg');
// album1 = loadImage('assets/images/BoogieChillun.jpg');
function setup()
createCanvas(350, 300);
// slider
slider = createSlider (0, 255, 100);
// stop sound to prevent it from playing automatically
// soundtrack.stop();
// play button
playbutton = createButton('Play');
playbutton.position(120, 150);
//next set button
nextbutton = createButton('Next Set');
nextbutton.position(140, 180);
// stop button
stopbutton = createButton('Stop');
stopbutton.position(180, 150);
function draw()
function checkSliderAndUpdateSound(){
// console.log(slider.value());
let slidervalue = slider.value();
let volumeOne = map(slidervalue , 0, 255, 0, 0.5);
let volumeTwo = map(slidervalue , 0, 255, 1, 0);
if(soundGroup1[0].isPlaying() == true && soundGroup1[1].isPlaying() == true){
// if(soundGroup1[0].isPlaying() == true ){
if(soundGroup2[0].isPlaying() == true && soundGroup2[1].isPlaying() == true){
function playsound()
if(soundGroup1[0].isPlaying() == false)
for(let i =0; i<soundGroupPath1.length; i ++) {
// soundGroup1[i].play();
// soundGroup1[i].setVolume(1);
function stopsound()
if(soundGroup1[0].isPlaying() == true)
for(let i =0; i<soundGroupPath1.length; i ++) {
function nextsetsound()
if(soundGroup1[0].isPlaying() == true)
for(let i=0; i<soundGroupPath2.length; i ++) {

Final Update #2

I spent the better part of my day collecting songs that sound alike, which led to an inevitable journey into songs that sound like another song that sound like another song and so on. Now I have groups of 5 songs that sound the same that I’ll need to somehow put on the fader. Originally, I had it set up so that I would only preload two songs at once for comparison. This new development is truer to my original idea which was an installation that would allow someone to hear the way I experience music. Usually when I hear a song it automatically flows into another song in my head and that usually leads to a playlist of music that sounds similar. Certain parts of a song will remind me of another and sure enough, I’ll be whistling another tune after a short while. Here is the running list of music so far:

Since I now have some sets of songs that are in groups of as much as 5, I have to rethink how I’m going to incorporate the fader. I know I want to have the songs blend into each other when the fader is moved, but now that 5 songs are going to be in a set at a time, I need to organize them so they flow when played. Originally, I wanted to have the album cover show on the LCD when the fader was all the way to one side. Now I’m going to have to have the album cover show whenever you only hear one particular song. The second the fader is moved to hear something else, the album cover will disappear and the a visualization of the two songs will be on the LCD.

I’m working with clips of songs to enunciate the listeners understanding of the similarities, but I’d like to maybe incorporate a button on the interface that will allow the user to hear the entirety of each song.

On the coding side, I’m going to need to incorporate the following:

Play/Rewind/Next buttons, fader values, serial communication, TFT LCD library, sound library, some kind of music visualization, image and sound files.

Final — Update

I’m considering making the LCD show sound waves of the songs playing to further demonstrate how similar two sets of songs at a time are. After presenting about my idea in ICM it became clear to me that not everyone hears music the way I do, and this could be a great opportunity to let people hear music through my ears.

As Tom suggested, here are two system diagrams to think about:

One thing I need to figure out is whether or not I need a headphone jack that can run through the cigar box or whether I should just use a headphone jack from an iPhone or laptop..

After user testing I realized that my BOM needs to be updated:

Cigar Box 1 $0 Brown 10 1/2″ x 7″ x 2 1/4″ rectangular cigar box with clasp
ON/OFF Button 1 $4.95 Rugged Metal On/Off Switch with White LED Ring – 16mm
Color LCD 1 $24.95 2.2″ 18-bit color TFT LCD Display with microDS card breakout
Potentiometer (fader) 1 $2.95 Slide Potentiometer 10K Ohm 0.5W, 3 1/2″ x 1 1/2″
Play, Back & Next Buttons 3 $1.50 Momentary Pushbutton Switch – 12mm Square
Fader Knob 1 $0.95 Slide Potentiometer Knob, Black
TOTAL —– $35.30

Whether or not I’ll be needing that on/off button will be determined once I really get into fabricating and putting together the whole project. I happened to have the button already so it’s no loss if I don’t end up using it.

I’m considering ditching the fader and going with a knob and three buttons (rewind to beginning, play, and next set). The reason for going with a metal knob instead is because I already have a variable potentiometer and I’ve found it hard to find a fader with an appropriate length and attractive knob.

Instead of trying to buy everything from Sparkfun and Adafruit I’m going to head to Tinkersphere to try and avoid shipping costs. (I’ll update my BOM once I go there later today). Here’s what I’ll need to find:

  • Headphone jack
  • 3 Push Button Caps
  • Potentiometer Cap
  • Color LCD (TFT Arduino compatible)
  • 3 Push Buttons


Updated BOM:

Cigar Box 1 $0 Brown 10 1/2″ x 7″ x 2 1/4″ rectangular cigar box with clasp
ON/OFF Button 1 $4.95 Rugged Metal On/Off Switch with White LED Ring – 16mm
LCD 1 $15.99 2.2″ color TFT LCD Display with microDS card breakout
Potentiometer (fader) 1 $2.95 Slide Potentiometer 10K Ohm 0.5W, 3 1/2″ x 1 1/2″
Play, Back & Next Buttons 3 $1.50 Momentary Pushbutton Switch – 12mm Square
Fader Knob 1 $0.95 Slide Potentiometer Knob, Black
TOTAL —– $26.34

Final Concept

For my final, I’ll be combining ICM and pComp, making a sort of sound installation out of a cigar box. I went through a few different ideas for the layout of this idea. The p5.js element will interact with a fader on the box and fade between one song and another very similar song. The point of the project is to demonstrate how alike two specific songs are and allow the user to fade between both songs to hear the similarities. I’m hoping to keep the whole project self contained in the cigar box but I’m worried I won’t be able to do that because I’m of the p5 element. A small LCD will show the album cover of the song playing and then as the fader is moved, slowly change into the other album cover of the other song. The image will fade in the same way the music does, mixing slowly and morphing into one another.

Or I could make it a stream of conscious sort of radio and try to have all the songs sound alike. I’m not sure I can find that many without resorting to solely folk music or a music genre that really does all sound the same and may be redundant! I could risk having the interactive sense of the project get lost because the user doesn’t do as much just turning a dial instead of pressing buttons and faders. One this is for sure, I am going to find most of my reference from music of the 50’s through the 70’s, so I’d like to keep the whole thing feeling very retro.

Depending on how I have the interface set up, I may have to add different p5.js elements. I’m torn as to whether I should have the box start playing music automatically when it’s opened or if there should be an on/off button. There should be a way of preloading all the songs but having them both play at once and you only hear one song when the fader is all the way to one side. When the fader is slid in the other direction you begin to hear the other song fading in slowly.

I need to have both songs play at once in the script in pairs at a time, so I’ll need a preload function. I suppose I’ll need the same for all the video’s so I wonder how extensive my library has to be. There will also need to be a function for fading the set of songs that will be serially connected to the Arduino interface. The music will be connected and played through a headphone jack so the songs can be played through headphones for an intimate experience of through a set of speakers for a more juke box feel.

What I realized through user testing is that I need to have some sort of engraving of instructions somewhere that clearly implies that two songs are being loaded at a time and the object is to fade back and forth to hear the similarities.




Final Project Prototype for Playtesting

Questions and (some) answers about project in general:

  1. Can I use an old iphone screen as a display? Not sure.
  2. Should I include touchscreen capabilities if I do use an iphone screen? No.
  3. What should the name of this project be?
    1. Is there a word for two songs that sound alike?
  4. How can I include p5.js in order to combine finals? To slowly fade the images on the LCD screen serially connected to the sliding potentiometer.
  5. Did I choose a sufficient speaker? Can I position the speaker at the bottom of the box?
  6. I’m thinking of putting the console inside of the cigar box, not on top. Will I be able to fit the speaker properly if I do so?

Bill of Materials

Cigar Box 1 $0 Brown 10 1/2″ x 7″ x 2 1/4″ rectangular cigar box with clasp
Speaker 1 $6.99 Large 8 Ohm Speaker – 4 inch square
ON/OFF Button 1 $4.95 Rugged Metal On/Off Switch with White LED Ring – 16mm
Color LCD 1 $24.95 2.2″ 18-bit color TFT LCD Display with microDS card breakout
Potentiometer (vol.) 1 $0.95 Rotary Potentiometer, 10K Ohm, Linear
Potentiometer (fader) 1 $2.95 Slide Potentiometer 10K Ohm 0.5W, 3 1/2″ x 1 1/2″
Play / Stop & Next Buttons 2 $1.00 Momentary Pushbutton Switch – 12mm Square
Vol Button 1 $1.50 Silver Metal Knob – 1″ D
Fader Knob 1 $0.95 Slide Potentiometer Knob, Black
LCD 1 $15.95 Basic 16 x 2 Character LCD – White on Black 5V
TOTAL —– $60.19



Other possible materials include: glue, sugru, paint.

Large 8 Ohm Speaker - 4 inch SquareRugged Metal On/Off Switch with White LED Ring - 16mm White On/OffSlide Pot - X-Large (10k Linear Taper)Rotary Potentiometer - 10k Ohm, Linear

Momentary Pushbutton Switch - 12mm SquareSlide Potentiometer KnobSilver Metal Knob - 14x24mmBasic 16x2 Character LCD - White on Black 5V

I’d like this project to be fitted inside a cigar box I have. It should be fitted with a speaker and all the components should be contained within the box neatly. All knobs and buttons will be properly laser cut to ensure tight fit.

I’m still trying to decide whether or not I want to have two LCD’s or just have the color LCD display information about the song playing. The point of having 2 is to have the color LCD display a picture of the artist currently playing and then below it, another LCD that’s longer and uses only text to display the song title in black and white. It may be redundant to have both. Perhaps I need to think of another way of displaying the song information. I want the picture on the color LCD to slowly fade along with the song into the next artist. It might be cluttered to have two LCD’s though…

Prototype for Playtesting

Instructions for Use: Press the On Button on the back of the cigar box. Press Play on the top of the box and use the fader to move back and forth between two similar tracks. To move on to the next pair of songs, press the Next button. Turn the volume up if you can’t hear the music.

Playtesting Questions:

Do the buttons feel right? Should I paint the box? Is it clear what the fader does?

Does having two LCD’s take away from the experience?



Final Brainstorm

Initially, I wanted to work on a type of “true mirror” that would allow you to see yourself un-mirrored and speak about issues surrounding identity but I realized a lot of people do mirrors for their midterms and finals.

Tom suggested in class that I find inspiration in the things I’m interested in. Here are a few of those things: Music, the news,

My new concept is to do an installation incorporating p5.js elements that demonstrates how similar some songs are to each other. Using a system of buttons and faders, the viewer will be able to interact directly with the piece, selecting a song to play and then sliding the fader to hear the similar song.

One of the first steps I’m taking is to start collecting and researching songs that sound the same. The point of this project is to allow the listener to hear how remarkably similar two songs are. For example, “My Sweet Lord” by George Harrison is very much alike “He’s So Fine” by the Chiffons.