P5.Sound Audio Visualisation V4

// Ideas:

// - Beat detection

// - size/ colour changing on pitch/ loudness/ frequency

// - multiple circles

// -  Y movement on pitch

​

let fft;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let mic = new p5.AudioIn();

  mic.start();  

  fft = new p5.FFT();

  fft.setInput(mic);

}

​

function draw(){

  background(0, 10);

  fft.analyze(); //Analyse the audio input

  /*  getEnergy() accepts:

  - Frequency (in Hz)

  - "bass", "lowMid", "mid", "highMid", "treble"

  Returns a range between 0 (no volume) and 255 (maximum volume).*/

  noStroke()

  // Balls that change size depending on energy

  fill("#8C271E")

  const bassEnergy = fft.getEnergy("bass");

  circle(200, 750, bassEnergy * 4); 

  fill("#064789")

  const midEnergy = fft.getEnergy("mid");

  circle(450, 450, midEnergy * 4);

  fill("#DAFF7D")

  const trebleEnergy = fft.getEnergy("treble");

  circle(600, 300, trebleEnergy * 4);

  stroke(255)

  line(720, 0, 720, windowHeight)

  // Balls that rise/ sink depending on energy

  noStroke()

  fill("#8C271E")

  const bassEnergyHeight = fft.getEnergy("bass");

  circle(850, bassEnergyHeight *(windowHeight/255), 30); 

  fill("#5941A9")

  const midEnergyHeight = fft.getEnergy("mid")

  circle(800, midEnergyHeight *(windowHeight/255), 30)

  fill("#DAFF7D")

  const trebleEnergyHeight = fft.getEnergy("treble");

  circle(900, trebleEnergyHeight *(windowHeight/255), 30); 

​

}

​

​