Project-10-Sonic-Sketch – Page 3 – [OLD FALL 2019] 15-104 • Introduction to Computing for Creative Practice

Shannon Ha – Project 10 – Sonic Sketch

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

var underlyingImage;

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


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

}


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

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

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

}

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

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

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

}

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

*1 grace day used for this project.

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


}

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.

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

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.

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.

Mari Kubota- Project 10- Sonic Sketch

For this project I used my project 3 code as a starting point. The movement in the x coordinate changes the frequency. The movement of the y coordinate changes the amplitude. Mouse press resets the frequency to a certain point. Pressing any key randomizes the frequency. If the firefly is off canvas, the sound automatically stops to prevent from any unsavory sounds.

sketch

/*  Mari Kubota
    49-104 Section D
    mkubota@andrew.cmu.edu 
    Assignment 10
*/

var x = 300;
var y = 300;
var diameter = 8;
var diffx = 0;
var diffy = 0;
var targetX = 300;
var targetY = 300;
var angle = 0;
var value=0;

var frequency=400.0;
var amplitude= 5;



function setup() {
    createCanvas(640, 480);
    useSound();
    
}

function preload() {
}


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


function draw(){
    background (200-mouseY,220-mouseY,250);
//trees
    translate(100 - mouseX/2, 0);
    fill(0);
    rect (-1000, 400,3050,80);

    rect (30,200,20,200);
    triangle (40,150,80,350,0,350);

    rect (180,200,20,200);
    triangle (190,150,100,350,280,350);

    rect (330,200,20,200);
    triangle (340,150,380,350,300,350);

    rect (530,200,20,200);
    triangle (530,100,640,350,440,350);

    rect (750,200,20,200);
    triangle (750,100,860,350,660,350);

//sun
    fill("red");
    ellipse(30,50,50,50);


//firefly
    fill(value-100, value, value-200);
    diffx = mouseX - x;
    diffy = mouseY - y;
    x = x + 0.1*diffx;
    y = y + 0.1*diffy;
    noStroke();
    ellipse(x, y, diameter, diameter);

//sound
    if(diffx > 0){
        osc.freq(frequency++); // difference in x changes frequency
    } else if(diffx<0){
        osc.freq(frequency--); 
    }    

    if(diffy > 0){
        osc.amp(amplitude++); //difference in y changes amplitude
    } else if(diffy<0){
        osc.amp(amplitude--); 
    }

    if (mouseIsPressed) { // resets frequency to 400
        frequency= 400;
    }

//sound cuts off if firefly is off canvas
    if(x>width+450 || x<-400){
        amplitude=0;
    }

    if(y>height || y<0){
        amplitude=0;
    }

}

//press any key to randomize frequency
function keyPressed(){
    frequency= random(200,2000);
}

Angela Lee – Project 10 – Sonic Sketches

Long ago, the four nations lived together in harmony. Then, everything changed when the Fire Nation attacked…

sketch

/*
 * Angela Lee
 * Section E
 * ahl2@andrew.cmu.edu
 * Project 10 Sonic Sketch
*/

// illustrations of the avatar characters
// illustrations created by me :)
var imageLinks = [
    "https://i.imgur.com/b8bcUw6.png",
    "https://i.imgur.com/CNlT1Ed.png",
    "https://i.imgur.com/vmDdgoD.png",
    "https://i.imgur.com/yOvvKhm.png"];

// variables in which images will be loaded into
var katara;
var aang; 
var toph; 
var zuko; 

// variables for sound
var waterSound; 
var airSound;
var earthSound; 
var fireSound;  


// loading the images and sounds
function preload() {
    // call loadImage() and loadSound() for all media files here
    aang = loadImage("https://i.imgur.com/b8bcUw6.png");
    katara = loadImage("https://i.imgur.com/CNlT1Ed.png");
    toph = loadImage("https://i.imgur.com/vmDdgoD.png");
    zuko = loadImage("https://i.imgur.com/yOvvKhm.png");

    waterSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/water-3.wav");
    airSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/wind.wav");
    earthSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/earth.wav");
    fireSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fire.wav");
}


