Jai Sawkar – Project 10: Sonic Sketch

Sketch

// Jai Sawkar
// Section C
// jsawkar@andrew.cmu.edu
// Project 10 - Sonic Sketch 

function preload() {
    var facesURL = "https://i.imgur.com/3aPIhhm.jpg?" //picture of 4 people
    famPic = loadImage(facesURL); //sets fam pic as the variable


    hi1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi1.wav");
    hi2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi2.wav");
    hi3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi3.wav");
    hi4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi4.wav");

}


function setup() {
    createCanvas(580, 366);
    useSound();
}

function soundSetup() {
    //sets the volume so they do not play so loud it frightens people
    hi1.setVolume(.5); 
    hi2.setVolume(.5);
    hi3.setVolume(.5);
    hi4.setVolume(.5);

}

function draw() {
    //simply places the picture to fill the canvas
    background(200);
    image(famPic, 0, 0) 
}

function mousePressed() {
    // allows that if the mouse presses on person, it plays & pauses the associated song

    if (mouseX > 0 & mouseX < 134){
        hi1.play();
    } else {
        hi1.pause();
    }

    if (mouseX > 134 & mouseX < 314){
        hi2.play();
    } else {
        hi2.pause();
    }

    if (mouseX > 314 & mouseX < 454){
        hi3.play();
    } else {
        hi3.pause();
    }

    if (mouseX > 454 & mouseX < width){
        hi4.play();
    } else {
        hi4.pause();
    }

}

This week, I used sound to make a simple, yet interactive sketch of different people saying hi! I will say it took some time to play with how I to actually put sound in my sketch. After I did that, it took some time to then figure out how to reduce the volume of the sound files. Once all that was done, it was a matter of using previous skills to incorporate mouse-use into the sketch.

Ammar Hassonjee – Project 10 – Sonic Sketch

Sonic Sketch

// USE BROWSER OTHER THAN CHROME TO PLAY
// I didn't have to set up a terminal to run my code but you might
//    need to set up one in order to run the index
// My audio files for the cackle and bat dance were longer, but I had to trim
//    them down in order to make my folder size smaller.

/* Ammar Hassonjee
    ahassonj@andrew.cmu.edu
    15104 Section C:
    Project 10 - Sonic sketch
    */

// Global variables declared for the pong game
var ballx = 0;
var bally = 250;
var dir1 = 1;
var dir2 = 1;
var speedx = 5;
var speedy = 3;
// variables for changing the background
var bluetone = 0;
var increment = 1;
var framecount = 0;


function preload() {
    // call loadImage() and loadSound() for all media files here
    // witch cackle sound loaded for ending the game
    cackle = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cackleTrimmed.wav");
    cackle.setVolume(0.5);

    // first type of bounce noise loaded
    bounce = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bounce.wav");
    bounce.setVolume(0.5);

    // background game music loaded
    backMusic = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bat-danceTrimmed.wav");
    backMusic.setVolume(0.5);

    // second type of bounce noise loaded
    bounce2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/shootingStar.wav");
    bounce2.setVolume(0.5);
}


function setup() {
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
    // beginning to play the background music
    backMusic.play()
}


function soundSetup() { // setup for audio generation
    // I've included an empty soundSetup function because
    // the code doesn't run without it for some reason
}


