wavy visualisatzion

let sound;

let peaks;

let fft;

let fft_array = [];

let index = 0;

​

function preload() {

  sound = loadSound(" chilly.mp3");

}

​

function setup() {

  cnv = createCanvas(windowWidth, windowHeight, WEBGL);

  background(100);

​

  //cnv.mouseClicked(togglePlay);

  fft = new p5.FFT(false, 256);

  sound.amp(0.2);

​

  sound.loop();

}

​

function draw() {

  background(100);

​

  spectrum = fft.analyze();

  //spectrum = fft.waveform();

  fft_array.unshift(spectrum); // add before 1st element

  if (fft_array.length > 80)

    fft_array.pop(); //remove last element

​

  //fill(255);

  //text(fft_array.length, 20, 20);

  //text(spectrum.length, 20, 40);

​

  noFill();

  stroke(255);

​

  translate(-width/2, height/4);

​

  spectrum_height = 80;

  for (let y = 0; y < fft_array.length; y++) {

    translate(0, 0, -20);

    beginShape();

    for (let i = 0; i < fft_array[y].length/8; i++) {

      let x = map(i, 0, fft_array[y].length/8, 0, width);

      let h = map(fft_array[y][i], 0, 255, 0, spectrum_height);

      vertex(x, h);

    }

    endShape();

  }

  /*

  for (let y = 0; y < fft_array.length; y++) {

    translate(0, 0, -20);

    let w_ = fft_array[y].length/8;

    for (let i = 0; i < fft_array[y].length/8; i++) {

      let x = map(i, 0, fft_array[y].length/8, 0, width);

      let h = map(fft_array[y][i], 0, 255, 0, spectrum_height);

      push();

      ambientMaterial(200);

      translate(x, 0, 0);

      box(w_, h, w_);

      pop();

    }

  }

  */

  /*

    beginShape();

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

      let peak = map(peaks[i], 0, 1, 0, height/2);

      stroke(255);

      noFill();

      //vertex(i, peak);

      curveVertex(i, peak);

    }

    endShape();

  */

​

  /*

  let pos = map(sound.currentTime(), 0, sound.duration(), 0, width);

  stroke(255, 0, 100);

  line(pos, 0, pos, height);

  text(sound.currentTime(), 20, 20);

  */

}