​

let x_pos;

let y_pos;

let a_size = 40;

​

var total = 16;

var smoothing = 0.7;

​

function toggleSong() {

  if (song.isPlaying()) {

    song.pause();

  } else {

    song.play();

  }

}

​

function preload() {

  // song = loadSound('09 One Armed Scissor 3.m4a');

  song = loadSound('01 Overture.m4a');

​

}

​

function setup() {

  colorMode(HSB);

  createCanvas(400, 400);

  song.play();

  fft = new p5.FFT(smoothing, total);

  create_ui();

}

​

function draw() {

  background(0);

​

  //   var spectrum = fft.analyze();

​

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

  //     // var spec2 = spectrum[i];

  //     // var col = map(spec2, 0, 255, 0, 360)

  //     var col = map(spectrum[3], 0, 255, 0, 360)

  //     noStroke();

  // fill(spectrum);

  // fill(col,100,100);

  // fill(col,100,100);

​

  for (y_pos = 0; y_pos <= height; y_pos += a_size * 1.5) {

    for (x_pos = 0; x_pos <= width; x_pos += a_size * 1.5) {

​

      var spectrum = fft.analyze();

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

        // var spec2 = spectrum[i];

        // var col = map(spec2, 0, 255, 0, 360)

        var col = map(spectrum[3], 0, 255, 0, 360)

​

        noStroke();

        fill(col, 100, 100);

​

        rect(x_pos, y_pos, a_size, a_size);

      }

    }

  }

}