Category: SectionC

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();
    }


}

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

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.

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.

Carly Sacco-Project 10- Sonic Sketch

sketch

//Carly Sacco
//Section C
//csacco@andrew.cmu.edu
//Project 10: Interactive Sonic Sketch

var x, y, dx, dy;

function preload() {
	bubble = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bubble-3.wav");
	boatHorn = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/boat.wav");
	bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bird.wav");
	water = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/water-2.wav");
}
	
function setup() {
    createCanvas(640, 480);
    x = 200;
    y = 40;
    dx = 0;
    dy = 0;
	
	useSound();
}

function soundSetup() {
    osc = new p5.TriOsc();
    osc.freq(880.0); //pitch
    osc.amp(0.1); //volume
} 

function draw() {
	background(140, 216, 237);
	//ocean
	noStroke();
	fill(26, 141, 173);
	rect(0, height / 2, width, height);
	
	//fish head
	fill(50, 162, 168);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(200, -100, 100, 100, 20);
	pop();
	
	fill(184, 213, 214);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(215, -85, 70, 70, 10);
	pop();
	
	//fish eyes
	fill('white');
	ellipse(520, 355, 15, 25);
	ellipse(545, 355, 15, 25);
	
	fill('black');
	ellipse(520, 360, 10, 10);
	ellipse(545, 360, 10, 10);
	
	//fish mouth
	fill(227, 64, 151);
	noStroke();
	push();
	translate(width / 2, height / 2);
    rotate(PI / 4);
    rect(240, -60, 40, 40, 10);
	pop();
	
	fill(120, 40, 82);
	ellipse(533, 395, 30, 30);	
	
	//fins
	fill(209, 197, 67);
	quad(565, 365, 590, 325, 590, 430, 565, 400);
	quad(500, 365, 500, 400, 475, 430, 475, 325);
	
	//bubbles
	var bub = random(10, 40);
	fill(237, 240, 255);
	ellipse(575, 315, bub, bub);
	ellipse(550, 275, bub, bub);
	ellipse(580, 365, bub, bub);
	x += dx;
	y += dy;

	//boat
	fill('red')
	quad(40, 200, 250, 200, 230, 260, 60, 260);
	fill('white');
	rect(100, 150, 80, 50);
	
	fill('black')
	ellipse(110, 165, 15, 15);
	ellipse(140, 165, 15, 15);
	ellipse(170, 165, 15, 15);
	
	
	//birds
	noFill();
	stroke(141, 160, 166);
	strokeWeight(5);
	arc(475, 75, 75, 60, PI * 5 / 4, 2 * PI);
	arc(550, 75, 75, 60, PI, 2 * PI - PI / 5);
	
	arc(550, 100, 50, 35, PI * 5 / 4, 2 * PI);
	arc(600, 100, 50, 35, PI, 2 * PI - PI / 5);
	
	arc(430, 125, 50, 35, PI * 5 / 4, 2 * PI);
	arc(480, 125, 50, 35, PI, 2 * PI - PI / 5);
	
	//waterlines
	stroke(89, 197, 227);
	bezier(300, 400, 250, 300, 200, 500, 50, 400);
	bezier(50, 350, 75, 500, 250, 200, 300, 375);
}

function mousePressed() {
	//plays sound if clicked near boat
	if (mouseX < width / 2 & mouseY < height / 2) {
		boatHorn.play();
	}
	//plays bubbles if clicked near fish
	if (mouseX > width / 2 & mouseY > height / 2) {
		bubble.play();
	}
	//plays birds if clicked near birds
	if (mouseX > width / 2 & mouseY < height / 2) {
		bird.play();
	}
	//plays water if clicked near water
	if (mouseX < width / 2 & mouseY > height / 2) {
		water.play();
	}
}

For my project this week, I began by starting with my project 3, which was the fish and bubbles. I wanted to add more options than a bubble sound so I decided to add a boat, birds, and a water noise. I kept it simple, so that whenever you click in the area closest to each icon, the associated sound plays.

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/

Jasmine Lee – Project 10 – Sonic Sketch

sonicsketch

//Jasmine Lee
//jasmine4@andrew.cmu.edu
//Section C
//Project-10 (Sonic Sketch)

var mySnd1; //variables to hold sound (cauldron, coins, pumpkin)
var mySnd2;
var mySnd3;
var noteC; //variables to hold sound (colored flasks)
var noteD;
var noteE;
var noteF;
var noteG;
var noteA;
var noteB;
var spiderB; //control spider's movement
var bounce; //control bubbles' movement
var bounce2;
var jingle; //control coins' movement
var bounce3;


