somewhere here

let somewhere;
let t = 0;
let exist = [];
let waves = [];
let playBool = false;
let spectrum = [];

function preload() {
  somewhere = loadSound("/assets/hexagonal.mp3");
}

function setup() {
  userStartAudio();
  createCanvas(windowWidth, windowHeight);
  describe(description);
  fft = new p5.FFT();
  spectrum = fft.analyze();
  waves = fft.waveform();
  for (let i = 0; i < spectrum.length; i++) {
    exist.push(new ChannelsOfFlowingThought(i, (width / 25) * 10));
  }
}

function draw() {
  background(40, 50, 60, 3);
  translate(width / 2, height / 2);
  t += 0.001;
  if (playBool) {
    if (!somewhere.isPlaying()) {
      somewhere.play();
    }
  } else {
    somewhere.pause();
  }
  becoming();
  push();
  xS = 1 + 0.5 * cos(t);
  yS = 1 + 0.5 * cos(t / 4);
  scale(xS, yS);
  for (let i = 0; i < exist.length; i++) {
    exist[i].reveal();
  }
  pop();

  initiate();
}

function becoming() {
  spectrum = fft.analyze();
  waves = fft.waveform();
  for (let i = 0; i < spectrum.length; i += 1) {
    for (let j = 0; j < 7; j++) {
      push();
      noStroke();
      rotate((j * 3120) / 7);
      exist[i].incrementInTime(12 * cos(spectrum[i] / 12 - i), waves[i] * 100);
      pop();
    }
  }
}

class ChannelsOfFlowingThought {
  constructor(theta, r) {
    this.theta = theta;
    this.r = r;
    this.r1 = r;
    this.d = 0.1;
    this.s = 1;
    this.a = 0;
    this.b = 0;
  }
  reveal() {
    let f =
      55 * abs(cos(this.d + this.r + this.a - t / 3)) + 40 * cos(this.a / 100);
    let g = 120 + 50 * cos(t);
    stroke(g / 2 + f * sin(this.a + t / 1000), g + f, 95 + f, 10);
    strokeWeight(0.2 + this.b / 10);
    for (let i = 0; i < 12; i++) {
      push();
      rotate((i * PI) / 6);
      line(
        this.s * this.r * cos(PI / 3 + t + this.theta / 12),
        this.s * this.r * sin(PI / 3 + t + this.theta / 12),
        this.s * this.r * cos(t + this.theta / 12) -
          this.s * this.r * sin(t / 4 + this.theta / 12),
        this.s * this.r * sin(t + this.theta / 12)
      );
      pop();
    }
  }
  incrementInTime(a, b) {
    this.s = cos(a / 15 + cos(b / 200));
    this.d = b;
    this.r = 20 + abs(this.r1 + 20 * cos(b * this.a));
    this.a = a;
    this.b = b;
  }
}

function mousePressed() {
  if (getAudioContext().state !== "running") {
    getAudioContext().resume();
  }
  background(50, 60, 70);
  playBool = !playBool;

  return false;
}

function touchStarted() {
  playBool = !playBool;
  background(50, 120, 70);
  return false;
}
let description =
  "lines drawn sketchely in rotational symmetry that change, pulse, rotate, and move with music once started. the aspect changes over time to almost look like a galaxy spinning - there is blur that gives an almost water effect with the lines. It's a mandala that changes with sound with 12 rotations. ";

function initiate() {
  if (!playBool) {
    push();
    fill(50, 60, 70);
    translate(0, height / 2 - 50);
    triangle(-20, -20, -20, 20, 20, 0);
    pop();
  }
}