let angleZ = 0;

let angleY = 0;

let angle = 0;

let rad = 0;

let amplitude;

let level;

​

let mySound;

function preload() {

  soundFormats("mp3", "ogg");

  mySound = loadSound("assets/sound.mp3");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  angleMode(DEGREES);

  frameRate(24);

​

  outer = width * 0.1;

​

  // canvas to click on to play

  let cnv = createCanvas(windowWidth, windowHeight);

  cnv.mousePressed(canvasPressed);

​

  amplitude = new p5.Amplitude();

  fft = new p5.FFT(0.8, 32);

}

​

function draw() {

  level = amplitude.getLevel();

​

  spectrum = fft.analyze();

  trebEnergy = fft.getEnergy("treble");

  midEnergy = fft.getEnergy("mid");

  bassEnergy = fft.getEnergy("bass");

​

  background(42);

​

  // for (let i = 0; i < 10; i += 1) {

  //   beamy(i * 20);

  // }

​

  push();

  rotate(-angle / 10);

  // noFill();

  fill(bassEnergy, trebEnergy, midEnergy,)

  strokeWeight(bassEnergy * 0.5);

  stroke(bassEnergy, trebEnergy, midEnergy, 50);

  sphere(100 + (1 + level * 200), 10, 10);

  rad += sin(angle);

​

  pop();

​

  push();

  // translate(-10, 100);

  strokeWeight(0.5);

  stroke(255, 150);

  rotate(angle);

  rotateY(angle);

  // noFill();

  fill(trebEnergy, midEnergy, bassEnergy, 150)

  box(100 + (1 + level * 100), trebEnergy * 2, 100 + sin(angle) * 450);

  rotateY(angle + sin(angle) * 50);

  fill(trebEnergy, midEnergy, bassEnergy, 150);

  box(100 + (1 + level * 100), bassEnergy * 2, 100 + sin(angle) * 450);

  rotateY(angle + sin(angle) * 150);

   fill(bassEnergy, midEnergy, trebEnergy, 150);

  box(100 + (1 + level * 100), midEnergy * 2, 100 + sin(angle) * 450);

  pop();

  angle += 0.5

  angleZ += 0.01;

  angleY += 0.5;

}

​

function beamy(rotation) {

  push();

  rotateZ(angleZ + rotation);

  rotateY(angleY + rotation);

  let randy = random();

  if (randy > 0.8) {

    rotateZ(angleZ - rotation);

  rotateY(angleY - rotation);

    rotateX(angle)

    fill(midEnergy, trebEnergy, bassEnergy, 150);

    strokeWeight(0.5);

    stroke(255, 255, 255, 150);

    box(40, midEnergy * 2, 20);

  } else if (randy > 0.5) {

    rotateZ(angleZ + rotation*2);

  rotateY(angleY + rotation);

    fill(trebEnergy, midEnergy, bassEnergy, 150);

    strokeWeight(1);

    stroke(trebEnergy, midEnergy, bassEnergy, 150);

    box(40, bassEnergy * 2, 20);

  } else if (randy > 0.3) {

    rotateZ(angleZ + rotation);

  rotateY(angleY + rotation*2);

    fill(bassEnergy, midEnergy, trebEnergy, 150);

    strokeWeight(1);

    stroke(trebEnergy, midEnergy, bassEnergy, 150);

    box(40, trebEnergy * 4, 20);

  }

  angleZ += 0.01;

  angleY += 0.5;

  // angleZ += 0;

  // angleY += 0;

  // outer += sin(angle) * 20;

  outer = trebEnergy;

  angle += 0.5;

  pop();

}

​

function canvasPressed() {

  background(255);

  mySound._playing ? mySound.stop() : mySound.play();

}

​