function setup() {
    createCanvas(480, 480);
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    waterSound.setVolume(1);
    airSound.setVolume(1.25);
    earthSound.setVolume(1);
    fireSound.setVolume(1);
}


function draw() {
    background(200);

    // images of the characters
    image(aang, 0, 0, width/2, height/2);
    image(katara, width/2, 0, width/2, height/2);
    image(toph, 0, height/2, width/2, height/2);
    image(zuko, width/2, height/2, width/2, height/2);
}

function mousePressed() {

    // airbending sounds play if user clicks in aang's space
    if (mouseX >= 0 & mouseX < width/2 && 
        mouseY >= 0 && mouseY < height/2) {
        airSound.play();
    } else { // if user clicks away, sound stops
        airSound.pause();
    }

    // waterbending sounds play if user clicks in katara's space
    /*
    note: the water sound has some silence in it, so if you 
    hear silence even after pressing on katara, it may be 
    the silent part of the file. click again to start from 
    the beginning of that sound file.
    */ 
    if (mouseX >= width/2 & mouseX < width &&
        mouseY >= 0 && mouseY < height/2) {
        waterSound.play();
    } else { // if user clicks away, sound stops
        waterSound.pause(); 
    }

    // earthbending sounds play if user clicks in toph's space
    if (mouseX >= 0 & mouseX < width/2 &&
        mouseY >= height/2 && mouseY < height) {
        earthSound.play();
    } else { // if user clicks away, sound stops
        earthSound.pause();
    }

    // firebending sounds play if user clicks in zuko's space
    if (mouseX >= width/2 & mouseX < width &&
        mouseY >= height/2 && mouseY < height) {
        fireSound.play();
    } else { // if user clicks away, sound stops
        fireSound.pause();
    }
}

Because one of the requirements was to feature at least 4 sounds, I thought of things that came in four and could be represented. There are 4 nations in the world of Avatar, which is a show I love. To introduce people who haven’t watched the show before, I used sound to communicate which nation each major character is from. The sounds of earth, air, water, and fire are all pretty distinct and recognizable, so I think it was successful in communicating those nations. Plus, I had a lot of fun creating the illustrations for the characters.

Lauren Park – Project – 10 -Sonic Sketch