function preload() {
    // call loadImage() and loadSound() for all media files here
    mySnd1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bubble.wav");
    mySnd2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/coins.wav");
    mySnd3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/surprise.wav");
    noteC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielC.wav")
    noteD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielD.wav")
    noteE = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielE.wav")
    noteF = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielF.wav")
    noteG = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielG.wav")
    noteA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielA.wav")
    noteB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/glockenspielB.wav")
    mySnd1.setVolume(0.5);
    mySnd2.setVolume(0.5);
    mySnd3.setVolume(0.5);
    noteC.setVolume(0.5);
    noteD.setVolume(0.5);
    noteE.setVolume(0.5);
    noteF.setVolume(0.5);
    noteG.setVolume(0.5);
    noteA.setVolume(0.5);
    noteB.setVolume(0.5);
}

 function setup() {
     createCanvas(600, 600);
 }

function mousePressed() {
    //red-flask-sound
    if (mouseX > 77 & mouseX < 107 && mouseY > 270 & mouseY < 350){
        noteC.play();
    }

    //orange-flask-sound
    if (mouseX > 147 & mouseX < 177 && mouseY > 270 & mouseY < 350){
        noteD.play();
    }

    //yellow-flask-sound
    if (mouseX > 217 & mouseX < 247 && mouseY > 270 & mouseY < 350){
        noteE.play();
    }

    //green-flask-sound
    if (mouseX > 287 & mouseX < 317 && mouseY > 270 & mouseY < 350){
        noteF.play();
    }

    //blue-flask-sound
    if (mouseX > 357 & mouseX < 387 && mouseY > 270 & mouseY < 350){
        noteG.play();
    }

    //purple-flask-sound
    if (mouseX > 427 & mouseX < 457 && mouseY > 270 & mouseY < 350){
        noteA.play();
    }

    //pink-flask-sound
    if (mouseX > 497 & mouseX < 527 && mouseY > 270 & mouseY < 350){
        noteB.play();
    }

    //cauldron-sound
    if (mouseX > 100 & mouseX < 200 && mouseY > 420 & mouseY < 500){
        mySnd1.play();
    }
    //coins-sound
    if (mouseX > 245 & mouseX < 380 && mouseY > 455 & mouseY < 500){
        mySnd2.play();
    }

    //pumpkin-sound
    if (mouseX > 400 & mouseX < 515 && mouseY > 405 & mouseY < 500){
        mySnd3.play();
    }
} 


function draw() {
    // you can replace any of this with your own code:
    background(109, 142, 143);
    angleMode(DEGREES);
    drawings();
    }

