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