Audio and interaction

Lecture slides

https://slides.com/otso_havanto/programming-for-visual-artists-8/embed

Visualizing audio

FFT analysis example

let fft, cx, cy;

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

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

  song.loop();
  fft = new p5.FFT();
  fft.setInput(song);

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

function draw() {
  background(200);
  fft.analyze();
  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

Assignment

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.