​

let meter;

let waveform;

let palette = ["#ff00c1","#9600ff","#4900ff","#00b8ff"];

let numBins = 1024;

let angle = 0;

​

function rotateCamera() {

  translate(cos(angle), sin(angle));

  rotateY(angle);

  camera(0, -300, (height*0.6) / tan(PI*30.0 / 180.0), 0, 0, 0, 0, 1, 0);

  rotateY(-angle);

  translate(-cos(angle), -sin(angle));

}

​

function setupAnalyzers() {

  waveform = new Tone.Waveform(numBins);

  player.connect(waveform);

  meter = new Tone.Meter();

  player.connect(meter);

}

​

function preload() {

  player = new Tone.Player("arulo-down-on-you.mp3", setupAnalyzers)

    .toDestination();

  player.autostart = true;

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

}

​

function draw() {

  if (!player.loaded) return;

  let level = meter.getValue();

  let window = waveform.getValue();

  let lightColor = map(level, -37, 8, 50, 150);

  let bg = map(level, -37, 8, 50, 255);

  background(0, bg, bg);

  ambientLight(lightColor);

  angle = millis() / 2000;

  // angle = 0

  rotateCamera();

  directionalLight(color("#ff00c1"), cos(angle), 1, sin(angle));

  directionalLight(color("#00b8ff"), cos(angle+PI/2), 1, sin(angle+PI/2));

  directionalLight(color("#9600ff"), cos(angle+PI), 1, sin(angle+PI));

  // 1024 = 32*32

  for (let i = 0; i < numBins; i++) {

    let x = i % 32 - 15.5;

    let z = int(i / 32) - 15.5;

    push();

      let power = map(level, -37, 0, 1, 1.25);

      let xAmp = x < 0 ? -1*pow(abs(x), power) : pow(x, power);

      let zAmp = z < 0 ? -1*pow(abs(z), power) : pow(z, power);

      let boxHeight = map(window[i], 0, 1, 0, 300);

      translate(xAmp*10, boxHeight, zAmp*10);

      specularMaterial("#aaa");

      box(10, boxHeight/2, 10);

    pop();

  }

}

​