function draw() {
    // changing the game background to a gradient
    bluetone += increment;
    if (bluetone === 255) {
        increment = -1;
    }
    if (bluetone === 0) {
        increment = 1;
    }
    background(0, 0, bluetone);
    ellipse(ballx, bally, 60, 60);
    ballx += dir1 * speedx;
    bally += dir2 * speedy;

    // Making ball bounce off the right
    if (ballx >= (width - 30)) {
      dir1 = -dir1;
      // Playing the first bounce noise once the ball hits the wall
      bounce.play();
    }

   // Making the ball bounce off the top and bottom
   if (bally >= (height - 30) || bally < 30) {
      dir2 = -dir2;
        // Playing the first bounce noise once the ball hits the wall
      bounce.play();
    }

    // Making the ball bounce using the mouse
    if (ballx < width / 2 & dir1 === -1) {
        if (dist(mouseX, mouseY, ballx, bally) < 30) {
            speedY = random(-10, 10);
            dir1 = -dir1;
              // Playing the second bounce noise once the ball hits the mouse
            bounce2.play();
          }
        }

    // Getting the background music to loop continuously
    framecount++;
    if (framecount % 300 === 0) {
        backMusic.play();
      }

    if (ballx < 0) {
      // Playing the sinsister cackle to indicate you lost the game
        cackle.play();
        backMusic.stop();
        textSize(20);
        textAlign(CENTER);
        fill(255);
        text("Uh-oh. Better luck next time.", width / 2, height / 2);
        noLoop();
    }


}

Audio Player Audio Player Audio Player Audio Player

For this project, I was inspired by the pong game we had made earlier, and I wanted to add sound to make it a more interesting like game. I added background music that loops continuously, a bounce sound effect for when the ball bounces off the walls and a different noise when the user touches the ball. Then I also added a cackle to indicate the game is over when the ball touches the left side.

Aaron Lee – Looking Outwards 10

“I am using 1 of my grace days for this late submission.”

Anders Lind is a great Swedish artist who actively uses computation to compose and perform music. Also a creative director at the Umea University, he composes music mainly for orchestras, choirs, and various ensembles and solo performers.

For this blog post, I was mainly interested in his 2016 exhibition, Lines, which brings musical experience to the field of electronics or interactive technology. In this experimental exhibition, the lines are attached to either wall, floor or hung to ceiling with sensors that create pitch of sound when interrupted by human body. The scale of the exhibition also encourages the visitor to be creative about music making and corporate with others to create musical harmony.

No musical background is required to enjoy the program. The video also shows different group of people interacting, including children.

LINES, 2016, Västerbotttens Museum

Alec Albright – Looking Outwards – 10

I am using a Looking Outwards grace day for this assignment.

Alphard, a piece generated by Iamus

In 2013, professor Francisco Vico of the University of Malaga created Iamus, a computer that can generate classical music scores at the touch of a button. According to Vico, Iamus’s scores become increasingly more complex as they evolve throughout their duration, giving them a dynamic flow beyond a random progression of notes. The algorithm behind Iamus is inspired by human biological processes, and then a human selects from the pieces Iamus provides. This work is admirable because it is ground breaking, introducing artificial intelligence to the world of art and music in a new way. It is very interesting to see the progression of these technologies, and Iamus is just the beginning of a new era in the world of music.

Lanna Lang – Project 11 – Landscape

sketch

//Lanna Lang
//Section D
//lannal@andrew.cmu.edu
//Project 11 - Landscape

//variables for the gradients;
var yAxis = 1;
var c1, c2, c3, c4, c5; //background colors

//variables to draw the clouds
var cloudX = [500, 700, 1200];
var cloudY = [150, 120, 190];
var cloudDist = 5; //the distance the cloud moves

//arrays for the tree and house objects
var trees = [];
var houses = [];

function setup() {
    createCanvas(480, 480);
    frameRate(20);

    c1 = color('#9a99d3'); //background sky lavender
    c2 = color('#ff829f'); //background sky pink
    c3 = color('#f6944d'); //background sky orange
    c4 = color('#a29078'); //train color 1
    c5 = color('#f2f2f4'); //train color 2

    //create an initial collection of trees
    for (var i = 0; i < 10; i++) {
        var rtx = random(width);
        var rty = random(281, 330);
        trees[i] = makeTree(rtx, rty);
    }
    //create an initial collection of houses
    for (var i = 0; i < 10; i++) {
        var rhx = random(width);
        var rhy = random(300, 350);
        houses[i] = makeHouse(rhx, rhy);
    }
}

function draw() {
    drawBackground();
    drawClouds();
    drawLandscape();

    UandDTrees();
    removeTrees();
    addNewTrees();
    
    UandDHouses();
    removeHouses();
    addNewHouses();

    drawTrain();
}

