FRI | Sound, Sound Visualizations

FRI | Sound, Sound Visualizations

  • September 27, 2024
  • 9:15–12:00
  • Room 2420 (Marsio)

Inspiration #

Images continued #

Note that we did not manage to cover all of the topics yesterday about images and video, so we first start from Thursday’s page today.

New p5js functions that we are going to need today #

These functions are called once when you either press a key on your keyboard or a button on your mouse/touchpad. This is often more desired functionality compared to the keyIsPressed and mouseIsPressed system variables that we have been using.

lerp() is a really useful function that is used to intepolate between two values. Use it to smooth audio input values or to create laggy or smoothed movements.

lerpColor is similar but works with colors instead of numbers.

Download example files #

Download the foghorn sample

p5js Sound Library #

Sound library reference

The p5.js sound library allows you to:

  • load, play and manipulate sound files
  • synthesize sounds
  • use audio filters
  • get audio input from microphones and other input devices
  • analyze sound

In the p5.js editor, the sound library is loaded by default so you can just start using it.

Examples #

There seems to be something wrong with the sound library on some browsers. Use Chrome to make sure all theses examples work.

Example: Play a SoundFile #

Loading a sound file is very similar to loading images. It’s recommended to load the file using the preload function so that it gets loaded before you do anything else in your code.

let sample;

function preload(){
  sample = loadSound("data/foghorn.wav");
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}
function mousePressed(){
  sample.play();
}

Example done in class #

This is the code we made during the class. I just changed the soundfile to a different one and added some small adjustments.

Example: Mic Input #

Note that the mic input is not working in Firefox, use Chrome or Safari for example. You also need to give your browser the permission to use the sound input when it asks for it. 
let mic;
let loudness;
let s=10;
let sTarget;

function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn();
  mic.start();
  textAlign(CENTER);
}

function draw() {
  background(220);
  
  // get the audio level
  loudness = mic.getLevel();
  
  // map the value to something more suitable for the size
  sTarget = map(loudness,0,1,10,100);
  // use lerp to create a smooth transition
  s = lerp(s,sTarget,0.1);
  
  circle(width/2,height/2,s);
  text(loudness,width/2,20);
}

function mousePressed(){
  userStartAudio();
}

The userStartAudio is required since modern browsers require the user to activaly start audio playback and input with a specific action. In the p5.js examples, you will probably see it done this way:

function setup(){
  let cnv = createCanvas(100, 100);
  cnv.mousePressed(userStartAudio);
  mic = new p5.AudioIn();
  mic.start();
}

I used the mousePressed() function since we have been talking about in the class. Both ways will work.

Example: Advanced #

The sketch below uses a folder of images. You can download this .zip file: Chromatrope Images

Homework #

Create a sketch that uses some of the following:

  • images
  • video camera input
  • sound files
  • mic input
  • mouse and/or keyboard interaction

NOTE! to make the sound library work in OpenProcessing, you should turn on the toggle for the sound library in the settings.

You can keep this quite simple, I just want you to try and explore.

Add your sketch to our OpenProcessing class.

NOTE! to make the sound library work in OpenProcessing, you should turn on the toggle for the sound library in the settings.