Xiaoyu Kang – Project 10 – Sonic Sketch

sketch

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