//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-10-Sonic Sketch
var buttonA;
var buttonB;
var buttonC;
var buttonD;
function preload() {
buttonA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/snaredrum-1.wav");
buttonA.setVolume(1);
buttonB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/drumstick-1.wav");
buttonB.setVolume(1);
buttonC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hitdrum.wav");
buttonC.setVolume(1);
buttonD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lowdrum.wav");
buttonD.setVolume(1); //loading sound
}
function setup() {
createCanvas (600, 600);
useSound();
}
function draw() {
background(232, 192, 244);
noStroke();
fill(90);
rect(85, 115, 400, 400);
fill("black");
rect(100, 100, 400, 400); //base of the beat maker
fill(100);
circle (158, 150, 50, 50);
fill(100);
circle (248, 150, 50, 50);
fill(100);
circle (338, 150, 50, 50);
fill(100);
circle (428, 150, 50, 50); //upper circular button of beat maker
fill("white");
rect(120, 200, 80, 80);
fill("yellow");
rect(120, 290, 80, 80);
fill("yellow");
rect(120, 380, 80, 80);
fill("red");
rect(210, 200, 80, 80);
fill("white");
rect(210, 290, 80, 80);
fill("white");
rect(210, 380, 80, 80);
fill("blue");
rect(300, 200, 80, 80);
fill("blue");
rect(300, 290, 80, 80);
fill("blue");
rect(300, 380, 80, 80);
fill(33, 232, 6);
rect(390, 200, 80, 80);
fill(33, 232, 6);
rect(390, 290, 80, 80);
fill("white");
rect(390, 380, 80, 80); //square buttons of the beat maker
}
function mousePressed(){
if(mouseX < 250 & mouseY < 250){
buttonA.play();
}
if(mouseX < 250 & mouseY > 250){
buttonC.play();
}
if(mouseX > 250 & mouseY < 250){
buttonB.play();
}
if(mouseX > 250 & mouseY > 250){
buttonD.play(); //creating sound when click on button
}
}
I wanted to create a beat making machine because I enjoy listening to music with interesting beat. I made the beat making machine create drum sounds when clicked.