let freqs = [];

let mic, spectrum;

let freqMap;

​

function setup() {

  createCanvas(innerWidth, 400, WEBGL);

  colorMode(HSB);

  angleMode(DEGREES);

​

  mic = new p5.AudioIn();

  mic.start();

  fft = new p5.FFT();

  fft.setInput(mic);

​

  setInterval(addFreq, 800);

}

​

function draw() {

  background(0);

  translate(0, -100, -200);

  rotateX(-90);

  rotateZ(0);

​

  spectrum = fft.analyze();

​

  for (let f of freqs) {

    f.show();

​

    if (freqs.length > 10) {

      freqs.splice(0, 1);

    }

  }

}

​

function addFreq() {

  f = new Freq();

  freqs.push(f);

}

​

class Freq {

  constructor() {

    this.x = 0;

    this.r = 200;

    // this.y;

    // this.z;

    this.n = [];

​

    for (let i = 0; i < spectrum.length; i++) {

      this.n.push(spectrum[i]);

    }

  }

​

  show() {

    noFill();

    strokeWeight(3);

    beginShape();

    for (let i = 0; i < 360; i += 10) {

      let colMap = map(this.n[i], 0, 255, 145, 0);

      let r = 200;

      let x = this.x + this.r  * sin(i);

      let y = this.r  * cos(i);

      let z = r  * cos(this.n[i]);

      stroke(colMap, 100, 100);

      vertex(x, y, z);

      this.r  += 0.01;

    }

    endShape(CLOSE);

  }

​

}

​