Category: Uncategorized

Shannon Ha – Project 10 – Sonic Sketch

sketch

//Shannon Ha
//sha2@andrew.cmu.edu
// Section D
//Project 10 Sonic-Sketch

var underlyingImage;

function preload() { // call loadImage() and loadSound() for all media files here
    scissorSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/scissors-2/");
    combingSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/combing2-2/");
    hairdryerSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/hairdrying-2/");
    spraySnd = loadSound(" https://courses.ideate.cmu.edu/15-104/f2019/spray-2/");
    tadaSnd = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/mirror-2/");
    spraySndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/spray2-2/");
    combingSndB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/combing-hair-2/")


    var saloonImg = "https://i.imgur.com/PqazkIh.jpg";
    underlyingImage = loadImage(saloonImg);

}


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

function soundSetup() { // setup for audio generation
    scissorSnd.setVolume(2);
    combingSnd.setVolume(5);
    hairdryerSnd.setVolume(1);
    spraySnd.setVolume(1);
    tadaSnd.setVolume(1);
}

function draw() {
    background(0);
    image(underlyingImage, 0, 0); // stock photo of the saloon

}

function mousePressed() {
    //makes the sound of hair combing play when the mouse is between the set of XY coordinates boundaries of comb images.
    if (mouseX > 80 & mouseX < 160 & mouseY > 255 & mouseY < 360){
        combingSndB.play();
        }
        else{
            combingSndB.pause(); //pauses sound when mouse is clicked outside of the XY coordinate boundaries.
        }
    //makes the sound of spray play when the mouse is between the set of XY coordinate boundaries of spray image.
    if (mouseX > 10 & mouseX < 160 & mouseY > 130 & mouseY < 240){
            spraySndB.play();
        }
        else{
            spraySndB.pause(); //pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }

    //makes the sound of hairdrying play when the mouse is between the set of XY coordinate boundaries of spray image.
    if (mouseX > 70 & mouseX < 190 & mouseY > 30 & mouseY < 130){
            hairdryerSnd.play();
        }
        else{
            hairdryerSnd.pause();//pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }

    //makes the sound of combing play when the mouse is between the set of XY coordinate boundaries of combing image.
    if (mouseX > 210 & mouseX < 320 & mouseY > 20 & mouseY < 110){
            combingSnd.play();
        }
        else{
            combingSnd.pause();//pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }
    //makes the sound of spray play when the mouse is between the set of XY coordinate boundaries of spray image.
    if (mouseX > 330 & mouseX < 460 & mouseY > 20 & mouseY < 150){
            spraySnd.play();
        }
        else{
            spraySnd.pause(); //pauses sound when mouse is clicked outside of the XY coordinate boundaries.
            }
    if (mouseX > 330 & mouseX < 470 & mouseY > 150 & mouseY < 200){
            scissorSnd.play();
        }
        else{
            scissorSnd.pause();
            }
    if (mouseX > 330 & mouseX < 450 & mouseY > 205 & mouseY < 325){
            tadaSnd.play();
            }
        else{
            tadaSnd.pause();
            }

}

This week I decided to use base my project on the sounds that you would hear at the hair salon. I found a copyright-free image that visualizes the steps the one goes through at a hair salon and I think adding the audio was a good way to show the procedure of getting your hair cut. I don’t know why my sketch won’t load on WordPress but it works so my localhost. Attached below is the image that I used for this project.

*1 grace day used for this project.

looking outward – 10 – ilona altman

  • I think it is interesting how musicality seems to be intrinsically tied to emotion. Just as we anthropomorphize visual stimuli, it seems there is a tendency to process notes in a way that reveals the interior subjectivity of that producing the noise. This makes me think about how perhaps music was our first language, and a study I saw that spoke about how the musicality of peoples voices when saying things (in anger, or speaking to babies) is similar across all languages, and that this may be one of the first ways we understand the world’s communication with us… I admire that this work was able to, in such a simple set up, touch on these concepts of musicality, emotion and projecting emption on to technology.
  • I would suppose that the algorithm used to generate this work was made by breaking down a note analysis of a singer who sag this song, and than repeating these notes by a computer, which holds them for the specified amount of time noted by the original recording.
  • The artist’s sensibility for humor definitely showed through this work with the song choice. It is also clear they have a bend toward minimalism, and it is this minimalism which strengthened the conceptual exploration of this work.
Video of the computer performance

http://www.everydaylistening.com/articles/2015/7/20/what-do-machines-sing-of.html

Margot Gersing – Project 10

sketch

//Margot Gersing - Project 10 - mgersing@andrew.cmu.edu - Section E


var oneX = 50; //for mouse press
var oneY = 50;
var act1 = false; //peach shape 'activation'

var twoX = 200; //for mouse press
var twoY = 350;
var act2 = false; //rusty orange shape 'activation'

var threeX = 400; //for mouse press
var threeY = 100;
var act3 = false; //pink shape 'activation'

var fourX = 500; //for mouse press
var fourY = 500;
var act4 = false; //gray shape 'activation'

var nPoints = 100;

var blop;
var plop;
var vpop;
var ting;

function preload(){
    blop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Blop.wav");
    plop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/plop.wav");
    vpop = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/pop.wav");
    ting = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Ting.wav");
}

function setup() {
    createCanvas(600,600);
    frameRate(10);

}

function draw(){
    background(29, 19, 46);
    noStroke();
    one();
    four();
    two();
    three();

    //filler shapes (static)
    fill(192, 80, 49);
    ellipse(50, 600, 400, 150);
    fill(219, 160, 65);
    ellipse(600, 125, 100, 150);
    fill(114, 48, 35);
    ellipse(150, 150, 25, 25);
    ellipse(175, 175, 20, 20);
    ellipse(135, 180, 25, 25);
    ellipse(185, 135, 25, 25);
    ellipse(155, 115, 20, 20);
    ellipse(500, 500, 20, 20);
    ellipse(490, 535, 25, 25);
    ellipse(600, 275, 25, 25);
    ellipse(575, 250, 25, 25);
    ellipse(560, 285, 20, 20);
    ellipse(60, 480, 25, 25);   

}

function one(){
    //peach shape
    var w1 = 200;
    var h1 = 200;

    //click to activate otherwise static
    if(act1){
        w1 = mouseX * .75;
        h1 = mouseY * .75;
    } else{
        w1 = 200;
        h1 = 200;
    }

    fill(117, 182, 129);
    ellipse(50, 50, w1, h1);
}

function two(){
    //epitrochoid
    var x;
    var y; 
    var a = 80.0;
    var b = a / 2.0;
    var h2 = constrain(100 / 8.0, 0, b);
    var ph2 = 100 / 50.0;

    //click to activate otherwise static
    if(act2){
        h2 = constrain(mouseX / 8.0, 0, b);;
        ph2 = mouseX / 50.0;
    } else{
        h2 = constrain(100 / 8.0, 0, b);
        h1 = 100 / 50.0;
    }
    fill(235, 231, 201);
    beginShape(); //drawing shape
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        
        x = (a + b) * cos(t) - h2 * cos(ph2 + t * (a + b) / b);
        y = (a + b) * sin(t) - h2 * sin(ph2 + t * (a + b) / b);
        vertex(x + 200, y + 350);
    }
    endShape(CLOSE);
}

function three(){
    //cranioid
    var x;
    var y;
    var r;
    var a = 40.0;
    var b = 10.0;
    var c = 100.0;
    var p = constrain((width/2), 0.0, 1.0);
    var q = constrain((height/2), 0.0, 1.0);

    //click to activate otherwise static
    if(act3){
        var p = constrain((mouseX / width), 0.0, 1.0);
        var q = constrain((mouseY / height), 0.0, 1.0);
    } else{
        var p = constrain((width/2), 0.0, 1.0);
        var q = constrain((height/2), 0.0, 1.0);
    } 
    fill(235, 231, 201);
    beginShape(); //drawing shape 
    for (var i = 0; i < nPoints; i++) {
        var t = map(i, 0, nPoints, 0, TWO_PI);
        r =
            a * sin(t) +
            b * sqrt(1.0 - p * sq(cos(t))) +
            c * sqrt(1.0 - q * sq(cos(t)));
        
        x = r * cos(t);
        y = r * sin(t);
        vertex(x + 400, y + 100);
    }
    endShape(CLOSE);
}

function four(){
    //gray shape
    var w4 = 200;
    var h4 = 300;

    //click to activate otherwise static
    if(act4){
        w4 = mouseX;
        h4 = mouseY;
    } else{
        w4 = 200;
        h4 = 300;
    }

    fill(41, 89, 50);
    ellipse(475, 475, w4, h4);
}


function mousePressed(){

    //if clicked within in defined distance then activation state is... 
       //changed from true to false so the mouseX and mouseY will now take over
    var d = dist(oneX, oneY, mouseX, mouseY);
    if(d < 200){
        act1 = !act1;
        blop.play(0, 1, 2);
    }

    var d2 = dist(twoX, twoY, mouseX, mouseY);
    if(d2 < 100){
        act2 = !act2;
        vpop.play(0, 1, 2);
    }

    var d3 = dist(threeX, threeY, mouseX, mouseY);
    if(d3 < 100){
        act3 = !act3;
        plop.play(0, 1, 2);
    }

    var d4 = dist(fourX, fourY, mouseX, mouseY);
    if(d4 < 100){
        act4 = !act4;
        ting.play(0, 1, 2);
    }

}

For this project I decided to add sound to my previous project from week seven. The way I set up that project worked really well with how I was already planning on utilizing sound. I think this turned out pretty cute, the original project was meant to be playful and I think the sounds just added to it. Lastly, I changed up the colors just for fun.

Sarah Kang – Looking Outwards – 10

A new algorithm produces the “portamento” effect, from news.mit.edu

Trevor Henderson is an MIT student in computer science who has invented a new algorithm that produces a “portamento” effect – the effect of gliding a note at one pitch into a note of a lower or higher pitch – between any two audio clips. His new algorithm is based on a geometry-based framework that facilitates the most productive paths to move data points between more than one origin and destination configurations. Henderson applies this optimal transport to interpolating audio signals, which blends the signals or sounds into each other.

This project really intrigued me because I had never really focused on the transformations of sounds and it was amazing how the two different sound categories morphed into each other. I feel like this would open up a lot of opportunities for computational music in the future.

Monica Chang – Looking Outwards – 11

Rosa Menkman

Her website: http://rosa-menkman.blogspot.com/

About page on Menkman’s website
Intro page, Rosa Menkman

Rosa Menkman is a Dutch curator, visual artist and researcher who specializes in digital media and analogue – specifically noise artifacts: glitches, encoding and feedback artifacts. With her artwork, she emphasizes the idea that the process of imposing efficiency, order and functionality does not involve the creation of procedures and solutions, but utilizes ambiguous compromises and the forever unseen and forgotten.

‘Xilitla’ by Rosa Menkman

Menkman is considered to be one of the most iconic video glitch artists as she often utilizes software glitches to develop her stunning pieces. One of her algorithmic pieces, ‘Xilitla’, is a hallucinatory, futuristic 3D architectural environment formed by polygons and other unconventional objects. Using game-like functions, the viewer is allowed to navigate through this graphic landscape using the head-piece in the center. Menkman also considers this particular piece to be one that would best describe her body of other works.

Sarah Kang – Project 10 – sonic sketch

sonic

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-10-sonic-sketch

function preload() {

    mySnd1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/drum.wav")
    mySnd1.setVolume(0.5);
    mySnd2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sweep.wav")
    mySnd2.setVolume(0.5);
    mySnd3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sound1.wav")
    mySnd3.setVolume(0.5);
    mySnd4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sound2.wav")
    mySnd4.setVolume(0.5);
    mySnd5 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sound3.wav")
    mySnd5.setVolume(1);
    mySnd6 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sound4.wav")
    mySnd6.setVolume(0.5);
    mySnd7 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sound5.wav")
    mySnd7.setVolume(0.5);
    mySnd8 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sound6.wav")
    mySnd8.setVolume(0.5);
    mySnd9 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sound7.wav")
    mySnd9.setVolume(0.5);
}


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

    useSound();
}


function soundSetup() { // setup for audio generation
}


function draw() {
    background(200, 220, 250);

    //white square rims
    for (var y = 10; y < height + 20; y += 130) {
        for (var x = 10; x < width + 20; x += 130) {
            fill(255);
            noStroke();
            rect(x, y, 120, 120);
        }
    }

    fill(255, 237, 219);
    rect(20, 20, 100, 100); //top left square

    fill(255, 251, 181);
    rect(150, 20, 100, 100); //top middle square

    fill(213, 238, 242);
    rect(280, 20, 100, 100); //top right square

    fill(230, 252, 241);
    rect(20, 150, 100, 100); //middle left square

    fill(243, 230, 252);
    rect(150, 150, 100, 100); //center square

    fill(252, 230, 234);
    rect(280, 150, 100, 100); //middle right square

    fill(232, 237, 255);
    rect(20, 280, 100, 100); //bottom left square

    fill(222, 248, 252);
    rect(150, 280, 100, 100); //bottom middle square

    fill(241, 252, 230);
    rect(280, 280, 100, 100); //bottom right square
}

function mousePressed() {

    if(mouseX > 20 & mouseX < 120 && mouseY > 20 && mouseY < 120){
       mySnd1.play(); //top left square sound
   }
    if(mouseX > 150 & mouseX < 250 && mouseY > 20 && mouseY < 120){
       mySnd2.play(); //top middle square sound
   }
    if(mouseX > 280 & mouseX < 380 && mouseY > 20 && mouseY < 120){
       mySnd3.play(); //top right square sound
   }
    if(mouseX > 20 & mouseX < 120 && mouseY > 150 && mouseY < 250){
       mySnd4.play(); //middle left square sound
   }
    if(mouseX > 150 & mouseX < 250 && mouseY > 150 && mouseY < 250){
       mySnd5.play(); //center square sound
   }
    if(mouseX > 280 & mouseX < 380 && mouseY > 150 && mouseY < 250){
       mySnd6.play(); //middle right square sound
   }
    if(mouseX > 20 & mouseX < 120 && mouseY > 280 && mouseY < 380){
       mySnd7.play(); //bottom left square sound
   }
    if(mouseX > 150 & mouseX < 250 && mouseY > 280 && mouseY < 380){
       mySnd8.play(); //bottom middle square sound
   }
    if(mouseX > 280 & mouseX < 380 && mouseY > 280 && mouseY < 380){
       mySnd9.play(); //bottom left square sound
   }
}

I was inspired by the launchpad that Beca uses in the movie Pitch Perfect and wanted to use this format to experiment with the combination of different sounds.

Shariq M. Shah – Project 10


shariqs-project10

// Project - 10
// Name: Shariq M. Shah
// Andrew ID: shariqs
// Section: C


var travis;
var heavenly;
var kick;
var explosion;

//loading different sounds
function preLoad() {
    travis = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/travisscott.wav");
    travis.setVolume(0.2);

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

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

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


function setup() {
   createCanvas(400,300);
   useSound();
}

function soundSetup() {
    osc = new p5.TriOsc();
    osc.freq(100.0);
    osc.amp(0.1);
    osc.start();
}

function draw() {

  background(0);

  for (var i = 0; i < 100; i += 1) {
      //defining a rotating series of lines that converge in patterns
      //using frameCount to have rotations and colors change over time
      strokeWeight(0.4);
      translate(width / 2, height / 2 + 100);
      rotate(radians(180 + 0.1 * frameCount));
      //various configurations and colors of lines that change according to stepping i variable
      //mouseY used to alter color and configurations depending on mouse location
      stroke(mouseY, 0, 250);
      line(i + i * width/10,  -height * 0.1 * mouseY, width/2, height);

      stroke(mouseY, 0, 250);
      line(i + i * -width/10,  -height * 0.1 * mouseY, width/2, height);
    }
      //amplitude and frequency change based on loaction of mouse x and y
      var freq = map(mouseX, 0, width, 40, 100);
      osc.freq(freq);

      var amp = map(mouseY, 0, height, 0.2, 0.05);
      osc.amp(amp);
}

//depending on where user presses mouse, a different brooding sound is played according to the relative amplitude and frequency at the location
function mousePressed() {

    if(mouseX > 10 & mouseY < height / 2) {
      travis.play(0, 1, 2);
    }

    if(mouseX > width/2 & mouseY < 200) {
      heavenly.play(0, 1, 2);
    }

    if(mouseY > 50 & mouseY < 100) {
      kick.play(0, 1, 2);
    }

    if(mouseX > 300 & mouseY > 200) {
       explosion.play(0, 1, 2);
    }


}

In this project, I experimented with a variety of sounds and used a differing mouseX and mouseY location to change the auditory experience when the mouse is clicked.  I did this using if statements that change the sound that is played based on where the mouse is clicked. This became more interesting once the form of the rotating lines responded to the fluctuating soundscape, both in color and in geometry. Overall, this was a great project with which I could experiment with creating different soundscapes in a program. 

Shariq M. Shah – Looking Outwards 10 – Sound Art

The Cycling wheel project, by Hong Kong based practice Keith Lam, Seth Hon and Alex Lai, takes the concept of Marcel Duchamp’s famed bicycle wheel, in his readymade explorations, and transforms it into a generative light and sound instrument. In order to turn it into this interactive performance art piece, it uses Processing to create a specially made control panel configuration that functions on three levels: controlling music, movement, and LED lights. The processes take the movement of the bicycle wheel and uses it to generate a variety of sounds that are augmented by the control panel computation. The result is a magical interplay of light, music, art, and computation that makes for quite a spectacular interactive art piece. It makes me think of ways that other physical movements can be translated into dynamic soundscapes, a concept similar to what I tried to do for this week’s project. It is also interesting to consider how a variety of different sounds can be layered to produce an immersive soundscape experience, as this orchestral performance demonstrates. 

 

https://www.creativeapplications.net/processing/cycling-wheel-the-orchestra-reimagining-marcels-bicycle-wheel-as-a-lightsound-instrument/

Fanjie Mike Jin – Project 10 – Sonic Sketch

sketch1

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project 10

//set the count for the four melodies
var voiceplaying = 1;
var pianoPlaying = 1;
var jazzPlaying = 1;
var electronicPlaying = 1;

function preload() {
//preloads the images
    var imageUrl = "https://i.imgur.com/DcInSlj.jpg";
    pic = loadImage(imageUrl);
//preloads the different types of sound
    jazz = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jazz.wav");
    voice = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/voice.wav");
    piano = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/piano.wav");
    electronic = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/electronic.wav");
//set the volume of the music track
    jazz.setVolume(1);
    voice.setVolume(1);
    piano.setVolume(1);
    electronic.setVolume(1);
}

function setup() {
//set up the background image for the music choosing
    createCanvas(400, 400);
    background(0);
    image(pic, 0, 0);
}

function mousePressed(){
// when mouse is pressed at the designated area, the voice melody would be played
    if (mouseX > width / 2 & mouseY > height / 2 && mouseX < width && mouseY < height){
//the music will be turned off once it has been clicked the second time 
        voiceplaying = voiceplaying + 1;
        if (voiceplaying % 2 == 0){
            voice.play();
        } else {
            voice.pause();
        }
    }
    
// when mouse is pressed at the designated area, the electronic melody would be played  
    if (mouseX < width / 2 & mouseY > height / 2 && mouseY < height){
        electronicPlaying = electronicPlaying + 1;
//the music will be turned off once it has been clicked the second time 
        if (electronicPlaying % 2 == 0){
            electronic.play();
        } else {
            electronic.pause();
        }
    }

// when mouse is pressed at the designated area, the piano melody would be played
    if (mouseX > width / 2 & mouseY < height / 2 && mouseX < width){
        pianoPlaying = pianoPlaying + 1;
//the music will be turned off once it has been clicked the second time       
        if (pianoPlaying % 2 == 0){
            piano.play();
        } else {
            piano.pause();
        }
    }

// when mouse is pressed at the designated area, the jazz melody would be played
    if (mouseX < width / 2 & mouseY < height / 2){
        jazzPlaying = jazzPlaying + 1;
//the music will be turned off once it has been clicked the second time 
        if (jazzPlaying % 2 == 0){
            jazz.play();
        } else {
            jazz.pause();
        }
    }
}

In this project, I aim to create an interactive program that plays four different types of music genre. By clicking on the icon, you are able to choose to turn on and off each type of music. The most interesting condition is when you turn on two or three type of music together, when they are playing simultaneously, it creates a surreal and yet fun melody.

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.