Jamie Park – Project 10

sketch

//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.