var rad = 10;

var angle = 0;

var spacing = 20;

var xDim = 10;

var yDim = 10;

var r, g, b;

var design;

var x, y;

var duration;

var transition1 = 13.5;

var spacingChange = 0.15;

var angleChange = 0.6;

​

var fft;

var song;

var button;

var volhistory = [];

​

var w = 100;

var hyp;

​

function toggleSong() {

  if (song.isPlaying()) {

    song.pause();

  } else {

    song.play();

  }

}

​

function preload() {

  song = loadSound('Silver Scrapes.mp3');

}

​

function setup() {

  createCanvas(400, 400, WEBGL);

  background(0)

  design = createGraphics(400, 400);

  button = createButton('Play/Pause');

  button.mousePressed(toggleSong);

  song.play();

  //amp = new p5.Amplitude();

  fft = new p5.FFT(0.5, 64);

  colorMode(HSB);

​

  hyp = sqrt(sq(w) + sq(w));

  a1 = 0;

  a2 = 0;

  a3 = 0;

  a4 = 0;

}

​

function draw() {

  background(0);

​

  if (song.currentTime() > transition1) {

    visualizer();

  }

​

  if (song.isPlaying()) {

    swirl();

  }

  cubes();

​

}

​

function swirl() {

​

  push();

  colorMode(RGB);

  x = rad + spacing * cos(angle);

  y = rad + spacing * sin(angle);

​

  r = map(sin(frameCount / 100), -1, 1, 0, 255);

  g = map(cos(frameCount / 100), -1, 1, 0, 255);

  b = map(sin(frameCount / 150), -1, 1, 0, 255);

​

  design.stroke(r, g, b);

  design.fill(r, g, b);

  design.ellipse(x + 200, y + 200, xDim, yDim);

​

  if (x < 2 * hyp) {

    spacing += spacingChange;

    angle += angleChange;

  } else {

    spacing = 20;

    angle = 0;

  }

​

  pop();

}

​

function cubes() {

​

  push();

  noStroke();

​

  texture(design);

​

  if (song.currentTime() < transition1) {

    duration = song.currentTime();

  } else {

    translate((width / 4) * cos(song.currentTime() - duration), (height / 3) * sin(song.currentTime() - duration), (width / 2) * sin(song.currentTime() - duration));

  }

​

  rotateX(a1);

  rotateY(a1);

  rotateZ(a1);

​

  box(w);

​

  a1 += 0.003;

​

  pop();

​

  push();

  noStroke();

​

  texture(design);

​

  if (song.currentTime() < transition1) {

    duration = song.currentTime();

  } else {

    translate((width / 4) * cos((PI / 2) + song.currentTime() - duration), (height / 3) * cos((PI / 2) + song.currentTime() - duration), (width / 2) * sin((PI / 2) + song.currentTime() - duration));

  }

​

  rotateX(a2);

  rotateY(a2);

  rotateZ(a2);

​

  box(w);

​

  a2 += 0.003;

​

  pop();

​

  push();

  noStroke();

​

  texture(design);

​

  if (song.currentTime() < transition1) {

    duration = song.currentTime();

  } else {

    translate((width / 4) * cos(PI + song.currentTime() - duration), (height / 3) * sin(PI + song.currentTime() - duration), (width / 2) * sin(PI + song.currentTime() - duration));

  }

​

  rotateX(a3);

  rotateY(a3);

  rotateZ(a3);

​

  box(w);

​

  a3 += 0.003;

​

  pop();

​

  push();

  noStroke();

​

  texture(design);

​

  if (song.currentTime() < transition1) {

    duration = song.currentTime();

  } else {

    translate((width / 4) * cos((3 * PI / 2) + song.currentTime() - duration), (height / 3) * cos((3 * PI / 2) + song.currentTime() - duration), (width / 2) * sin((3 * PI / 2) + song.currentTime() - duration));

  }

​

  rotateX(a4);

  rotateY(a4);

  rotateZ(a4);

​

  box(w);

​

  a4 += 0.003;

​

  pop();

​

}

​

function visualizer() {

  push();

  colorMode(HSB);

  strokeWeight(2);

​

  var spectrum = fft.analyze();

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

    var angle = map(i, 0, spectrum.length, 0, TWO_PI);

    var amp = spectrum[i];

    var r = map(amp, 0, 256, 40, (width / 2) - 10);

    var x = r * cos(angle);

    var y = r * sin(angle);

    stroke(amp, 255, 255);

    line(0, 0, x, y);

  }

  pop();

​

}

​

function keyReleased() {

  print(key);

​

  if (key == '1') spacingChange += 0.05;

  if (key == '2') spacingChange -= 0.05;

  if (key == '3') angleChange += 0.2;

  if (key == '4') angleChange -= 0.2;

}