Anne Brinich - Sound Visualizations Series (javascript variant)

Sound Visualization v.1.0

The first in my series of audio visualization tools written using p5.js, a Javascript variant. If the embedded window above is not working, please click through to the interactive sketch at: https://www.openprocessing.org/sketch/755040

This code was written with FreddieRa's Audio Tips & Tricks Instructions. I riffed on them for the further visualizations in this series.

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

   //sound input
   mic = new p5.AudioIn()
mic.start();

   //measures amplitude via mic
   amplitude = new p5.Amplitude(0.5);
   amplitude.setInput(mic);

   //auto-levels volume
   amplitude.toggleNormalize(1);

   //generates a spectrum for sound to appear on
   fft = new p5.FFT();
   //tells spectrum to use mic
   mic.connect(fft);

   //higher frequencies than this are sort of useless
   number = 200;
}

function draw() {
   //basics
   background(255);
   noFill()

   //records the spectrum for visualization
   spectrum = fft.analyze()

   //for loop! this shows sound as a series of rectangles
   for (let i = 0; i < number; i++) {
       x = map(i, 0, number, 0.25, 0.75)*width
       y = height/2
       w = (width*0.5)/number
       h = -spectrum[i]
       rect(x, y, w, h)
   }
}

Sound Visualization v.2.0

Attempting to make a more visually-pleasing audio-to-graphics experience, I coded the spectrum to appear in ellipse-form. https://www.openprocessing.org/sketch/755396

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

   mic = new p5.AudioIn()
mic.start();

   amplitude = new p5.Amplitude(0.5);
   amplitude.setInput(mic);


   amplitude.toggleNormalize(1);

   fft = new p5.FFT();
   //tells spectrum to use mic
   mic.connect(fft);

   number = 200;
}

function draw() {
   //basics
   background(100);
   noStroke();

   spectrum = fft.analyze()

   //for loop! this shows sound as a series of very skinny ellipses
   for (let i = 0; i < number; i++) {
       x = map(i, 0, number, 0.25, 0.75)*width
       y = height/2
       w = (width*0.5)/number
       h = -spectrum[i]
       ellipse(x, y, w, h)
   }
}