//Jamie Park (jiminp)
//Project 10
//Section E
//global variables of the picture and sound files
var instrumentPic;
var bellSound;
var pianoSound;
var drumSound;
var guitarSound;
//feature that determines whether the file gets played or paused
var pianoPlaying = 1;
var drumPlaying = 1;
var guitarPlaying = 1;
function preload() {
//preloads the image
var instrumentURL = "https://i.imgur.com/dX3rHBT.jpg";
instrumentPic = loadImage(instrumentURL);
//preloads the sound files
bellSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/Bell.wav");
pianoSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/Piano.wav");
drumSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/Drum.wav");
guitarSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/guitar.mp3");
}
function setup() {
//setup the canvas and prepare for the sound system
createCanvas(450, 450);
background(0);
useSound();
}
function soundSetup() {
//set the sound volume
bellSound.setVolume(0.3);
pianoSound.setVolume(0.3);
drumSound.setVolume(0.3);
guitarSound.setVolume(0.3);
}
function draw() {
// draw the image
image(instrumentPic, 0, 0);
}
function mousePressed(){
//the sound files are triggered when mouse is pressed
if (mouseX > width / 2 & mouseY > height / 2
&& mouseX < width && mouseY < height){
//if a specific part of a canvas is clicked, add 1 to variable drumPlaying
drumPlaying = drumPlaying + 1;
if (drumPlaying % 2 == 0){
//if drumPlaying is divisible by 2, play the sound file
//if it is not divisible by 2, pause the sound file
drumSound.play();
} else {
drumSound.pause();
}
}
if (mouseX > width / 2 & mouseY < height / 2 && mouseX < width){
pianoPlaying = pianoPlaying + 1;
if (pianoPlaying % 2 == 0){
pianoSound.play();
} else {
pianoSound.pause();
}
}
if (mouseX < width / 2 & mouseY > height / 2 && mouseY < height){
/*+1 play/pause does not apply to the bell,
because the sound is relatively short and does not create a melody*/
bellSound.play();
}
if (mouseX < width / 2 & mouseY < height / 2){
guitarPlaying = guitarPlaying + 1;
if (guitarPlaying % 2 === 0){
guitarSound.play();
} else {
guitarSound.pause();
}
}
}
I created a sonic sketch by making an interactive file that makes sounds when clicked on corresponding icons. When you click on the guitar icon, the file will create guitar noise, and the same idea applies to the piano, drum, and the bell. The file can execute various types of sounds at the same time. I am happy that I figured out a logical way to make the sound stop when the mouse has clicked the corresponding icon again.