BY: Tiri Nhawu and Lynelle Lowrenz Prof. Andy
My previous group project definitely inspired my midterm project in terms of design. For the group project our device had a vintage look to it, adopting the old telephones. Similarly my midterm project was designed like a jukebox, which was a famous music device in the 80s and 90s.
One project that I was inspired by was Musical Stairs by Remo Saraceni. In this project, users can create melodies and sounds by stepping on stairs. This project allows users to physically interact with the project. It also has an element of music and the choice of music. I think this project is interactive because it has multiple outcomes and experiences, in this case there are many different possibilities of movements, leading to many different combinations of sound. It is also a “two way conversation” - the user is able to communicate , and the project “listens” to the user's request then “replies” accordingly.
Jukeboxes already exist but they are outdated and are not widely used anymore. We wanted to bring back the jukebox into modern society. We thought that in order for it to be relevant for today, we need to update it, to suit current society. So we made it more interactive.
Our project is unique because it combines modern technology with old vintage design.Our jukebox not only played music but it is also a mind game - users have to solve riddles to play the songs.It is designed for users aged 10 and up, as it includes interactive elements that require a certain level of critical thinking to solve, making it especially valuable for younger audiences who enjoy immersive, hands-on experiences with music and technology.
In the past, when jukeboxes were commonly used, they were typically placed in accessible locations, allowing people to interact with them without any guidance. Observing this, we aimed to create a similar experience with our jukebox. Instead of being present to explain how it works, we decided that when users switch on the jukebox, an audio recording of us explaining the operation would play automatically. That way we could place our jukebox anywhere and people would be able to use it.
For one of our sensors, specifically the touch sensor, we initially used an image of fire, requiring users to "burn" their hands to play the song "Fireball." However, we realised that using fire as our imagery might not be the best choice, as most people are understandably hesitant to touch anything associated with fire. We should have used something inviting to touch.For the light sensor, we chose a flower, symbolising the need for sunlight for it to bloom. This connection made the interaction intuitive and enjoyable for users.
We also made sure that the actions and imagery associated with each song matched its content, providing users with clues related to the songs and enhancing the overall experience. Additionally, we programmed the LED lights to change patterns and colours based on the song being played. Each song features a unique lighting scheme that reflects its mood and energy, creating a dynamic visual experience that complements the auditory experience.
In terms of materials, we mainly used cardboard. The images for the fire and flower were printed out, while the rest of the jukebox was either painted or handwritten. We opted for what was easiest and most accessible for us to work with. However, we later recognized the importance of using materials that align with the project’s themes of nostalgia and interactivity. Cardboard, for instance, evokes a sense of familiarity and playfulness, reminiscent of childhood crafts, which resonates with our target audience. By using printed images for the fire and flower, we ensured that the visuals were appealing and relevant to the songs, enhancing the user experience.
To facilitate user interaction, we designed the jukebox to engage users in a fun manner. The audio guide serves to help users with the jukebox's functions without needing our assistance, creating a seamless experience. Overall, we hoped that the thoughtful design decisions foster a deeper engagement with the jukebox, making it a delightful and interactive experience for users of all ages.
Our final product was very different to our initial idea and plan for it. The biggest difference was the number of songs and sensors. In our initial plan we hoped to have five different songs with five different sensors. On top of that, we hope to have a volume button, which allows the user to adjust the volume. I jukebox was also going to switch on when someone danced in front of it. However, it ended up having only three songs, no volume button, and it switched on differently. All this changed for multiple reasons. Here’s why:
When it came to coding, we first started with the basics, which was connecting the music to the speakers, because the main component to our project was playing music. After figuring that out, we then needed to tackle the next step, which is playing the music on command. That is where the sensors come in. Once a sensor was read, it would activate a song. We first started by connecting all the sensors together with their corresponding songs. However, only three sensors were working, which were light sensors, touch sensors and vibration. We decided to focus on this for the user testing session since only 75% of our project needed to work. Secondly, one of the LAs recommended we reduce the amount of sensors we have as it would complicate things. Another problem we were facing was the music playing. Sometimes the wrong song will play for the wrong sensor, especially for the vibration sensor.
We used a distance sensor to switch on the jukebox. We decided not to detect motion in the scenario where the jukebox is a busy environment and people are moving around everywhere. So, instead, we placed a cardboard piece of paper on top of the distance sensor and when it is taken off by someone, the jukebox switches on.
After the user testing season, the main feedback we got was that our jukebox needed to be more user-friendly. We found that people were not getting the answer to the riddles. Our instructions were also unclear, making the experience not that great. One of the LAs also recommended we use a mic sensor, as the vibration sensor doesn't really detect voice but rather sounds like clapping.
To solve the inconsistencies with the songs, we added a capacitor and an extra power source for the speakers. This proved helpful, because our project was more stable.
After getting the feedback, we changed our riddles to make them more clear and easy to understand. We added instructions on how to use our jukebox. We also chose music that matched the answer to the riddles, to help the users, and make it more intentional. We added LED lights to flicker differently depending on the song to make the experience more fun. We also provided them with a flashlight if someone didn't have one. Lastly, we added a stop button, to stop playing the songs. We did not have time to add a volume button or try and figure out the other 2 sensors.
Lynelle and I tried to meet up as much as possible. I contributed to the project by doing most of the code, and Lynelle did most of the design, from painting to placing the components onto the jukebox.
#include "DFRobotDFPlayerMini.h"
#include <SoftwareSerial.h>
SoftwareSerial softSerial(10, 11); // RX, TX
DFRobotDFPlayerMini myDFPlayer;
//light sensor
int lightSensorPin = A0; // Photoresistor connected to analog pin A0
int lightThreshold = 600; // the threshold for the light
bool isPlaying1 = false; // boolean to check is song 1 is playing
bool isPlaying2 = false; //boolean to check if song 2 is playing
bool isPlaying3 = false; //boolean to check if song 3 is playing
//RGB LEDs
int red = 8; //pin for red rgb
int blue = 12; //pin for blue
int green = 9; //pin for green
int red2 = 3; // pin red for second led
int blue2 = 13; // pin for blue second led
int green2 = 4; // pin for green second led
int step = 1; //step used for seqeunces
//temperature sensor
int temperatureSensorPin = A1; // pin for temperature sensor
int degreesCelsius; // value read for sensor in degress
int startTemp; // temp once the code has run
int changeInTemp = 0; // the difference between startTemp and currentTemp
//microphone sensor
int digitalmicrophoneSensorPin = 2; // digital pin for microphone sensor
int analogmicrophoneSensorPin = A2; // analog pin for microphone sensor
int digitalMicrophone;
int analogMicrophone;
int state = 1;
//turn off button
int buttonPin = 5; // pin for push button
int val;
int prevVal;
bool lightOn = false; // on, or not?
void setup() {
Serial.begin(115200);
softSerial.begin(9600);
if (!myDFPlayer.begin(softSerial, /*isACK = */ false, /*doReset = */ false)) { // Use serial to communicate with mp3.
Serial.println("Error starting DFplayer");
}
myDFPlayer.volume(20); // Set volume to a medium level (0 to 30)
pinMode(red, OUTPUT); // outpu
pinMode(green, OUTPUT);
pinMode(blue, OUTPUT);
pinMode(red2, OUTPUT);
pinMode(green2, OUTPUT);
pinMode(blue2, OUTPUT);
pinMode(5, INPUT); // button input
}
void loop() {
if (state == 1) {
state1();
} else if (state == 2) {
state2();
} else if (state == 3) {
state3();
}
}
void state1() { //function to switch on the jukebox. if the distance < 50, the jukebox is "off" and will not play music even if sensors are activated
int echoPin = 7;
int triggerPin = 6;
bool on = false; //bool used to detect if on or not
long distance1;
while (!on) {
pinMode(echoPin, INPUT);
pinMode(triggerPin, OUTPUT);
digitalWrite(triggerPin, LOW);
delayMicroseconds(2);
digitalWrite(triggerPin, HIGH);
delayMicroseconds(10);
digitalWrite(triggerPin, LOW);
long duration = pulseIn(echoPin, HIGH, 17400);
//print out the value you read :
distance1 = duration / 29 / 2;
Serial.println(distance1);
if (distance1 > 50) { //checks if distance is > 50, if so then do the following
myDFPlayer.play(4); // our audio, explaining how to use the jukebox
state = 2; //goes to state 2
on = true;
}
}
}
void state2() { //function used to play the songs on command
bool run = false; //bool used to detect if anything is playing yet or running
while (!run) {
int sensorReading = analogRead(lightSensorPin); // Read the photoresistor value
int thisPitch = map(sensorReading, 30, 1000, 120, 1500); // mapped the photoresistor values for better reading
Serial.println(thisPitch); // Print the reading to the Serial Monitor for debugging
degreesCelsius = analogRead(A1) * (5000 / 1024.0) / 10;//read the input on analog pin 1 and convert to degrees celsius
Serial.println(degreesCelsius); //Print the reading to the Serial Monitor for debugging
temperatureSensorPin = analogRead(A1); // read the temperature sensor value
delay(100);//delay for stability
int analogmicrophoneSensorPin = analogRead(A2); //read the microphone sensor value
Serial.println(analogmicrophoneSensorPin); // print the reading to serial mointer for debugging
if (thisPitch > lightThreshold && !isPlaying1) { // If light is shining (above threshold) and song1 is not playing, do the following
myDFPlayer.play(3); // Play "Flashing Lights by Kanye west"
isPlaying1 = true; //song one is playing
isPlaying2 = false; //song two is not playing
isPlaying3 = false; // song three is not playing
} else if (degreesCelsius > 25 && !isPlaying2) { // if temp os above 25 and song two is not playing, do the following
myDFPlayer.play(2); // Play "Fire ball by Pitbull"
isPlaying2 = true; //song two is playing
isPlaying1 = false; // song one is not playing
isPlaying3 = false; //song three is not playing
} else if (analogmicrophoneSensorPin > 180 && !isPlaying3) { // if microphone value > 180 and song three is not playing do the following:
myDFPlayer.play(1); // Play "Glimpse of Us by Joji"
isPlaying3 = true; //song three is playing
isPlaying1 = false; // song one is not playing
isPlaying2 = false; //song two is not playing
}
if (isPlaying1) { // if song one is playing , do the following light sequence
setColor(255, 0, 0); // Red Color
delay(250);
setColor(0, 255, 0); // Green Color
delay(250);
setColor(0, 0, 255); // Blue Color
delay(250);
setColor(255, 255, 255); // White Color
delay(250);
setColor(170, 0, 255); // Purple Color
delay(250);
} else if (isPlaying3) { //if song three is playing, do the following light sequence
setColor(0, 0, 255); // Blue Color
delay(500);
setColor(255, 255, 255); // White Color
delay(500);
} else if (isPlaying2) { //if song two is playing, do the following light sequence
setColor(255, 0, 0); // Red Color
delay(250);
setColor(0, 255, 0); // Green Color
delay(250);
}
val = digitalRead(5); // digital pin for STOP button
if (prevVal == LOW && val == HIGH) { // if button is pressed, switch off the leds and go to state 3
prevVal = val;
run = true;
state = 3;
delay(10);
digitalWrite(red, LOW);
digitalWrite(green, LOW);
digitalWrite(blue, LOW);
digitalWrite(red2, LOW);
digitalWrite(green2, LOW);
digitalWrite(blue2, LOW);
}
}
}
void setColor(int redValue, int greenValue, int blueValue) { // function used to output the different colours to the rgb leds
analogWrite(red, redValue);
analogWrite(red2, redValue);
analogWrite(green, greenValue);
analogWrite(green2, greenValue);
analogWrite(blue, blueValue);
analogWrite(blue2, blueValue);
}
void state3() { // function used to stop the music
myDFPlayer.stop();
}
/**
* An RGB LED tutorial that shines different colours.
* This was adapted from a the tutorial found here:
* https://howtomechatronics.com/tutorials/arduino/how-to-use-a-rgb-led-with-arduino/
*/
/**
* A DFPlayer Mini MP3 tutorial.
* This was adapted from a the tutorial found here:
*https://github.com/ima-nyush/Interaction-Lab/tree/main/Tutorials/DFPlayer%20Mini%20MP3%20Playr
*/
/**
* A microphone sensor tutorial.
* This was adapted from a the tutorial found here:
*https://github.com/ima-nyush/Interaction-Lab/tree/main/Tutorials/Microphone%20Sensor
*/
/**
* An ultrasonic distance sensor tutorial.
* This was adapted from a the tutorial found here:
*https://github.com/ima-nyush/Interaction-Lab/tree/main/Tutorials/Ultrasonic%20Distance%20Sensor
*/
The primary goal of our project, the T & L Jukebox, was to bring back the classic jukebox by infusing it with modern interactive elements that engage users in a fun and meaningful way. We aimed to create a device that not only plays music but is also a game through riddles, thereby enhancing the user experience. Our project results aligned with our definition of interaction by enabling users to communicate with the jukebox, allowing it to "listen" to their responses and "reply" with the corresponding songs. This two-way communication fosters a dynamic relationship between the user and the device, creating an immersive experience.
However, there were areas where our project did not fully meet our initial expectations of interaction. The number of songs and sensors we could implement was limited compared to our original vision, which constrained the variety of interactions we had hoped to offer. We also wanted to add a volume but were unable to do so due to time.
Ultimately, audience interaction with our project was a mixed experience. While many users enjoyed the novelty of solving riddles to access music. They also said that our project was really interactive and “complete”. If given more time, I would enhance the project by expanding the range of songs and sensors, and ensuring that the interface is user-friendly. I would also add more rgb leds , and possibly more intricate lighting patterns. Incorporating additional feedback mechanisms could also help to better gauge user engagement and satisfaction
Through the setbacks we faced, particularly in coding and user testing, I learned the importance of adaptability and the necessity of clear communication in design. The process of responding to feedback ultimately led to a better product. Reflecting on our accomplishments, I take away a greater appreciation for the balance between creativity and functionality in interactive design. The experience reinforced my belief in the value of user-centred design, where understanding the audience's needs is crucial to creating an engaging and memorable interaction.
“A Short History of How Jukeboxes Changed the World.” Rock-Ola, 14 Aug. 2019, www.rock-ola.com/blogs/news/a-short-history-of-how-jukeboxes-changed-the-world?srsltid=AfmBOoqDs6_uq3dSK2IFna--0UUXU-Ab7UnS7I7mVMptTr_Fp0NZnjPg. Accessed 8 Oct. 2024.
The Jukebox Repairman. “The Jukebox Repairman.” YouTube, 4 Aug. 2016, youtu.be/RM683aTqfT4?si=LuPt2JvYig0UAhxc. Accessed 8 Oct. 2024