//Xiaoyu Kang
//xkang@andrew.cmu.edu
//Section B
//Project-10
var rainThunder;
var waterSound;
var catMeow;
var catGroom;
function preload() {
rainThunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rain.wav");
waterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/water-1.wav");
catMeow = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/catmeow.wav");
catGroom = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/catgroom.wav")
}
function setup() {
createCanvas(400, 300);
useSound();
}
function soundSetup(){
rainThunder.setVolume(1);
waterSound.setVolume(1);
catMeow.setVolume(2);
catGroom.setVolume(2);
}
function draw() {
background(200);
noStroke();
//wall
fill(250, 230, 230);
rect(0, 0, 400, 200);
//floor
fill(173, 144, 115);
rect(0, 200, 400, 100);
//window
fill(255);
rect(100, 20, 200, 150);
fill(26, 64, 111);
rect(110, 30, 180, 130);
//cloud
fill(150);
ellipse(165, 80, 30, 30);
ellipse(190, 60, 50, 50);
ellipse(230, 70, 40, 40);
ellipse(205, 85, 30, 30);
//rain
fill("blue");
ellipse(170, 130, 10, 10);
ellipse(220, 140, 10, 10);
ellipse(240, 100, 10, 10);
ellipse(190, 120, 10, 10);
//cat
fill(255);
ellipse(350, 220, 30, 30);
ellipse(360, 260, 50, 60);
ellipse(350, 282, 50, 10);
ellipse(380, 280, 70, 5);
ellipse(335, 222, 8, 8);
triangle(353, 195, 348, 210, 362, 212);
triangle(343, 195, 340, 210, 354, 210);
fill(50);
ellipse(345, 215, 5, 5);
//cup
fill(200);
rect(150, 240, 20, 35);
ellipse(160, 275, 20, 10);
fill(150, 170, 255);
ellipse(160, 240, 20, 10);
}
function mousePressed(){
//sound of rain when touch the cloud
if (mouseX >= 110 & mouseX <= 290 && mouseY >= 30 && mouseY <= 160){
rainThunder.play();
}
//sound of water when touch the cup
if (mouseX >= 150 & mouseX <= 170 && mouseY >= 240 && mouseY <= 275){
waterSound.play();
}
//sound of cat meowing when touch the head of the cat
if (mouseX >= 320 & mouseX <= 380 && mouseY >= 190 && mouseY <= 250){
catMeow.play();
}
//sound of cat grooming when touch the body of the cat
if (mouseX >= 335 & mouseX <= 385 && mouseY >= 230 && mouseY <= 290){
catGroom.play();
}
}
For this image, I created an image of a cat inside a house on a rainy day. I think it would be interesting if different sounds can be activated when the user clicks on different objects. If the user clicked on the cloud, the sound of a thunder storm would start and goes on for two minutes. If clicks on the cup a sound of water would be activated. And clicking the head or the body of the cat would activate two different sounds.