Sean Meng-Project 10-Interactive Sonic Sketch

hmeng-project-10

//Sean Meng
//hmeng@andrew.cmu.edu
//Section C
//Project-10-Interactive Sonic Sketches

var mySoundA;
var mySoundB;

function preload() {
    mySoundA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundA.wav");
    mySoundA.setVolume(2);

    mySoundB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundB.wav");
    mySoundB.setVolume(2);

    mySoundC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundC.wav");
    mySoundC.setVolume(2);

    mySoundD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mySoundD.wav");
}

function setup() {
    createCanvas(500, 500);

}
function draw() {
    var bSize = 16;

    background(255, 201, 54);

//draw the play station
    noStroke();
    fill(255);
//the body of the play station    
    rect(150, 100, 180, 270);
    
    rect(150, 90, 180, 10);
    rect(150, 370, 180, 10);
    rect(140, 100, 10, 270);
    rect(330, 100, 10, 270);
    
    ellipse(150, 100, 20, 20);
    ellipse(330, 100, 20, 20);
    ellipse(150, 370, 20, 20);
    ellipse(330, 370, 20, 20);

//the screen 
    fill(150);
    rect(160, 110, 160, 110);
    ellipse(160, 110, 16, 16);
    ellipse(320, 110, 16, 16);
    ellipse(160, 220, 16, 16);
    ellipse(320, 220, 16, 16);

    rect(160, 102, 160, 8);
    rect(160, 220, 160, 8);
    rect(152, 110, 8, 110);
    rect(320, 110, 8, 110);

    fill(30)
    rect(160, 110, 160, 110)

//Left button
    fill(0);
    rect(160, 280, 50, 10);
    rect(180, 260, 10, 50);

//Right button A
    fill(255, 0, 0);
    ellipse(290, 270, bSize);
//Right button B
    ellipse(290, 300, bSize);  
//Right button C
    ellipse(275, 285, bSize);
//Right button D
    ellipse(305, 285, bSize);    
}

function mousePressed() {
//fill the screen blue when button is clicked
    fill(138, 218, 255);
    rect(160, 110, 160, 110);

//play soundA when buttonA is clicked
    if(mouseX > 282 & mouseX < 298 && mouseY > 262 && mouseY < 278){
        mySoundA.play();
    }
//play soundB when buttonB is clicked    
    if(mouseX > 282 & mouseX < 298 && mouseY > 292 && mouseY < 308){
        mySoundB.play();
    }
//play soundC when buttonC is clicked
    if(mouseX > 267 & mouseX < 283 && mouseY > 277 && mouseY < 293){
        mySoundC.play();
    }
//play soundD when buttonD is clicked
    if(mouseX > 297 & mouseX < 313 && mouseY > 277 && mouseY < 293){
        mySoundD.play();
    }    
}

In this project, I explored the sound upload in p5js and mimicked the Nintendo Family Computer with corresponded game sound effects.