// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project 10
//set the count for the four melodies
var voiceplaying = 1;
var pianoPlaying = 1;
var jazzPlaying = 1;
var electronicPlaying = 1;
function preload() {
//preloads the images
var imageUrl = "https://i.imgur.com/DcInSlj.jpg";
pic = loadImage(imageUrl);
//preloads the different types of sound
jazz = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jazz.wav");
voice = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/voice.wav");
piano = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/piano.wav");
electronic = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/electronic.wav");
//set the volume of the music track
jazz.setVolume(1);
voice.setVolume(1);
piano.setVolume(1);
electronic.setVolume(1);
}
function setup() {
//set up the background image for the music choosing
createCanvas(400, 400);
background(0);
image(pic, 0, 0);
}
function mousePressed(){
// when mouse is pressed at the designated area, the voice melody would be played
if (mouseX > width / 2 & mouseY > height / 2 && mouseX < width && mouseY < height){
//the music will be turned off once it has been clicked the second time
voiceplaying = voiceplaying + 1;
if (voiceplaying % 2 == 0){
voice.play();
} else {
voice.pause();
}
}
// when mouse is pressed at the designated area, the electronic melody would be played
if (mouseX < width / 2 & mouseY > height / 2 && mouseY < height){
electronicPlaying = electronicPlaying + 1;
//the music will be turned off once it has been clicked the second time
if (electronicPlaying % 2 == 0){
electronic.play();
} else {
electronic.pause();
}
}
// when mouse is pressed at the designated area, the piano melody would be played
if (mouseX > width / 2 & mouseY < height / 2 && mouseX < width){
pianoPlaying = pianoPlaying + 1;
//the music will be turned off once it has been clicked the second time
if (pianoPlaying % 2 == 0){
piano.play();
} else {
piano.pause();
}
}
// when mouse is pressed at the designated area, the jazz melody would be played
if (mouseX < width / 2 & mouseY < height / 2){
jazzPlaying = jazzPlaying + 1;
//the music will be turned off once it has been clicked the second time
if (jazzPlaying % 2 == 0){
jazz.play();
} else {
jazz.pause();
}
}
}
In this project, I aim to create an interactive program that plays four different types of music genre. By clicking on the icon, you are able to choose to turn on and off each type of music. The most interesting condition is when you turn on two or three type of music together, when they are playing simultaneously, it creates a surreal and yet fun melody.