inspiring visualisations

• https://www.uberviz.io/viz/loop/ (js, three.js) (warning: flashing images!)

Resource:

• visualising music with p5

  Videos

  17.9: Sound Visualization: Graphing Amplitude - p5.js Sound Tutorial

  17.11: Sound Visualization: Frequency Analysis with FFT - p5.js Sound Tutorial

example sketches:

• simple bar graph of freq: https://openprocessing.org/sketch/1225045
  • 2 colour lerp: https://openprocessing.org/sketch/1225050
• amp over time

minimal code

//Note: this code requires not only the p5.js library but the p5.js sound library, too.

let fft;

function setup() {
  createCanvas(windowWidth, windowHeight);
	
	//boilerplate audio analysis setup
	let mic = new p5.AudioIn();
  mic.start();  
	fft = new p5.FFT();
  fft.setInput(mic);
}

function draw(){
  background(0, 10);
	fft.analyze(); // Compute the energy levels for each frequency band.
	const energy = fft.getEnergy("treble");
	circle(300, 300, energy * 2);
}

some great dynamic music for visualisation

• https://soundcloud.com/cubesato-music

common errors

• Uncaught TypeError: p5.AudioIn is not a constructor - import the p5.sound library
• switch on the speaker icon on open processing to enable sound

cheat sheet

• first, install the p5.sound (with a script tag, or in openprocessing in settings:Libraries)

//setup:
let mic = new p5.AudioIn();
mic.start();
fft = new p5.FFT();
fft.setInput(mic);

//per frame, e.g. in p5.js draw() function:
fft.analyze();
// for each frequency of interest
  const level = fft.getEnergy(freq);
  //do something with level (colour / size)