For this project, because of the weather changes recently, I was inspired to have users interact with the image and listen to different sound effects of weather. When the user clicks on different images, they can expect to hear each sound, including sounds that relate to thunder, wind, rain, as well as sounds you can hear on sunny days. I enjoyed playing around with different sound files to match with images, but it was very challenging getting the sound files to load properly.

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sunny.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(600, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/4 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.mp3");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/wind.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

sketch

///Lauren Park
//Section D
//ljpark@andrew.cmu.edu
//Project10

//initialize sound variables
var sunnysound;
var rainsound;
var thundersound;
var windsound;

//initialize image variables
var simg;
var rimg;
var timg;
var wimg;

function preload() {
//load sound files
  sunnysound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/sunny.wav");
  rainsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/rain-1.wav");
  thundersound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/10/thunder-1.wav");
  windsound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jasmine.wav");
  
//load images
  simg = loadImage("https://i.imgur.com/WLnRwEY.jpg");
  rimg = loadImage("https://i.imgur.com/bsxGA4h.jpg");
  timg = loadImage("https://i.imgur.com/Ovyq4IM.jpg");
  wimg = loadImage("https://i.imgur.com/YWkwAGq.jpg");
  
  
}
function setup() {
  createCanvas(500, 500);
  useSound();
}
function soundSetup() {
  sunnysound.setVolume(0.5);
  rainsound.setVolume(0.5);
  thundersound.setVolume(0.3);
  windsound.setVolume(0.3);

}

function draw() {
  background(0);
//position images within canvas
    image(simg, width/2 , 0, simg.width/2, simg.height/1.5);
    image(rimg, 0, 0, rimg.width/5, rimg.height/2);
    image(timg, -3, height/2, timg.width/2, timg.height/2);
    image(wimg, width/2 + 6, height/2, wimg.width/1.5 , wimg.height/1.5);
}

function mousePressed() {
//when mouse presses image, sound will trigger until the image is pressed again to pause
  if (mouseX < simg.width/2 & mouseY < simg.height/1.5) {
        if(sunnysound.isLooping()){
            sunnysound.pause();
        } else {
        sunnysoundound.loop();
      }
  }

  if (mouseX < rimg.width/5 & mouseY < rimg.height/2) {
       if(rainsound.isLooping()){
            rainsound.pause();
        } else {
        rainsound.loop();
      }  
  }

  if (mouseX < timg.width/2 & mouseY < timg.height/2) {
      if(thundersound.isLooping()){
        thundersound.pause();
        } else {
        thundersound.loop();
      }
  }

 if (mouseX < wimg.width/1.5 & mouseY < wimg.height/1.5) {
      if(windsound.isLooping()){
        windsound.pause();
        } else {
        windsound.loop();
      }
  }
}

Yoshi Torralva-Project-10-Sonic-Sketch

sketch

//Yoshi Torralva
//yrt@andrew.cmu.edu
//Section E
//Project-10-Sonic-Sketch
var gOpen;
var eOpen;
var dOpen;
var aOpen;

function preload() {
    // call loadImage() and loadSound() for all media files here
    gOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/gstring.wav");
    eOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/estring.wav");
    dOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dstring.wav");
    aOpen = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/astring.wav");
}
function setup() {
    createCanvas(480, 480);
    useSound();
}
function soundSetup() {
    //adjusting the volume
    //lowering a and e as they are higher notes
    gOpen.setVolume(1);
    eOpen.setVolume(0.1);
    dOpen.setVolume(1);
    aOpen.setVolume(0.2);

}


function draw() {
    // you can replace any of this with your own code:
    background(245, 229, 215);
    noStroke();
    //violin body
    fill(150, 74, 12);
    ellipse(width/2, 400, 400, 400);
    fill(245, 229, 215);
    ellipse(50, 525, 120, 200);
    fill(245, 229, 215);
    ellipse(430, 525, 120, 200);
    //violin finger board
    fill(0);
    rectMode(CENTER);
    rect(240, 0, 100, 800);
    //strings
    fill(61, 51, 42);
    rectMode(CORNER);
    rect(210, 0, 4, 480);
    rect(230, 0, 4, 480);
    rect(250, 0, 4, 480);
    rect(270, 0, 4, 480);
    //violin bow
    //visual indicator to show over the strings 
    rectMode(CENTER);
    fill(51, 28, 9);
    rect(mouseX, mouseY, 480, 20);
    //creating constraints for start and stop of each string
    //slight overlap between some to have better transitions
    //using start and stop commands to the strings
    if(mouseX > 200 & mouseX < 225) {
        gOpen.play();
        }else{ gOpen.stop();
    }
    if(mouseX > 220 & mouseX < 240) {
        dOpen.play();
        }else{ dOpen.stop();
    }
    if(mouseX > 240 & mouseX < 265) {
        aOpen.play();
        }else{ aOpen.stop();
    }
    if(mouseX > 265 & mouseX < 280) {
        eOpen.play();
        }else{ eOpen.stop();
    }

}

With this project using sound, I wanted to create an instrument. So, I decided to choose a violin. In this project, I represent the violin in a simple manner and have it close up. I initiate the sound of open G, D, A, and E strings by the mouseX position. When the mouseX position is not in bounds of the parameters, the sound stops. Slight overlaps in the parameters are used to create better sounding transitions between open strings.

Margot Gersing – Project 10

sketch

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


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

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

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

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

var nPoints = 100;

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

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

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

}

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

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

}

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

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

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

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

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

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

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

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

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

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


function mousePressed(){

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

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

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

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

}

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