//function to draw the background and 
//the canvas for the train
function drawBackground() {
    //rectangle around full canvas
    drawGradDGtoG(0, 0, width, height, c4, c5, yAxis);

    //draw the sky with gradients
    drawGradPtoP(35, 100, 400, 80, c1, c2, yAxis);
    drawGradPtoO(35, 181, 400, 105, c2, c3, yAxis);
}

//draw the landscape inside the train windows
function drawLandscape() {
    var mtnSpeed = 0.0005;
    var mtnDetail = 0.01;

    //draw the moutains
    stroke('#445c3c');
    for (var x = 35; x <= 435; x++) {
        var t = (x * mtnDetail) + (millis() * mtnSpeed);
        var y = map(noise(t), 0, 1, 170, 300);
        line(x, y, x, 380);
    }

    //draw the grass/horizon
    noStroke();
    fill('#798f44');
    rect(35, 281, 400, 107);
}

//draw the clouds
function drawClouds() {
    for (var i = 0; i < cloudX.length; i++) {
        cloudX[i] -= cloudDist; //the clouds move 5 pixels to the left
        //draw the 3 clouds
        noStroke();
        fill('#faa3b1');
        ellipse(cloudX[i], cloudY[i] + 10, 100, 8);
        ellipse(cloudX[i] - 24, cloudY[i] + 1, 30, 20);
        ellipse(cloudX[i] + 3, cloudY[i], 40, 22);
        ellipse(cloudX[i] - 5, cloudY[i] - 10, 40, 20);
        ellipse(cloudX[i] + 22, cloudY[i], 30, 18);
        //when the clouds reach the end of the canvas, 
        //they will reset back at the other side of the canvas
        //at a random x postion between 500 and 1300
        if (cloudX[i] < 0) {
            cloudX[i] = random(500, 1300);
        }
    }
}

//function to draw gradient from purple to pink
function drawGradPtoP(x, y, w, h, c1, c2, axis) {
    noFill();
    if (axis == yAxis) {
        for (var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0, 1);
            var cPtoP = lerpColor(c1, c2, inter);
            stroke(cPtoP); 
            line(x, i, x + w, i);
        }
    }
}

//function to draw gradient from pink to orange
function drawGradPtoO (x, y, w, h, c2, c3, axis) {
    noFill();
    if (axis == yAxis) {
        for(var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0 , 1);
            var cPtoO = lerpColor(c2, c3, inter);
            stroke(cPtoO);
            line(x, i, x + w, i);
        }
    }
}

//function to draw gradient from tan to light grey
function drawGradDGtoG (x, y, w, h, c4, c5, axis) {
    noFill();
    if (axis == yAxis) {
        for(var i = y; i <= y + h; i++) {
            var inter = map(i, y, y + h, 0 , 1);
            var cDGtoG = lerpColor(c4, c5, inter);
            stroke(cDGtoG);
            line(x, i, x + w, i);
        }
    }
}

//function to draw the train
function drawTrain() {
    //redraw the very left and right sides of the train
    //because of the clouds moving
    drawGradDGtoG(0, 0, 35, height, c4, c5, yAxis);
    drawGradDGtoG(435, 0, 490, height, c4, c5, yAxis);
    
    //rectangle to separate the sky gradient into two windows
    drawGradDGtoG(210, 0, 60, height, c4, c5, yAxis);
   
    //dark brown line in the middle
    noStroke();
    fill('#2e2423');
    rect(235, 0, 10, height); 

    //black rect sign under windows
    fill(0);
    rect(280, 400, 140, 20); 
    rect(50, 400, 140, 20);
    
    //dark brown window frames
    strokeWeight(2);
    stroke('#2e2423');
    noFill();
    rect(30, 85, 185, 310);
    rect(265, 85, 175, 310);

    //sign under windowa that says "Do not lean on train door"
    fill(224);
    textSize(11);
    textStyle(BOLD);
    text("Do not lean on train door", 284, 413);
    text("Do not lean on train door", 54, 413);
    
    //draw the door handles on the train doors
    stroke(193);
    fill(220);
    rect(180, 440, 35, 70);
    rect(265, 440, 35, 70);
    //draw the insides of the door handles
    fill(130);
    rect(190, 450, 15, 70);
    rect(275, 450, 15, 70);

    //draw the train handles
    for (var j = 0; j < width + 50; j += 150) {
        stroke(200);
        strokeWeight(13);
        noFill();
        line(j, 0, j, 70);
        line(j, 70, j + 33, 130);
        line(j, 70, j - 30, 130);
        line(j - 30, 130, j + 33, 130);
    }
}

