Audio and interaction

Lecture slides

Visualizing audio

FFT analysis example

let fft, cx, cy;

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

function setup() {
  createCanvas(windowWidth, windowHeight);

  fft = new p5.FFT();

  cx = width / 2;
  cy = height / 2;

function draw() {
  let bass_r = map(fft.getEnergy('bass'), 0, 255, 100, 300);
  let mid_r = map(fft.getEnergy('mid'), 0, 255, 100, 300);
  let treble_r = map(fft.getEnergy('highMid'), 0, 255, 10, 300);

  ellipse(cx, cy, bass_r);
  ellipse(cx, cy, mid_r);
  ellipse(cx, cy, treble_r);

Saving frames, using keyboard and mouse as input


Option 1:

Use FFT analysis for an audio reactive composition. You can use assignments 3 or 5 as a starting point and use audio input for animating the compositions.

Option 2:

Create a spectrogram using p5js. The example in the lecture slides shows a method of calculating the spectre of audio in real time. For this assignment, analyse a short duration of audio and display time on x-axis, frequency on y-axis and amplitude as color. You can use the example in the lecture slides as a starting point.