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

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

Leave a Reply Cancel reply