Week 9 - Working with sound and video

Today

  • check-in
  • warm-up! - camera apps!
  • working with sound and video
  • codevember

Warm-up

References

  • tint in the p5.js reference
  • Bonus: scanner camera scanner effect

Generative Design

Sound

So far, we have only been using programming to create visual artworks. But p5.js also features a sound library, called p5Sound that allows us to work with sound in our sketches. Sound adds an extra dimension, potentially helping to place us more fully in an immersive experience. It can also serve just as accompaniment, or as a fundamental part of our work.

Working with sound is quite similar to the process of working with imported images.

  1. Load the sound into the editor
  2. Create a global variable to hold the sound file.
  3. Load the sound file in your preload function (or use a callback function that runs only after your sound loads).
  4. NEW: begin playback of that particular sound file somewhere using .play().
var mySound;

function preload() {
  mySound = loadSound('doorbell.mp3');
}

function setup() {
  mySound.play();
}

We don’t play mySound.play() in our draw() function because we only want the sound to play once. If we place it in draw, it will trigger a new playing of the sound every time the draw() function is called.

A few other sound-specific methods:

  • isLoaded() will return the boolean true if the sound file has loaded already.
  • isPlaying() will return true if the sound file is currently playing. This is really useful for toggling sound on and off. Use an if statement to detect if a sound file is playing, and then choose to play it if it’s currently false.
  • setVolume() between 0.0 (silence) and 1.0 (full volume)
  • .play() starts playback of a specific sound file
  • .stop() does what you think it does
  • .loop() begins looping playback of a soundfile
  • .pause() pauses the file. Start it again with .play()

playMode

And lastly, an important one:

  • playMode(), which has three potential arguments, restart or sustain or untilDone. By default, the playMode is sustain. In sustain mode, each time play is called, the program will play the full sound file from start to finish, which means any previously-started playing of the same sound file will be heard simultaneously until it has ended playing. In restart mode, if the sound file has already been playing and you call play on that sound again, it will stop the previous and start playing the soundfile from the beginning again. Lastly, if playMode is untilDone and you call play on a soundfile, it will only start playback if it’s not currently playing.

  • These and additional sound file commands/methods can be found in the p5Sound reference.

//example of toggling a song on or off when you press the mouse
var song;

function preload(){
  song = loadSound('freebird.mp3');
}

function setup() {
  createCanvas(720, 200);
  text("click to play",50,50);
}

function mousePressed() {
  if (song.isPlaying()) { //remember, this is the same as writing if (song.isPlaying() == true){ };
    // .isPlaying() returns a boolean true in this instance
    song.stop(); //so stop playing it
  } else { //otherwise, it wasn't playing
    song.play(); //so start playing it!
  }
}
Note:

Web browsers have just recently begun to be set to ignore autoplaying sound and video on the web, even if we’ve specified that we want a sound file to start playing in the setup(). They have done this to try to curb on the amount of auto-playing sound that plagued the internet, particularly advertisements. To play audio going forward, you’ll have to have a user click first.

To get around this, many programmers are now adding a button or instructions to ‘click to play’ and then have your [[audio]] start playing once the user has clicked in the window.

Simple example here

Video

Loading video works almost entirely the same as loading audio. Both are called ‘media elements’ in a web browser.

  1. Load the file in your code editor
  2. Create a global variable to hold the media file
  3. Preload it in that variable in the preload (or if you load it somewhere else, you’ll need to add a callback function to run after it successfully loads)
  4. You can play the video with play
var vid;
function preload() {
  vid = createVideo('toothy.mp4');
}

// This function is called when the video loads
function setup() {
  vid.play();
}

example code

  • Note: To position the video element on the page, you specify position with .position(x,y);.
  • More info on createVideo options.

Generative Text

November is National Novel Generating Month (abbreviated: NaNoGenMo), a month where computational poets, algorithmic artists, and bot-makers rejoice.

The goal of NaNoGenMo is to create an algorithmic novel of 50,000 words or more.

We will start by looking at Mad Libs and understanding the basics of how these work. From here we will proceed to more advanced methods of generativity.

We will use the same skills we’ve learned previously to store arrays of words, then pick randomly to generate new fill-in-the-blank texts. We do this with a bit of randomness.

For homework, please view the online exhibition Taper 5 and some of the previous editions (1 through 4). Taper is an online literary journal for computational poetry and literary art published twice yearly by Bad Quarto. This is the 5th edition since it started.

Read:

About Taper.

Review the work.

Recommendations: for the pool players at the Golden Shovel by Lillian-Yvonne Bertram - interactive, click the button from Taper #1

God by Milton Laufer, from Taper #1

US by Nick Montfort, from Taper #1

A Storm in 2k by J.R. Carpenter

Whalefall by Katya Ilonka Gero, from Taper #5

Pope Lost Hope by Yohana Joseph Waliya, from Taper #5

everything gets eaten by Eirian Friedkin, from Taper #3 –Think about: How does this one work? How would you code this?

Additional bonus works:

((((0)))) by Eugenio Tisselli, from Taper #4

your balcony, maybe five years ago by kit buckley, from Taper #3

Rules of Three by Ross Goodwin, uses the camera!, from Taper #3

Read: We asked a computational poet if machines will ever replace human writers - on Nick Montfort, founder of Taper

Method:

Slow down. Find a calm time. Do you need some background music? Are you comfortable? Read the selections from Taper above. Read about Taper. Read the article about Nick Montfort, founder of Taper. Are there ones you like? Think about how some of these are made. If you are completely uncertain, look at everything gets eaten linked above. That one you should definitely be able to figure out an idea of how the code works.

After reading (playing?) all of the above computational works, now design 1 or 2 experimental computational poems. You are not being asked to code them at this time.

  • What is the title?
  • What is the idea?
  • What list of words will you need?
  • How will the program work?
  • What will it look like?