Category: Project-10-Sonic-Sketch

William Su – Project 10 – Sonic Sketch

For this project I saw the opportunity to make a simple game. In this case, a very cruddy p5 version of CS:GO. Enjoy!

sketch

//William Su
//wsu1@andrew.cmu.edu
//Section E
//Project 10 

var bgurl = "https://i.imgur.com/CYEy7BV.jpg"; //background.
var muzzleFlash = "https://i.imgur.com/68jJZkV.png"; //muzzle flash from the tip of gun.
var mfTrue = false; //currently false if no click;
var T1Alive = true; //Whether enemies are currently alive or not.
var T2Alive = true;
var T3Alive = true;
var Tenemy = "https://i.imgur.com/Nh8X1RG.png"; //Enemy image
var bg; // Background img
var mf; // MuzzleFlash
var T1HitCount = 0; //Number of times each enemy has been hit.
var T2HitCount = 0;
var T3HitCount = 0;

function preload() {
    bg = loadImage(bgurl);
    mf = loadImage(muzzleFlash);
    T1 = loadImage(Tenemy);
    T2 = loadImage(Tenemy);
    T3 = loadImage(Tenemy);

    // Local File
    // AKshot = loadSound("assets/AK.mp3");
    // Death = loadSound("assets/Death.mp3");
    // Death2 = loadSound("assets/Death2.mp3");
    // Hit = loadSound("assets/Hit.mp3");
    AKshot = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/AK.mp3");
    Death = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Death.mp3");
    Death2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Death2.mp3");
    Hit = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/Hit.mp3");
}


function setup() {
    createCanvas(720, 400);
    bg.resize(720,400);
    frameRate(60);
    noCursor();
}


function draw() {
    if (mfTrue == true) { //If mouse pressed, activate muzzle flash.
        mfTrue = false; //Reset muzzle flash as false.
        image(bg, 0, 0);
        image(mf, 230, 30); //Draw muzzle flash and background.
    } else {
        image(bg, 0, 0);
    }

    //Draw the three enemies.
    if (T1Alive == true) {
        push();
        image(T1,180,180);
        T1.resize(35,70);
        pop();
    } 

    if (T2Alive == true) {
        push();
        image(T2,500,180);
        T2.resize(25,50);
        pop();
    } 

    if (T3Alive == true) {
        push();
        image(T3,370,192);
        T3.resize(13,26);
        pop();
    } 

    if (T1Alive == false & T2Alive == false && T3Alive == false) { //Reset if all enemies are dead.
        T1Alive = true;
        T2Alive = true;
        T3Alive = true;
    }

    crosshairs(); //Draw Crosshair
}

function crosshairs() { //Crosshair 
    stroke("white");
    strokeWeight(2);
    line(mouseX,mouseY,mouseX+20,mouseY);
    line(mouseX,mouseY,mouseX-20,mouseY);
    line(mouseX,mouseY,mouseX,mouseY+20);
    line(mouseX,mouseY,mouseX,mouseY-20);
}

function mousePressed() {
    //Play gunshot every click.
    AKshot.play();
    mfTrue = true;
    
    //Enemy 1 Hitbox
    if(mouseX > 180 & mouseX < 205 && mouseY > 180 && mouseY < 250 && T1Alive == true) {

        if (T1HitCount <= 4) { //Need 5 hits to kill.
            Hit.amp(2.5);
            Hit.play();
            T1HitCount += 1;
        } else { //Play death
            Death.amp(3);
            Death.play();
            Hit.amp(2);
            Hit.play();
            T1Alive = false;
            T1HitCount = 0;
        }
    }

    //Enemy 2 Hitbox
    if(mouseX > 500 & mouseX < 525 && mouseY > 180 && mouseY < 230 && T2Alive == true) {
        if (T2HitCount <= 4) { //Need 5 hits to kill.
            Hit.amp(2.5);
            Hit.play();
            T2HitCount += 1;
        } else { //Play death
            Death2.amp(3);
            Death2.play();
            Hit.amp(2);
            Hit.play();
            T2Alive = false;
            T2HitCount = 0;
        }
    }

    //Enemy 3 Hitbox
    if(mouseX > 370 & mouseX < 383 && mouseY > 192 && mouseY < 218 && T3Alive == true) {
        if (T3HitCount <= 4) { //Need 5 hits to kill.
            Hit.amp(2.5);
            Hit.play();
            T3HitCount += 1;
        } else { //Play death
            Death.amp(3);
            Death.play();
            Hit.amp(2);
            Hit.play();
            T3Alive = false;
            T3HitCount = 0;
        }
    }
}

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.

Sarah Choi – Project 10 – Interactive Sonic Sketch

project-10

//Sarah Choi 
//Section D
//sychoi@andrew.cmu.edu
//Project-10-Interactive-Sonic-Sketch

