let waveform;

let bgColor = "#00FFFF";

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

let numBins = 32;

let angle;

​

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 setup() {

  createCanvas(400, 400, WEBGL);

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

    .toDestination();

  player.autostart = true;

  // player.autostart = false;

}

​

function draw() {

  if (!player.loaded) return;

  // this is a decibel value, so approx -48 to 0

  // but you can play with the limits, I like -37 to 8

  let level = meter.getValue();

  // this is an array of values from -1 to 1

  let window = waveform.getValue();

  background(bgColor);

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

  ambientLight("#aaa");

  let angle = millis()/1000;

  directionalLight(color(palette[0]), 100*cos(angle), 100*sin(angle), 0);

  directionalLight(color(palette[3]), 100*cos(angle+PI), 100*sin(angle+PI), 0);

  specularMaterial("#aaa");

  noStroke();

  shininess(15);

  window.forEach((sample, index) => {

    let ss = map(sample, 0, 1, 10, 100);

    push();

      translate(index*21-300, ss, 0);

      box(20,ss,20);

    pop();

  });

}

​

​

​

​

​

​

​