Media

ADDING SOUND

Below are the steps for adding sound to your project or your can watch the first video here (but it uses a different editor so the process of adding the sound file might be a little different).   They are very similar to the steps that we will take next week for adding the kinect to your project.

var mySound;
 
function preload() {
 mySound = loadSound('Taylor Swift - Shake It Off.mp3');
 //first you have to add a file (click to the left of here) by this name
}
 
function setup() {
 mySound.setVolume(0.1);
 mySound.play();
}
  1. Put a sound file in your sketch folder.
  2. Here is an mp3 which your can control click and “save link as” to download if you don’t have one of your own.  It will be more fun to use your own sound files.
  3. Make a variable at the top to hold your sound.
  4. Make a new function called “preload” which executes even before setup to load the sound file you have put in your sketch folder into that variable.
  5. In draw loop adjust something about the sound.  In this example we are adjusting the volume (amplitude) but you can try other things like rate() which is really fun. See if you can integrate some of this into something you have made.  You can also create sounds from scratch and analyze sounds  with the sound library.

 

var mySound;

function preload() {
 mySound = loadSound('Taylor Swift - Shake It Off.mp3');
 //first you have to add a file (click to the left of here) by this name
}

function setup() {
 createCanvas(400, 400);
 mySound.loop();
 mySound.setVolume(0);
}

function draw() {
 background(255);
 ellipse(width / 2, height / 2, 50, 50);
 text("drag to adjust volume", 100, 100);
}

//functions called by p5 when, you guessed it, when mouse is dragged
function mouseDragged() {
 var distanceFromCenter = dist(mouseX, mouseY, width / 2, height / 2);
 //dist is a function that get the distance between two points
 var volume = map(distanceFromCenter, 0, 200, 1, 0);
 //change the numbers from a range 0-200(pixels) to 1-0(volue)
 mySound.setVolume(volume);
}

In Action

code
ADDING IMAGES

Follow all the same instructions for adding sounds except use video files.   Then use the image command to put it on the screen.  Here is some code for having a duck follow your mouse.