//spiral
var angle = 0;
var bright = 255;
var n = 0;
var m = 0;
var x = 8 * n;
var y = 8 * m;

function preload() {
    // call loadImage() and loadSound() for all media files here
    sound1 = loadSound("birds.wav");
    sound2 = loadSound("thunder.wav");
    //sound3 = loadSound("springday.wav");
    sound4 = loadSound("lightshower.wav");
    sound1.setVolume(0.5);
    sound2.setVolume(0.5);
    //sound3.setVolume(0.5);
    sound4.setVolume(0.5);
}

function setup() {
    // you can change the next 2 lines:
    createCanvas(640, 480);
    createDiv("Interactive Sonic Sketch");

    //======== call the following to use sound =========
    useSound();

    
    rectMode(CENTER);
}

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.Oscillator();
    osc.freq(880);
    osc.amp(0.1);
    osc.start();
}

//--------------------------------------------------------------------

function draw() {
    background(0);
    noStroke();
    if (mouseIsPressed) {
        bright = 255;
    }
    background(bright);
    bright = bright - 5;

    fill(255, 0, 0);
    var m = max(min(mouseX, 200), 20);
    var size = m * 200.0 / 250.0;
    rect(10 + m * 150.0 / 350.0, 400.0,
         size, size);
    fill(0, 0, 255);
    size = 200 + size;
    circle(150, 50 + m * 150 / 250.0,
         size / 2, size / 2);

    push();
    fill(0, 255, 0);
    ellipseMode(CORNER);
    var n = max(min(mouseX, 300), 200);
    var size2 = n * 200.0 / 400.0;
    ellipse(400 , size2, size2 * 2, size2 * 4);
    pop();
    
    if (mouseIsPressed) {
        fill(255, 255, 0);
        noStroke();
        strokeWeight(5);
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(100, 0, 150, 150, 175, 150);
        quad(175, 150, 150, 150, 200, 200, 250, 200);
        triangle(200, 200, 250, 200, 150, 450);
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(300, 0, 275, 150, 250, 150);
        quad(275, 150, 250, 150, 300, 200, 350, 200);
        triangle(300, 200, 350, 200, 250, 450);
        pop();
        angle = angle + 5;

        push();
        translate(mouseX, mouseY);
        rotate(radians(10));
        triangle(25, 0, 0, 50, -25, 50);
        quad(0, 50, -25, 50, 45, 100, 75, 100);
        triangle(45, 100, 75, 100, 25, 250);
        pop();
        angle = angle + 5;

        sound2.play();
        sound4.play();
    }

    if (x <= width) {
        n += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }
    else { 
        m += 1;
        bezier(x+2, y+2, x, y+6, x+2, y+8, x+4, y+6, x+2, y+2);
    }

    sound1.play();
    //sound3.play();
}

I chose these sounds as I thought they gave a good representation of Pittsburgh when it goes from being a nice spring day that suddenly comes with thunderstorms and a light rain shower.

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. 

Xu Xu – Project 10 – Sonic Sketch

sketch

//Claire Xu
//xux1@andrew.cmu.edu
//section B
//Project 10
var playerIMG;
var acousticBreeze;
var pianoMoment;
var goingHigher;
var retroSoul;

function preload(){
    var iphoneIMG = "https://i.imgur.com/KeDOgRs.jpg"
    playerIMG = loadImage(iphoneIMG);

    //load 4 tracks
    acousticBreeze = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-acousticbreeze.wav");
    pianoMoment = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-pianomoment.wav");
    goingHigher = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-goinghigher.wav");
    retroSoul = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bensound-retrosoul.wav");
}

function setup(){
    createCanvas(450,450);
    background(255);
}

function soundSetup(){
    //volume for tracks
    acousticBreeze.setVolume(2);
    pianoMoment.setVolume(2);
    goingHigher.setVolume(2);
    retroSoul.setVolume(2);
}

function draw(){
    image(playerIMG, 0,0);
}

function mousePressed(){

    if (mouseX >= 150 & mouseX <= 350){
    //play acousticBreeze when it's pressed
        if (mouseY > 270 & mouseY < 290){
            //play acousticBreeze
            acousticBreeze.play();
            //pause others
            pianoMoment.pause();
            goingHigher.pause();
            retroSoul.pause();
        }
    //play pianoMoment when it's pressed
        if (mouseY > 290 & mouseY < 310){
            //play pianoMoment
            pianoMoment.play();
            //pause others
            acousticBreeze.pause();
            goingHigher.pause();
            retroSoul.pause();
        }
    //play goingHigher when it's pressed
        if (mouseY > 310 & mouseY < 330){
            //play goingHigher
            goingHigher.play();
            //pause others
            acousticBreeze.pause();
            pianoMoment.pause();
            retroSoul.pause();
        }
    //play retroSoul when it's pressed
        if (mouseY > 330 & mouseY < 350){
            //play retroSoul
            retroSoul.play();
            //pause others
            acousticBreeze.pause();
            pianoMoment.pause();
            goingHigher.pause();
        }
    }

    if (mouseX >= 155 & mouseX <= 165 & mouseY >= 385 & mouseY <= 395){
        //pause everything
        acousticBreeze.pause();
        pianoMoment.pause();
        goingHigher.pause();
        retroSoul.pause();
    }
}