//update the tree's positions, and display them
function UandDTrees() {
    for (var i = 0; i < trees.length; i++) {
        trees[i].move();
        trees[i].draw();
    }
}

//if a tree has dropped off the left edge,
//remove it from the array
function removeTrees() {
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++) {
        if (trees[i].x + trees[i].tw > 0 & 
            trees[i].y + trees[i].th > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep; //remember the surviving trees
}

//with a very tiny probability, add a new tree to the end
function addNewTrees() {
    var newTreeChance = 0.01;
    if (random(0.1) < newTreeChance) {
        trees.push(makeTree(width, random(281, 330)));
    }
}

//update position of the tree at every frame
function moveTree() {
    this.x += this.speed;
}

//draw the tree and tree trunk
function drawTree() {
    noStroke();
    fill('#c39a2b');
    push();
    translate(this.x, this.y);
    triangle(0, -this.th, 0 - this.tw / 2, 0, 
            0 + this.tw / 2, 0);
    pop();

    fill('#512a17');
    push(); 
    translate(this.x, this.y);
    rect(-3, 0, 4, 5);
    pop();
}

//this function accepts parameters and uses the values
//of those parameters to initialize fields in the tree object
function makeTree(birthLocationX, birthLocationY) {
    var mktr = {x: birthLocationX,
                y: birthLocationY,
                tw: random(5, 15),
                speed: -5.0,
                th: random(15, 30),
                move: moveTree,
                draw: drawTree}
    return mktr;
}

//update the house's positions, and display them
function UandDHouses() {
    for (var i = 0; i < houses.length; i++) {
        houses[i].move();
        houses[i].draw();
    }
}

//if a house has dropped off the left edge,
//remove it from the array
function removeHouses() {
    var housesToKeep = [];
    for (var i = 0; i < houses.length; i++) {
        if (houses[i].x2 + houses[i].hw > 0 &
            houses[i].y2 + houses[i].hh > 0) {
            housesToKeep.push(houses[i]);
        }
    }
    houses = housesToKeep; //remember the surviving houses
}

//with a very tiny probability, add a new house to the end
function addNewHouses() {
    var newHouseChance = 0.003;
    if (random(0.1) < newHouseChance) {
        houses.push(makeHouse(width, random(300, 350)));
    }
}

//update position of the tree at every frame
function moveHouse() {
    this.x2 += this.speed2;
}

//draw the house and the house roof
function drawHouse() {
    noStroke();
    fill('#e7d2a0');
    push();
    translate(this.x2, this.y2);
    rect(-10, 0, 20, 10);
    pop();

    fill('#95221b');
    push();
    translate(this.x2, this.y2);
    triangle(0, -this.hh / 2, 0 - this.hw / 2, 0, 
            0 + this.hw / 2, 0);
    pop();
}

//this function accepts parameters and uses the values
//of those parameters to initialize fields in the house object
function makeHouse(birthLocationX2, birthLocationY2) {
    var mkh = {x2: birthLocationX2,
                y2: birthLocationY2,
                hw: random(10, 40),
                speed2: -5.0,
                hh: random(10, 30),
                move: moveHouse,
                draw: drawHouse}
    return mkh;
}

When I first read this prompt, what came up to my mind immediately was creating a landscape that mimics what I see when sitting on a high-speed train. My favorite sceneries are usually what I see when I pass by complete cities in just a few hours on those trains. I had a lot of fun creating this landscape, but it was also very challenging for me. It definitely took me more than a couple of hours, but it was worth it.

My sketch

Yoshi Torralva-Looking Outwards-10

Album cover of Classical Music Composed by Computer: Experiments in Music Intelligence

On the topic of computer-generated music, I found this album by David Cope titled Classical Music Composed by Computer: Experiments in Musical Intelligence created in 1997 A professor from the University of California at Santa Cruz, he started as a trained musician but found a keen interest in the world of computing as it rose in popularity. David Cope realized how his musical approached paralleled that of programing. At that point in his life, he discovered the opportunity to explore where music meets computing. Eventually, Cope decided to create a program called the Experiments in Music Intelligence. The program would generate music based on data collected by various scores and even Cope’s music. In the album Classical Music Composed by Computer: Experiments in Musical Intelligence, the program generated the sheet music that the musicians would play from that would be recorded. What I admire about this work is how it finds a balance between human-made sound and generative computing. At its final stage, the song is made by an instrument, but the original song is derived from a computer program.

Ilona Altman – project 10 – sonic sketch

sketch

//ilona altman
//project 10
//iea@andrew.cmu.edu

//var music; // this is some background music I made myself 
var music1; // pieces of interview on narrative vs poetic filming
var music2; // excerpt from as I was moving ahead occasionally I saw breif glimpses of beauty
var music3; // advice to the young
var music4; //except from the begining of his film lost lost lost 
var theImage; // this is the background image 

function preload() {
//music = loadSound('music0.mp3'); // preloading sound
music1 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music1.mp3')
music2 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music2.mp3')
music3 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music3.mp3')
music4 = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/music4.mp3')
var myImageURL = "https://i.imgur.com/nyJdNSY.png"; //image
theImage = loadImage(myImageURL); //image
}

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

function setup() {
    createCanvas(600,600);
    background(255,255,255);
    noStroke();
    frameRate(20);
    theImage.loadPixels(); //loading the image pixels
    useSound(); //sound 
  //  music.play(); //sound 
   // music.loop(); //loop the sound
}

function draw() {
//going through all pixels of jonas mekas attriubution 
background(255,255,255);
for (x = 0; x < width+10; x++) {
    for (y = 0; y < height+10; y++) {
    var pixelColorXY = theImage.get(x,y);
    fill(pixelColorXY);
    ellipse(x, y, random(0,2), random(0,2));
    } 
}
//creating red rain 
for (x = 0; x < width+10; x=x+10+random(3,10)) {
    for (y = 0; y < height+10; y=y+10+random(3,10)) {
    fill(255,0,0);
    ellipse(x, y, random(0,2), random(0,3));
    ellipse(x-1,y-1,random(0,2), random(0,3));
    ellipse(x+1,y+1,random(0,2), random(0,3));
    } 
}

}


function mousePressed() {
    if (mouseX > width/2 & mouseY > height/2) { // left top
        music1.play();
    } else if (mouseX > width/2 & mouseY < height/2) { // left bottom
        music2.play();
    } else if (mouseX < width/2 & mouseY > height/2) { // right top
        music3.play();
    } else if (mouseX < width/2 & mouseY < height/2) {// right bottom
        music4.play();
    } 
}

Audio Player Audio Player Audio Player Audio Player

http://jonasmekas.com/diary/

This work was inspired very much by Jonas Mekas, who is one of my favorite artists and filmmakers… He past away about a year ago but still holds such a warm presence. He speaks often about beauty and poetry. I wanted this piece to almost be like a little tribute to him and his work, with sounds pulled from various interviews with him and his films.

Fallon Creech-LookingOutwards-10

Video demonstrating interactions with iPad set-up

Prelude in ACGT, a project created by Pierry Jacquillard at Ecole cantonale d’art de Lausanne’s Media and Interaction Design Unit, explores the literal relationship between the biology and music using the creator’s own DNA. The tools extract Jacquillard’s DNA and convert it into music.

Throughout Jacquillard’s studies, he has always been profoundly captivated by the connections made between highly organic structures and artificial structures brought to life through man; his interest lies in the contrasting nature of the two opposing ends of the spectrum, which he believes to provide means of creating long-lasting interpretations of the product. He explains, “This Prelude is important for me, as the technological advances are taking any data (including music) and turn them into DNA in order to save them for almost eternity as they promise. But for me, the most important is more the interpretation of a code rather than the materialism of the code itself. I think that maybe we are just generating data that will last centuries but the key to retrieve them won’t. They could be a kind of post-digital hieroglyphs.”

This project relies on five interfaces that ignite the interaction between biology and music, change sound qualities, and visualize the individual components. The visualizations are demonstrated through different web applications on iPads. I appreciate the comprehensive process of his using only Javascript to interpret and convert the data into statement graphics.

Ian Kaneko LO – 10

The Seaboard Rise 49 by ROLI

In the prompt it mentioned discussing new computational instruments. I asked my friend who is a member of CMU’s exploded ensemble what their favorite piece of tech that they used in the ensemble. What I found out about was a cool instrument called the Seaboard Rise.

What I admire about it is that it took one of the most harmonically capable instruments (the piano) and addressed its main weaknesses. Those being the the lack of different timbres and the limited expressiveness.

The seaboard is very akin to a super synthesizer. You can download and install different sounds that you want the instrument to produce and can change them real time which addresses the timbre problem I previously mentioned. It also allows for slides and vibrato, two very expressive aspects of music that are unavailable to real pianos.

The product was created by the company ROLI, so it hard to pinpoint a specific creator of the project. I think that the pure quality of the instrument shows how much the creators really cared about this and saw the effects it could have on the future of music.

The Game of Thrones theme played on a Seaboard

Aaron Lee – Project 10 – Sonic Sketch

sketch

/*
Aaron Lee
Section C
sangwon2@andrew.cmu.edu
Project-10-Sonic Sketch
*/

var angry;
var happy;
var puzzled;
var sad;

function preload() {
    // call loadImage() and loadSound() for all media files here
    angry = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/angry-1.wav");
    happy = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/happy.wav");
    puzzled = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/puzzled.wav");
    sad = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/sad.wav");

}


function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 100);
    background(255);
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    angry.setVolume(1);
    happy.setVolume(2);
    puzzled.setVolume(1);
    sad.setVolume(1);

}