function drawings() {
    noStroke();

    //picture frames
    if (second() % 3 == 0) {
        spiderB = 25;
    } else {
        spiderB = -15;
    }

    push();
    translate(120, 50);
    strokeWeight(8);
    stroke(46, 45, 41);
    fill(255, 255, 255, 100); //black frames
    rect(0, 0, 160, 190);
    rect(300, 120, 70, 70);
    stroke(189, 182, 157); //beige frame
    rect(220, -10, 80, 80);
    noStroke();

    //crack in beige frame
    if (second() % 2 == 0) {
        fill(199, 201, 32, 150);
    } else {
        fill(199, 201, 32, 0);
    }
    triangle(296, 3, 296, -5, 250, 50);

    //crack in black frame
    if (second() % 6 == 0) {
        fill(133, 209, 237, 0);
    } else {
        fill(133, 209, 237, 150);
    }
    triangle(366, 124, 366, 134, 310, 180);
    pop();

    push();
    translate(130, 57);
    strokeWeight(4); //cobwebs
    stroke(200, 200, 200);
    line(0, 0, 0, 40);
    line(10, 0, 10, 30);
    line(30, 0, 30, 70 + spiderB);
    line(70, 0, 70, 7);
    line(80, 0, 80, 20);
    line(120, 0, 120, 35);
    line(130, 0, 130, 5);
    line(140, 0, 140, 90);
    noStroke();
    fill(46, 45, 41);
    ellipse(30, 70 + spiderB, 7, 10);
    pop();


    //top-shelf left bracket
    push();
    translate(60, 350);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //top-shelf right bracket
    push();
    translate(525, 350);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //top-shelf
    push();
    translate(50, 350);
    fill(189, 182, 157);
    rect(0, 0, 500, 15);
    pop();

    //bottom-shelf left bracket
    push();
    translate(60, 500);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //bottom-shelf right bracket
    push();
    translate(525, 500);
    fill(46, 45, 41);
    rect(0, 0, 15, 60);
    pop();

    //bottom-shelf
    push();
    translate(50, 500);
    fill(189, 182, 157);
    rect(0, 0, 500, 15);
    pop();

    //flask-1
    push();
    translate(77, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(204, 18, 18, 150); //red
    rect(2, 10, 26, 70);
    pop();

    //flask-2
    push();
    translate(147, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(184, 133, 24, 150); //orange
    rect(2, 15, 26, 65);
    pop();

    //flask-3
    push();
    translate(217, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(199, 201, 32, 150); //yellow
    rect(2, 20, 26, 60);
    pop();

    //flask-4
    push();
    translate(287, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(87, 163, 69, 150); //green
    rect(2, 25, 26, 55);
    pop();

    //flask-5
    push();
    translate(357, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(52, 98, 133, 150); //blue
    rect(2, 30, 26, 50);
    pop();

    //flask-6
    push();
    translate(427, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(102, 64, 168, 150); //purple
    rect(2, 35, 26, 45);
    pop();

    //flask-7
    push();
    translate(497, 270);
    fill(255, 255, 255, 100);
    rect(0, 0, 30, 80);
    rect(-10, 0, 50, 5);
    fill(212, 125, 196, 150); //pink
    rect(2, 40, 26, 40);
    pop();

    //cauldron
    if (second() % 2 == 0) { //controls bounce of 1st and 4th bubble
        bounce = -2;
    } else {
        bounce = 2;
    }

    if (second() % 2 == 0) { //controls bounce of 2nd and 3rd bubble
        bounce2 = 3;
    } else {
        bounce2 = -3;
    }

    push();
    translate(150, 460);
    fill(46, 45, 41); //cauldron
    ellipse(0, 0, 100, 80);
    ellipse(0, -30, 100, 20);
    fill(89, 255, 122, 150); //bubbles
    ellipse(0, -30, 80, 10); 
    ellipse(-15, -30 + bounce2, 25, 25);
    ellipse(15, -40 + bounce, 20, 20);
    ellipse(5, -60 + bounce, 10, 10);
    ellipse(25, -75 + bounce2, 7, 7);
    pop();

    //coins
    if (second() % 2 == 0) { //angle at which the coins rotate
        jingle = -2;
    } else {
        jingle = 2;
    }

    if (second() % 2 == 0) { //controls bounce of top coin
        bounce3 = 6;
    } else {
        bounce3 = -6;
    }

    push();
    translate(260, 497);
    rotate(jingle);
    fill(156, 140, 39); //coin-shadows (4th row)
    ellipse(0, 0, 30, 10);
    ellipse(35, 0 + bounce, 30 , 10);
    ellipse(70, 0, 30, 10);
    ellipse(105, 0, 30, 10);
    fill(201, 184, 68); //coins (4th row)
    ellipse(0, -3, 30, 10);
    ellipse(35, -3 + bounce, 30, 10);
    ellipse(70, -3, 30, 10);
    ellipse(105, -3, 30, 10);

    fill(156, 140, 39); //coin-shadows (3rd row)
    ellipse(17, -10 + bounce, 30, 10);
    ellipse(52, -10, 30, 10);
    ellipse(87, -10 + bounce, 30, 10);
    fill(201, 184, 68); //coins (3rd row)
    ellipse(17, -13 + bounce, 30, 10);
    ellipse(52, -13, 30, 10);
    ellipse(87, -13 + bounce, 30, 10);

    fill(156, 140, 39); //coin-shadows (2nd row)
    ellipse(35, -20 + bounce2, 30, 10);
    ellipse(70, -20 + bounce2, 30, 10);
    fill(201, 184, 68); //coins (2nd row)
    ellipse(35, -23 + bounce2, 30, 10);
    ellipse(70, -23 + bounce2, 30, 10);

    fill(156, 140, 39); //coin-shadows (1st row)
    ellipse(52, -30 + bounce3, 30, 10);
    fill(201, 184, 68); //coins (1st row)
    ellipse(52, -33 + bounce3, 30, 10);
    pop();

    //pumpkin
    push();
    translate(460, 460);
    fill(83, 105, 88);
    rect(-5, -55, 15, 30);
    fill(135, 100, 26) //pumpkin-shadow
    ellipse(10, 0, 90, 80);
    ellipse(-10, 0, 90, 80);
    fill(184, 133, 24); //pumpkin
    ellipse(0, 0, 90, 80);
    fill(135, 100, 26, 130) //pumpkin-shadow front
    ellipse(0, 0, 40, 80); 

    //changes pumpkin face color
    if (second() % 2 == 0) {
        fill(0, 0, 0, 175);
    }else {
        fill(250, 227, 72, 175);
    }

    ellipse(-20, -5, 10, 20);
    ellipse(20, -5, 10, 20);
    ellipse(0, 15, 15, 15);
    pop();
}

The sounds included in my project are bubbling sounds, coins jingling, and a surprised noise. These can be played by clicking on the cauldron, coins, and pumpkins, respectively. The colored flasks on the top shelf can also be played, and they sound out glockenspiel notes C, D, E, F, G, A, B (from left to right). I wanted to create a project which could play notes once you clicked in different areas, and I decided to make it colorful. The flasks were the first things I designed, and I thought a Halloween motif would work for fitting in the other sounds.

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.