For this project I wanted to do a “music app” design, and there are four songs to choose from the album, which can be paused and played by clicking the song titles or the pause button. I drew the interface from scratch in adobe illustrator and photoshop, and wrote the song names in the interface. This was a fun project, but implementing the soundtracks in the file was hard. (The soundtracks are actually only 1 minute long due to the file upload restriction)

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.

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.

Charmaine Qiu – Project 10 – Sonic Sketch


sketch

In this project, I was able to incorporate new knowledge of importing sound and oscillations into my former assignment. I had fun looking for edm music sources online and creating an interactive project that people could play with.

// Charmaine Qiu
// charmaiq@andrew.cmu.edu
// section E
//Project - 10 - Sonic Sketch


var angle = 0
var b = 0
var bgmusic;
var heySound;
var beat;

function preload() {
    //preload the audios and loop the background music
    beat = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/beat.wav');
    heySound = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hey.wav');
    bgmusic = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bgmusic.wav');
    bgmusic.loop();
}

function setup() {
    createCanvas(400, 400);
    //createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}

function soundSetup() { // setup for audio generation
    //set the volume for audio and play background music
    bgmusic.setVolume(1);
    bgmusic.play();
    heySound.setVolume(1);
    beat.setVolume(2);
    //setup for oscillation
    osc = new p5.TriOsc();
    osc.freq(500);
    osc.amp(1);
    osc.start();
}

function draw() {
    //set the frequency of oscillation according to placement of mouseX
    osc.freq(mouseX);
    osc.amp();
    //when the mouse is pressed, "hey" plays
    if (mouseIsPressed){
        heySound.play();
    }

   //graphics created from precious project
    fill(b);
    //randomizing the color in greyscale
    b = random (0, 255);
    strokeWeight(0);
    rectMode(CENTER);
    push();
    //square that follows the mouse
    translate(mouseX, mouseY);
    background(0);
    rotate(radians(angle));
    rect(0, 0, 50, 50);
    pop();
    //angle rotates
    angle += 5;

    //rectangle outlines in the center
    noFill();
    stroke(255);
    strokeWeight(5);
    push();
    translate(width / 2, height / 2);
    rect(0, 0, mouseX, mouseY);
    pop();

    stroke(b);
    strokeWeight(1);
    rect(width * 0.5, height * 0.5, mouseY, mouseX);

   //dancing lines in the center
    stroke(255);
    strokeWeight(1);
    line(width / 2 - 40, height / 2, width / 2 - 40, mouseY + 50);
    line(width / 2 - 30, height / 2, width / 2 - 30, mouseY);
    line(width / 2 - 20, height / 2, width / 2 - 20, mouseY - 20);
    line(width / 2 - 10, height / 2, width / 2 - 10, mouseY + 40);
    line(width / 2, height / 2, width / 2, mouseY);
    line(width / 2 + 10, height / 2, width / 2 + 10, mouseY + 60);
    line(width / 2 + 20, height / 2, width / 2 + 20, mouseY + 10);
    line(width / 2 + 30, height / 2, width / 2 + 30, mouseY);
    line(width / 2 + 40, height / 2, width / 2 + 40, mouseY - 30);

   //When the mouse move to the left side of the canvas
    if (mouseX <= width / 2){
        //squares that rotates around the mouse
        push();
        translate(mouseX - 50, mouseY - 50);
        rotate(radians(angle));
        rectMode(CORNER);
        rect(20, 20, 20, 20);
        pop();
        angle = angle + 0.5;

        push();
        translate(mouseX + 50, mouseY + 50);
        rotate(radians(angle));
        rect(0, 0, 10, 10);
        pop();
        angle = angle - 0.5

        //text appears
        textSize(15);
        text('WooHooo!!!', 20, 90);
        textSize(30);
        text('哦耶!', 280, 180);


      } else { //When the mouse move to the right side of the canvas
        fill(0);
        strokeWeight();
        push();
        translate(mouseX, mouseY);
        rotate(radians(angle));
        rectMode(CENTER);
        rect(0, 0, 30, 30);
        pop();
        angle = angle + 5

        //text appears
        textSize(20);
        fill(255);
        text('야호!', 280, 50);
        textSize(25);
        text('ヤッホ〜ー', 70, 350);
       }
}
//when the key "b" is pressed, a beat sound is played
function keyPressed(){
    if(key == "b"){
        beat.play();
    }
}