​

// Reference: https://archive.org/details/DigitalHarmony_201611/page/n1/mode/2up

// Context: https://rtp.media.mit.edu/

​

function setup() { 

  createCanvas(600, 1050);

  noFill();

  blendMode(ADD); // nice color trick!

​

  // start FFT from microphone

  mic = new p5.AudioIn();

  mic.start();

  fft = new p5.FFT(0.7, 1024/8); // only low frequencies

  fft.setInput(mic);

}

​

function draw() {

  var sineCount = 13;

  clear();

  background(0);

  strokeWeight(3);

​

  let spectrum = fft.analyze();

  let bins = [];

  let step = int((spectrum.length/sineCount)/4);

​

  for (i = 0; i < sineCount; i++) {

    // pack mic spectrum in frequency bands

    bins[i] = 0;

    for (j = 1; j < step; j+=2) {

      bins[i] += spectrum[i*step + j];

    }

    bins[i] = map(bins[i], 0, 255*step, 0, 1);

​

    // use color wheel

    colorMode(HSB, sineCount);

    c = color(i, sineCount, sineCount/2);

    stroke(c);

​

    // draw the sine waves

    drawSine(sineCount-i, bins[i]);

  }

}

​

function drawSine(fac, amp) {

  let outOfScreenDirtyTrick = 999;

  amp = 1.9*fac/(amp*8); // use frequency to adapt amplitude

  beginShape();

  vertex(width+outOfScreenDirtyTrick, -outOfScreenDirtyTrick);

​

  for(y = 0; y < height; y++){

    let freq = map(y , 0,height , 0,TWO_PI);

    let x = map(sin(freq * fac), -amp,amp, 0,width);

    vertex(x, y);

  }

  vertex(width+outOfScreenDirtyTrick, height+outOfScreenDirtyTrick);

  endShape();

}