Lab Week 11

The goal of this lab is to create sounds that are driven by events in your animation.

This lab has 2 tasks:

Task A. Use continuous sounds with continuous control, e.g. use a particle’s height or velocity to control the pitch or amplitude of a continuous tone. If you have swarms of particles, you can have swarms of tones.

Task B. Use sound files and “trigger” them when events take place in an animation. You must put sound files containing the sounds in your project directory and use a local server, as with images. You can start playing a sound when some event happens, e.g. a particle bounces off the wall or collides with an object.

Task A. Continuous control of synthesized sound.

1. Start with any animation.
   • Use your own sketch, or
   • Use a class example from Notes pages, or
   • Modify a sketch or class example, or
   • Use the sketch of a bouncing ball below.

   sketch

   // bouncing ball example
   
   var x, y, dx, dy;
   var r = 30; // radius
   var g = 0.1; // gravity
   
   function setup() {
       createCanvas(400, 400);
       x = 200;
       y = 40;
       dx = 0;
       dy = 0;
   }
   
   function draw() {
       background(200, 220, 250);
       fill(0, 250, 0);
       ellipse(x, y, r, r);
       x = x + dx;
       y = y + dy;
       var travel_since_bounce = y - (height - r / 2);
       if (travel_since_bounce > 0) {
           // after bounce we should have gone in the other direction
           // so undo travel and travel in the opposite direction,
           // therefore we need to subtract travel * 2 from y
           y = y - travel_since_bounce * 2;
           dy = -dy; // change direction
       }
       dy = dy + g; // gravity
   }
   

2. Copy index.html into your project directory from template-all.zip. (You must use template-all.zip because template-p5only.zip does not contain functions for sound.
3. Add sounds to the animation. Here are some techniques:
   
   Using sound synthesis

   JavaScript

   // in setup, you can start one or more tones (oscillators): myOsc = new p5.Oscillator(); myOsc.setType('sine'); // frequency should be (roughly) between 200 and 2000. You can hear // down to 20, but your laptop speakers will not put out much sound below // 200. You can hear up to 20,000 but 2000 is already very high in terms of // musical pitch. myOsc.freq(800); myOsc.start(); // to change the amplitude (how load) or frequency (pitch), you can update // the oscillator from within draw() or anywhere: myOsc.amp(x); // where 0 <= x <= 1 myOsc.freq(f); // where 200 <= f <= 2000 (recommended) // A simple way to make “pings” that die away is set the variable amp to 1 to start // the “ping.” Each draw, do amp *= 0.95; myOsc.amp(amp); This will // cause the “ping” to die away. Use smaller factors to fade away faster, etc.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

   // in setup, you can start one or more tones (oscillators): myOsc = new p5.Oscillator(); myOsc.setType('sine'); // frequency should be (roughly) between 200 and 2000. You can hear // down to 20, but your laptop speakers will not put out much sound below // 200. You can hear up to 20,000 but 2000 is already very high in terms of // musical pitch. myOsc.freq(800); myOsc.start();   // to change the amplitude (how load) or frequency (pitch), you can update // the oscillator from within draw() or anywhere: myOsc.amp(x); // where 0 <= x <= 1 myOsc.freq(f); // where 200 <= f <= 2000 (recommended)   // A simple way to make “pings” that die away is set the variable amp to 1 to start // the “ping.” Each draw, do amp *= 0.95; myOsc.amp(amp); This will // cause the “ping” to die away. Use smaller factors to fade away faster, etc.

Task B. Triggering sound file playback.

1. As with Task A, start with any animation.
2. Set up a server and test to make sure you can load your sketch from your local server:
   • Open a Terminal in OS X or a command window (cmd) in Windows.
   • Change your current directory to the directory you want to serve:

     Type cd path-to-your-directory

   • Type in Terminal:
     python -m SimpleHTTPServer

     Or if you are using Python 3, type:
     python -m http.server

   • Visit the URL http://localhost:8000 in your browser to test your sketch.
   • You can exit the server by typing Control-C in the window where you started it.
3. Find or make a sound effect.
   • Get a sound from the web, e.g. http://freesound.org, or
   • Make your own sound (it’s easy to record with Audacity).
4. Add/test sound file playback (e.g. play a “boing” when something bounces).
   
   Sound from file

   JavaScript

   // each sound should be preloaded into a variable from a file. You will need // a local server to load files (just like images): function preload() { mySnd = loadSound("samplefile.wav"); mySnd.setVolume(0.5); } // to play the sound from within draw() or anywhere: mySnd.play()</li>

   1 2 3 4 5 6 7 8

   // each sound should be preloaded into a variable from a file. You will need // a local server to load files (just like images): function preload() {     mySnd = loadSound("samplefile.wav");     mySnd.setVolume(0.5); } // to play the sound from within draw() or anywhere: mySnd.play()</li>

Have fun!