Cathy Dong-Project-10-Interactive Sonic Sketch

sketch

/*  Cathy Dong
    yinhuid
    section D
    project-10-Interactive Sonic Sketch 
*/

var myOsc; //piano sound
var mySnd; //wave sound
var keyNum1 = 7; //lower key num
var keyNum2 = 5; //upper key num
var keyY = 0; //key y start from 0
var size = 20; //ball size


function preload() {
    // load wave sound
    mySnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sea.wav");
    mySnd.setVolumn(0.1);
}


function setup() {
    createCanvas(480, 360);
    //call to use sound
    useSound();
}

// piano sound
function soundSetup() { // setup for audio generation
    myOsc = new p5.Oscillator();
    // piano sound setting
    myOsc.amp(5);
    myOsc.freq(0);
    myOsc.start();
}


function draw() {
    background(0);
    //draw piano
    pianoDraw();
    //draw yellow dot
    pressDraw();
    // play piano when pressed on
    if (mouseIsPressed) {
        mySnd.play();
        // upper keys
        if (mouseY < height / 3 * 2) {
            var keyWidth = width / keyNum1 / 2;
            var keyGap = width / keyNum1 / 4 * 3;
            // upper 1
            if (mouseX > keyGap & mouseX < keyGap + keyWidth) {
                myOsc.freq(277.18);
            }
            //upper 2
            else if (mouseX > keyGap * 2 + keyWidth / 2 & mouseX < keyGap * 2 + keyWidth * 1.5) {
                myOsc.freq(311.13);
            }
            //upper 3
            else if (mouseX > keyGap * 3 + keyWidth * 3 & mouseX < keyGap * 3 + keyWidth * 4) {
                myOsc.freq(369.99);
            }
            //upper 4
            else if (mouseX > keyGap * 4 + keyWidth * 3.5 & mouseX < keyGap * 4 + keyWidth * 4.5) {
                myOsc.freq(415.3);
            }
            //upper 5
            else if (mouseX > keyGap * 4 + keyWidth * 5.5 & mouseX < keyGap * 4 + keyWidth * 6.5) {
                myOsc.freq(466.16);
            }
        }
        // lower keys
        else if (mouseY > height / 3 * 2) {
            var keyWidth = width / keyNum1;
            // lower 1
            if (mouseX > 0 & mouseX < keyWidth) {
                myOsc.freq(261.63);
            }
            // lower 2
            else if (mouseX > keyWidth & mouseX < keyWidth * 2) {
                myOsc.freq(293.66);
            }
            //lower 3
            else if (mouseX > keyWidth * 2 & mouseX < keyWidth * 3) {
                myOsc.freq(329.63);
            }
            //lower 4
            else if (mouseX > keyWidth * 3 & mouseX < keyWidth * 4) {
                myOsc.freq(349.23);
            }
            //lower 5
            else if (mouseX > keyWidth * 4 & mouseX < keyWidth * 5) {
                myOsc.freq(392.00);
            }
            //lower 6
            else if (mouseX > keyWidth * 5 & mouseX < keyWidth * 6) {
                myOsc.freq(440.00);
            }
            //lower 7
            else if (mouseX > keyWidth * 6 & mouseX < width) {
                myOsc.freq(493.88);
            }
        }
    }

}

//draw mouse location as a yellow dot
function pressDraw() {
    noStroke();
    fill('yellow');
    ellipse(mouseX, mouseY, size, size);
}

//draw piano keyboards
function pianoDraw(){
    //lower keys
    stroke(0);
    strokeWeight(1);
    fill(255);
    for (var i = 0; i < keyNum1; i++) {
        var keyWidth = width / keyNum1;
        var keyX = i * keyWidth;
        var keyHeight = height;
        rect(keyX, keyY, keyWidth, keyHeight);
    }

    //upper keys
    fill(0);
    for (var j = 0; j < keyNum2; j++) {
        var keyWidth = width / keyNum1 / 2;
        var keyGap = width / keyNum1 / 4 * 3;
        var keyX = keyGap * (j + 1) + keyWidth * j / 2;
        var keyHeight = height / 3 * 2;
        //left two
        if (j < 2) {
            rect(keyX, keyY, keyWidth, keyHeight);
        }
        //right three
        else {
            var newX = keyX + keyWidth * 2;
            rect(newX, keyY, keyWidth, keyHeight);
        }
        
    }
}

This project creates keyboard with different pitches as a piano. A beach setting sound with waves and laughter is added as background.