YouieCho-Project-10-Sonic-Sketch

sketch

/* Youie Cho
   Section E
   minyounc@andrew.cmu.edu
   Project-10-Sonic-Sketch*/

var mySndC;
var mySndCs;
var mySndD;
var mySndDs;
var mySndE;
var mySndF;
var mySndFs;
var mySndG;

function preload() {
    // Load sound files for each key
    mySndC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/c-6.wav");
    mySndCs = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cs.wav");
    mySndD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/d-4.wav");
    mySndDs = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/ds.wav");
    mySndE = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/e-2.wav");
    mySndF = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/f-6.wav");
    mySndFs = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fs.wav");
    mySndG = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/g-4.wav");
    // Set volume to 1
    mySndC.setVolume(1);
    mySndCs.setVolume(1);
    mySndD.setVolume(1);
    mySndDs.setVolume(1);
    mySndE.setVolume(1);
    mySndF.setVolume(1);
    mySndFs.setVolume(1);
    mySndG.setVolume(1);
}

function setup() {
    createCanvas(600, 600);
}

function draw() {
    background("pink");
    strokeWeight(2);
    // Draw white keys
    fill(255);
    for (i = 0; i < 5; i++) {
        rect(120 + i*70, 150, 70, 250);
    }
    // Draw black keys
    fill(0);
    rect(170, 150, 40, 150);
    rect(240, 150, 40, 150);
    rect(380, 150, 40, 150);
}

function mousePressed() {
    // Within the height range of white keys
    if (150 < mouseY & mouseY < 400) {
        // C sharp and C
        if (170 < mouseX & mouseX < 210 & 150 < mouseY & mouseY < 300) {
            mySndCs.play();
        } else if (120 < mouseX & mouseX < 190) {
            mySndC.play();
        }
        // D sharp and D
        if (240 < mouseX & mouseX < 280 & 150 < mouseY & mouseY < 300) {
            mySndDs.play();
        } else if (210 < mouseX & mouseX < 260) {
            mySndD.play();
        }
        // E
        if (280 < mouseX & mouseX < 330) {
            mySndE.play();
        }
        // F sharp and F
        if (380 < mouseX & mouseX < 420 & 150 < mouseY & mouseY < 300) {
            mySndFs.play();
        }else if (330 < mouseX & mouseX < 400) {
            mySndF.play();
        }
        // G
        if (420 < mouseX & mouseX < 470) {
            mySndG.play();
        }
    }
}