IMG_7438For my final project, I had to last minute change the concept since my midi controller idea fell through and proved to be unfit for this assignment. My project now is a musical map that lets users play music from different regions of the world. I initially wanted to create a map of the globe but decided to consolidate my map into one continent. The continent I chose was South America (SA). South America resonated with me the most because of my love of Latin American music! I initially was going to take an image of the map from off of the internet but decided to design my own map of SA. This was designed in Adobe Illustrator.
I picked a total of 13 songs all from different parts of SA:
Brazil: Dindi – Sylvia Telles
Venezuela: Mi Corazon – Los Melodicos
Colombia: Tobaco y Ron – Rodolfo y su typica ra7
Ecuador: Escribeme – Tierra Canela
Suriname: Moi Misi – Sabokoe
Guyana: Catch me Lova – JMC
French Guiana: Kraze Dj Action X Jaydieff
Peru: Peru de Valses: Y se llama Peru – Oscar Avilles
Chile: 1977 – Ana Tijoux
Argentina: Buenos Aires – Nathy Peluso
Paraguay: Inevitable – Shako El Sh
Uruguay: Cora Aislado – Bebe 21
Bolivia: Amor Segrado – Chila Jatun
USER TESTING:
Interaction Design:
Users simply can move the joystick, which acts as a cursor on the screen and press on the squares in the p5 sketch to trigger a unique sound file from each country.
Aesthetic Design:
I made my box out of cardboard and painted on several separate sheets of paper a similar color scheme to my digital design of the map. I then glued those pieces of paper onto the box!
P5 Code Sketch:
https://editor.p5js.org/dianadonatella/sketches/NDBhUIeWI
P5 Code:
let img; //variable for image
//variables for square buttons.
let Colombia;
let Argentina;
let Peru;
let Paraguay;
let Uruguay;
let Guyana;
let Fguiana;
let Venezuela;
let Brazil;
let Bolivia;
let Ecuador;
let Chile;
let Suriname;
//colors for each country's buttons
let color_state_col;
let color_state_ven;
let color_state_arg;
let color_state_bra;
let color_state_bol;
let color_state_per;
let color_state_guy;
let color_state_par;
let color_state_uru;
let color_state_chi;
let color_state_fgu;
let color_state_sur;
let color_state_ecu;
//PLAYING AND PAUSING states
let isColombiaPlaying = false;
let isVenezuelaPlaying = false;
let isArgentinaPlaying = false;
let isBrazilPlaying = false;
let isBoliviaPlaying = false;
let isPeruPlaying = false;
let isGuyanaPlaying = false;
let isParaguayPlaying = false;
let isUruguayPlaying = false;
let isChilePlaying = false;
let isFguianaPlaying = false;
let isSurinamePlaying = false;
let isEcuadorPlaying = false;
//ORIGINAL BUTTON COLORS
let originalColorCol;
let originalColorVen;
let originalColorArg;
let originalColorBra;
let originalColorBol;
let originalColorPer;
let originalColorGuy;
let originalColorPar;
let originalColorUru;
let originalColorChi;
let originalColorFgu;
let originalColorSur;
let originalColorEcu;
//For joystick
let joystick_X;
let joystick_Y;
let joystick_button;
let circleX;
let circleY;
//Only update when Joystick is pressed, making it equal to the time that the joystick was pressed at
let LastTime = 0;
// Always updated with the latest number of Millis
let CurrentTime = 0;
function success(e) {
console.log("works: ", e);
}
function error(e) {
console.log("oopsie: ", e);
}
function loading(e) {
log("loading", e);
}
function preload() {
img = loadImage("SA_MAP.png");
Colombia = loadSound("./COLOMBIA.mp3", success, error, loading);
Argentina = loadSound("./ARGENTINA.mp3");
Peru = loadSound("./PERU.mp3");
Paraguay = loadSound("./PARAGUAY.mp3");
Uruguay = loadSound("./URUGUAY.mp3");
Guyana = loadSound("./GUYANA.mp3");
Fguiana = loadSound("./FGUIANA.mp3");
Venezuela = loadSound("./VENEZUELA.mp3");
Brazil = loadSound("./BRAZIL.mp3");
Bolivia = loadSound("./BOLIVIA.mp3");
Ecuador = loadSound("./ECUADOR.mp3");
Chile = loadSound("./CHILE.mp3");
Suriname = loadSound("./SURINAME.mp3");
}
function setup() {
createCanvas(1920, 1020);
background(220);
// colors for each button
color_state_col = color(32, 37, 179);
color_state_ven = color(35, 60, 98);
color_state_arg = color(32, 37, 179);
color_state_bra = color(100, 57, 79);
color_state_bol = color(35, 60, 98);
color_state_per = color(32, 37, 179);
color_state_guy = color(35, 60, 98);
color_state_par = color(24, 32, 89);
color_state_uru = color(24, 32, 89);
color_state_chi = color(100, 57, 79);
color_state_fgu = color(24, 32, 89);
color_state_sur = color(32, 37, 179);
color_state_ecu = color(24, 32, 89);
//original state colors after pausing
originalColorCol = color_state_col;
originalColorVen = color_state_ven;
originalColorArg = color_state_arg;
originalColorBra = color_state_bra;
originalColorBol = color_state_bol;
originalColorPer = color_state_per;
originalColorGuy = color_state_guy;
originalColorPar = color_state_par;
originalColorUru = color_state_uru;
originalColorChi = color_state_chi;
originalColorFgu = color_state_fgu;
originalColorSur = color_state_sur;
originalColorEcu = color_state_ecu;
circleX = width / 2;
circleY = height / 2;
}
function draw() {
if (img) {
image(img, 0, 0, width, height);
}
//references colors and sets sizes for each square
//COLOMBIA
fill(color_state_col);
rect(790, 135, 40, 40);
//VENEZUELA
fill(color_state_ven);
rect(910, 80, 35, 35);
//ARGENTINA
fill(color_state_arg);
rect(940, 700, 50, 50);
//BRAZIL
fill(color_state_bra);
rect(1150, 400, 50, 50);
//BOLIVIA
fill(color_state_bol);
rect(935, 435, 40, 40);
//PERU
fill(color_state_per);
rect(800, 360, 40, 40);
//GUYANA
fill(color_state_guy);
rect(1038, 125, 23, 23);
//PARAGUAY
fill(color_state_par);
rect(1012, 490, 30, 30);
//URUGUAY
fill(color_state_uru);
rect(1120, 700, 30, 30);
//CHILE
fill(color_state_chi);
rect(800, 600, 40, 40);
//FGUIANA
fill(color_state_fgu);
rect(1170, 90, 30, 30);
//SURINAME
fill(color_state_sur);
rect(1090, 58, 25, 25);
//ECUADOR
fill(color_state_ecu);
rect(650, 200, 30, 30);
//increments joystick in the X or Y position
if (joystick_X > 800) {
circleX += 5;
}
if (joystick_X < 200) {
circleX -= 5;
}
if (joystick_Y > 800) {
circleY -= 5;
}
if (joystick_Y < 200) {
circleY += 5;
}
//cursor shape and design
fill(0, 0, 0, 100);
circle(circleX, circleY, 30);
stroke(255);
line(circleX, circleY + 30, circleX, circleY - 30);
line(circleX - 30, circleY, circleX + 30, circleY);
JoyStickPressed();
if (!serialActive) {
text("Press Space Bar to select Serial Port", 20, 30);
} else {
text("Connected", 20, 30);
}
console.log(circleX);
}
// to check when joystick is pressed and to play or pause the song playing for a specific country
function JoyStickPressed() {
//Updating current time
CurrentTime = millis();
if (joystick_button == 1 && CurrentTime > LastTime + 2000) {
// Check if the joystick is within the Colombia button
if (
circleX > 790 &&
circleX < 790 + 40 &&
circleY > 135 &&
circleY < 135 + 40
) {
if (!isColombiaPlaying) {
Colombia.play();
} else {
Colombia.pause();
}
isColombiaPlaying = !isColombiaPlaying;
color_state_col = isColombiaPlaying ? color(255) : originalColorCol;
}
if (
circleX > 910 &&
circleX < 910 + 35 &&
circleY > 80 &&
circleY < 80 + 35
) {
if (!isVenezuelaPlaying) {
Venezuela.play();
} else {
Venezuela.pause();
}
isVenezuelaPlaying = !isVenezuelaPlaying;
color_state_ven = isVenezuelaPlaying ? color(255) : originalColorVen;
}
if (
circleX > 940 &&
circleX < 940 + 50 &&
circleY > 700 &&
circleY < 700 + 50
) {
if (!isArgentinaPlaying) {
Argentina.play();
} else {
Argentina.pause();
}
isArgentinaPlaying = !isArgentinaPlaying;
color_state_arg = isArgentinaPlaying ? color(255) : originalColorArg;
}
if (
circleX > 1150 &&
circleX < 1150 + 50 &&
circleY > 400 &&
circleY < 400 + 50
) {
if (!isBrazilPlaying) {
Brazil.play();
} else {
Brazil.pause();
}
isBrazilPlaying = !isBrazilPlaying;
color_state_bra = isBrazilPlaying ? color(255) : originalColorBra;
}
if (
circleX > 935 &&
circleX < 935 + 40 &&
circleY > 435 &&
circleY < 435 + 40
) {
if (!isBoliviaPlaying) {
Bolivia.play();
} else {
Bolivia.pause();
}
isBoliviaPlaying = !isBoliviaPlaying;
color_state_bol = isBoliviaPlaying ? color(255) : originalColorBol;
}
if (
circleX > 800 &&
circleX < 800 + 40 &&
circleY > 360 &&
circleY < 360 + 40
) {
if (!isPeruPlaying) {
Peru.play();
} else {
Peru.pause();
}
isPeruPlaying = !isPeruPlaying;
color_state_per = isPeruPlaying ? color(255) : originalColorPer;
}
if (
circleX > 1038 &&
circleX < 1038 + 23 &&
circleY > 125 &&
circleY < 125 + 23
) {
if (!isGuyanaPlaying) {
Guyana.play();
} else {
Guyana.pause();
}
isGuyanaPlaying = !isGuyanaPlaying;
color_state_guy = isGuyanaPlaying ? color(255) : originalColorGuy;
}
if (
circleX > 1012 &&
circleX < 1012 + 30 &&
circleY > 490 &&
circleY < 490 + 30
) {
if (!isParaguayPlaying) {
Paraguay.play();
} else {
Paraguay.pause();
}
isParaguayPlaying = !isParaguayPlaying;
color_state_par = isParaguayPlaying ? color(255) : originalColorPar;
}
if (
circleX > 1120 &&
circleX < 1120 + 30 &&
circleY > 700 &&
circleY < 700 + 30
) {
if (!isUruguayPlaying) {
Uruguay.play();
} else {
Uruguay.pause();
}
isUruguayPlaying = !isUruguayPlaying;
color_state_uru = isUruguayPlaying ? color(255) : originalColorUru;
}
if (
circleX > 800 &&
circleX < 800 + 40 &&
circleY > 600 &&
circleY < 600 + 40
) {
if (!isChilePlaying) {
Chile.play();
} else {
Chile.pause();
}
isChilePlaying = !isChilePlaying;
color_state_chi = isChilePlaying ? color(255) : originalColorChi;
}
if (
circleX > 1170 &&
circleX < 1170 + 30 &&
circleY > 90 &&
circleY < 90 + 30
) {
if (!isFguianaPlaying) {
Fguiana.play();
} else {
Fguiana.pause();
}
isFguianaPlaying = !isFguianaPlaying;
color_state_fgu = isFguianaPlaying ? color(255) : originalColorFgu;
}
if (
circleX > 1090 &&
circleX < 1090 + 25 &&
circleY > 58 &&
circleY < 58 + 25
) {
if (!isSurinamePlaying) {
Suriname.play();
} else {
Suriname.pause();
}
isSurinamePlaying = !isSurinamePlaying;
color_state_sur = isSurinamePlaying ? color(255) : originalColorSur;
}
if (
circleX > 650 &&
circleX < 650 + 30 &&
circleY > 200 &&
circleY < 200 + 30
) {
if (!isEcuadorPlaying) {
Ecuador.play();
} else {
Ecuador.pause();
}
isEcuadorPlaying = !isEcuadorPlaying;
color_state_ecu = isEcuadorPlaying ? color(255) : originalColorEcu;
}
LastTime = millis();
}
}
function keyPressed() {
if (key == " ") {
// important to have in order to start the serial connection!!
setUpSerial();
}
}
//TO SET UP SERIAL CONNECTION
function readSerial(data) {
////////////////////////////////////
//READ FROM ARDUINO HERE
////////////////////////////////////
if (data != null) {
// make sure there is actually a message
// split the message
let fromArduino = split(trim(data), ",");
// if the right length, then proceed
if (fromArduino.length == 3) {
// only store values here
// do everything with those values in the main draw loop
// We take the string we get from Arduino and explicitly
// convert it to a number by using int()
// e.g. "103" becomes 103
joystick_X = int(fromArduino[0]);
joystick_Y = int(fromArduino[1]);
joystick_button = int(fromArduino[2]);
}
}
}
Arduino Code:
int xValue = 0 ;
int yValue = 0 ;
int bValue = 0 ;
void setup()
{
Serial.begin(9600) ;
pinMode(8,INPUT);
digitalWrite(8,HIGH);
}
void loop()
{
xValue = analogRead(A2);
yValue = analogRead(A1);
bValue = digitalRead(8);
Serial.print(xValue,DEC);
Serial.print(",");
Serial.print(yValue,DEC);
Serial.print(",");
Serial.println(!bValue);
delay(10);
}
Schematic:
CHALLENGES:
I initially had quite a few issues in p5 trying to upload the song files. I realized that it was because I placed all the songs in a folder and P5 couldn’t find the path to that folder. I also had issues with organizing the square buttons on the screen, as well as cuing and pausing the music in combination with the joystick!
Improvements:
I would really like to make my p5 sketch a bit more elaborate and maybe add some sort of extra LED aspect to my arduino to make things a bit more exciting!
VIDEOS FROM THE SHOWCASE:
The showcase was incredibly fun and I really loved seeing everyone’s projects. I am very excited for building more fun projects in the future!!