function draw() {
    background(255);
    //angry
    fill("red");
    rect(0, 0, 100, 100);
    fill("black");
    arc(20, 30, 10, 10, 0, PI);
    arc(80, 30, 10, 10, 0, PI);
    line(25, 80, 75, 80);
    //happy
    fill("yellow");
    rect(100, 0, 100, 100);
    fill("black");
    ellipse(120, 30, 10, 10);
    ellipse(180, 30, 10, 10);
    arc(150, 50, 80, 80, 0, PI);
    //puzzled
    fill("green");
    rect(200, 0, 100, 100);
    fill("black");
    ellipse(220, 30, 10, 10);
    ellipse(280, 30, 10, 10);
    ellipse(250, 80, 10, 10);
    //sad
    fill("blue");
    rect(300, 0, 100, 100);
    fill("black");
    line(315, 30, 325, 30);
    line(375, 30, 385, 30);
    arc(350, 90, 80, 80, PI, 0);
}

function mousePressed() {
    //setting mousepresed location
    if (mouseX > 0 & mouseX < 100 ) {
        angry.play();
        } else {
        angry.pause();
        }
    if (mouseX > 100 & mouseX < 200) {
        happy.play();
        } else {
        happy.pause();
        }
    if (mouseX > 200 & mouseX < 300) {
        puzzled.play();
        } else {
        puzzled.pause();
        }
    if (mouseX > 300 & mouseX < width) {
        sad.play();
        } else {
        sad.pause();
        }
}

In this project, I created 4 different emojis: angry, happy, puzzled and sad. The associated sound plays when the mouse is pressed.