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:

ITEM QTY. COST DESC.
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:

ITEM QTY. COST DESC.
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

ITEM QTY. COST DESC.
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.


ICM Week 8 – Pumpkin Drum Kit

For this assignment I added a collection of sounds to my p5.js sketch and made a pumpkin drum set that uses the keys A, S, D, and F to play sounds. It is based off of code from here.

Here’s the code:let pumpkin;
let scream;
let kick;
let snare;
let hihat;
let extraScale = 0;
function preload() {
pumpkin = loadImage("pumpkin.jpg");
scream = loadSound("scream.mp3");
kick = loadSound("kick.mp3");
snare = loadSound("snare.mp3");
hihat = loadSound("hihat.mp3");
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
imageMode(CENTER);
translate(width/2, height/2);
scale(1 + extraScale);
image(pumpkin, 0, 0);
if (extraScale > 0) {
extraScale -= 0.05;
}
}
function keyTyped() {
extraScale = 1;
if (key == "a") {
kick.play();
}
else if (key == "s") {
hihat.play();
}
else if (key == "d") {
snare.play();
}
else if (key == "f") {
scream.play();
}
}

I ran into a problem trying to add instructional text at the top because I added a noLoop to the function setup but then the pumpkin stopped enlarging every time a key was hit so I got rid of it and instead of adding the coordinate 0 on the x axis I added 25 and it finally showed up!

Here’s my new code:let pumpkin;
let scream;
let kick;
let snare;
let hihat;
let extraScale = 0;
function preload() {
pumpkin = loadImage("pumpkin.jpg");
scream = loadSound("scream.mp3");
kick = loadSound("kick.mp3");
snare = loadSound("snare.mp3");
hihat = loadSound("hihat.mp3");
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(0);
text("Press a s d f to play", 150, 25);
fill(255);
imageMode(CENTER);
translate(width/2, height/2);
scale(1 + extraScale);
image(pumpkin, 0, 0);
if (extraScale > 0) {
extraScale -= 0.05;
}
}
function keyTyped() {
extraScale = 1;
if (key == "a") {
kick.play();
}
else if (key == "s") {
hihat.play();
}
else if (key == "d") {
snare.play();
}
else if (key == "f") {
scream.play();
}
}

 

pComp Midterm – Cube Switch Game

For this assignment my partner and I came up with a game that has 5 colorful buttons on each side of a square cube with an LED above each light to signify when to press it. Upon pressing the sixth, black button, the game initiates and the player has only a few moments to press the button where the light is and the timing gets faster and faster as the game progresses. If the button isn’t pressed in time, all the LED’s light up in succession and the game is over.

Since part of the assignment was to include a serial connection to p5.js, we included sounds using serial.print that play every time a button is pressed and also when the player loses.

We laser cut a 1/4″ piece of Acrylic and fastened arcade buttons to each side of the cube.

Here is the code for Arduino:

//LED Pins
int LEDPins[] = {5, 6, 7, 8, 9};
//Switch Pins
int switchPins [] = {12, 11, 2, 3, 4};
//sides
int activeSide;
int activeSwitchState;
int lastActiveSwitchState;
//Start button
int startButtonPin = 10;
bool gameActive = false;
int startButtonState;
int lastStartButtonState;
bool userLost = false;
//timing
long startTime;
long interval;
void setup() {
Serial.begin(9600);
//LEDS
pinMode(LEDPins[0], OUTPUT);
pinMode(LEDPins[1], OUTPUT);
pinMode(LEDPins[2], OUTPUT);
pinMode(LEDPins[3], OUTPUT);
pinMode(LEDPins[4], OUTPUT);
//Digital Switches (buttons)
pinMode(switchPins[0], INPUT);
pinMode(switchPins[1], INPUT);
pinMode(switchPins[2], INPUT);
pinMode(switchPins[3], INPUT);
pinMode(switchPins[4], INPUT);
//start button
pinMode(startButtonPin, INPUT);
}
void loop() {
//make array of switch inputs
int switchStates [] = {
//analog inputis
digitalRead(switchPins[0]),
digitalRead(switchPins[1]),
digitalRead(switchPins[2]),
digitalRead(switchPins[3]),
digitalRead(switchPins[4])
};
//start button
startButtonState = digitalRead(startButtonPin);
//when start button is pressed, game is activated
if (startButtonState != lastStartButtonState) {
if (startButtonState == HIGH) {
gameActive = true;
userLost = false;
//initialize time
startTime = millis();
activeSide = pickRandomSide();
interval = 10000;
}
lastStartButtonState = startButtonState;
}
if (gameActive) {
//within the time limit
if (millis() - startTime <= interval) {
activeSwitchState = switchStates[activeSide];
if (activeSwitchState != lastActiveSwitchState) {
if (activeSwitchState == HIGH) {
Serial.print(activeSide);
Serial.print(',');
Serial.println(interval);
interval *= 0.80;
activeSide = pickRandomSide();
startTime = millis();
}
lastActiveSwitchState = activeSwitchState;
}
} else {
//game not active, user lost game
gameActive = false;
userLost = true;
}
}
if (!gameActive && userLost) {
//if you go over the time interval you lose & LEDs will flash
Serial.print(5);
Serial.print(',');
Serial.println(0);
for (int i = 0; i < 5; i++) {
digitalWrite(LEDPins[i], HIGH);
delay(100);
digitalWrite(LEDPins[i], LOW);
}
}
}
//function that lights up the LED & returns value of the side it is on
int pickRandomSide() {
for (int j = 0; j < 5; j++) {
digitalWrite(LEDPins[j], LOW);
}
int side = random(0, 5);
digitalWrite(LEDPins[side], HIGH);
return side;
}

And the code for p5.js:
// Declare a "SerialPort" object
let serial;
let latestData = "waiting for data";
//sounds
let sounds = [];
//incoming data from arduino
let arduinoData = [];
let activeSide;
let interval;
//logic for when to play sound
let lastInterval;
function preload() {
soundFormats('mp3');
for (let i = 0; i < 6; i++) { sounds.push(loadSound('sound' + i + '.mp3')); } } function setup() { // Instantiate our SerialPort object serial = new p5.SerialPort(); serial.open("/dev/cu.usbmodemFD121"); serial.on('data', gotData); } function gotData() { var currentString = serial.readLine(); // read the incoming string trim(currentString); // remove any trailing whitespace if (!currentString) return; // if the string is empty, do no more //console.log(currentString); // println the string latestData = currentString; // save it for the draw method } function draw() { arduinoData = split(latestData, ','); activeSide = arduinoData[0]; interval = arduinoData[1]; if (activeSide >= 0 && activeSide <= 5 && lastInterval != interval) {
sounds[activeSide].play();
lastInterval = interval;
}
}

I’m going to have to upload the pictures of the box making process tomorrow because dreamhost won’t let me upload any more pictures tonite…

Here’s the finished working result!

IMG_9641 from Marco Wylie on Vimeo.

 

 

ICM Week 7 – Tony’s Working Website

I’m still having some trouble with the image showing up properly on my webpage. It’s sideways and I double checked to make sure my original file is properly sized and facing the right way and it is.

I added a background color and made the header text bold. After that I included an api that generates a random cat GIF when reloading the website.

Here is a video of the website (not sure how to share it since it’s a locally hosted site)…

tony’s website vid from Marco Wylie on Vimeo.

Here’s the code:
var img;
var tony;
function preload() {
img = loadImage("tony.jpg");
}
function setup() {
canvas = createCanvas(800, 800);
}
function draw() {
image(img, 0, 0, 400, 400);
}

And the HTML code: