console.clear();

const o = {
  tempo: 300
};

const shapes = [];
let elAudio = document.querySelector('audio');
let tl;
let started = false
const colors = ["hsla(278, 100%, 36%, 1)","hsla(263, 60%, 48%, 1)","hsla(239, 53%, 59%, 1)","hsla(213, 64%, 59%, 1)","hsla(203, 69%, 59%, 1)","hsla(194, 73%, 59%, 1)","hsla(188, 70%, 61%, 1)","hsla(180, 66%, 63%, 1)","hsla(171, 80%, 69%, 1)","hsla(163, 100%, 75%, 1)"];
const shadowColors = ["hsla(278, 100%, 57%, 1)","hsla(263, 60%, 69%, 1)","hsla(239, 53%, 80%, 1)","hsla(213, 64%, 80%, 1)","hsla(203, 69%, 80%, 1)","hsla(194, 73%, 80%, 1)","hsla(188, 70%, 82%, 1)","hsla(180, 66%, 84%, 1)","hsla(171, 80%, 90%, 1)","hsla(163, 100%, 96%, 1)"];
const images = {
  square: [],
  circle: [],
  triangle: []
};
let activeColor = 0;

class Square {
  constructor (x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    if (windowWidth < 700) {
      this.size *= 1.4;
    }
    this.r = random(0, TWO_PI);
    this.color = activeColor % colors.length;
    this.shape = random(['square', 'circle', 'triangle']);
    this.o = 1;
    this.v = {
      x: random(0.2, 3) * random([-1, 1]),
      y: random(0.3, 3) * random([-1, 1]),
      r: random(-0.02, 0.02)
    }
    activeColor++;
  }
  update () {
    this.x += this.v.x;
    this.y += this.v.y;
    this.r += this.v.r;
  }
  render () {
    translate(this.x, this.y);
    scale(this.size / 100);
    rotate(this.r);
    drawingContext.globalAlpha = this.o;
    image(images[this.shape][this.color], 0, 0);
    resetMatrix();
  }
  isOut () {
    if (this.o <= 0) return true;
    if (this.x < -this.size) return true;
    if (this.x > width + this.size) return true;
    if (this.y < -this.size) return true;
    if (this.y > height + this.size) return true;
    return false;
  }
  split (index) {
    if (this.size < 5) {
      gsap.to(this, {
        o: 0,
        duration: random(1.5, 4),
        delay: random(1, 3)
      });
      return;
    };
    const newSquare = new Square(this.x, this.y, this.size * 0.6);
    this.v.x *= 0.4;
    this.v.y *= 0.4;
    this.v.r *= 0.4;
    newSquare.color = this.color;
    newSquare.shape = this.shape;
    newSquare.v.x *= 0.4;
    newSquare.v.y *= 0.4;
    newSquare.v.r *= 0.4;
    window.requestAnimationFrame(() => {
      shapes.splice(index, 0, newSquare);
    });
    this.size *= 0.6;
  }
}

var req = new XMLHttpRequest();
req.open('GET', 'https://mamboleoo.be/CodePen/random/Cymatics-CobraMelodyLoop9-130BPMAMin.mp3', true);
req.responseType = 'blob';
req.onload = function () {
   if (this.status === 200) {
      const audioBlob = this.response;
      const audio = URL.createObjectURL(audioBlob);
      elAudio.src = audio;
   }
}
req.send();

function setup () {
  createCanvas(windowWidth, windowHeight);
  rectMode(CENTER);
  blendMode(SCREEN);
  timeline();
  createImages();
  gsap.timeline()
    .to('span', {
      opacity: 0,
      duration: 0.5,
      onComplete: () => {
        document.querySelector('span').innerHTML = 'Click to start';
      }
    })
    .to('span', {
      opacity: 1,
      duration: 0.5
    });
}

function createImages () {
  colors.forEach((c, i) => {
    // Squares
    let image = createGraphics(140, 140);
    image.drawingContext.shadowBlur = 20;
    image.drawingContext.shadowColor = shadowColors[i];
    image.noStroke();
    image.fill(c);
    image.square(20, 20, 100);
    images.square.push(image);
    
    // Circles
    image = createGraphics(140, 140);
    image.drawingContext.shadowBlur = 20;
    image.drawingContext.shadowColor = shadowColors[i];
    image.noStroke();
    image.fill(c);
    image.circle(70, 70, 100);
    images.circle.push(image);
    
    // Triangles
    image = createGraphics(140, 140);
    image.drawingContext.shadowBlur = 20;
    image.drawingContext.shadowColor = shadowColors[i];
    const side = 100 / (sqrt(3)/2) / 2;
    image.noStroke();
    image.fill(c);
    image.triangle(20, 20, 120, 20, 70, sqrt(3) / 2 * 100 + 20);
    images.triangle.push(image);
  });
}

function mousePressed () {
  if (req.status === 200 && !started) {
    elAudio.currentTime = 0;
    elAudio.play();
    tl.play();
    document.querySelector('span').remove();
    started = true;
  }
}

function windowResized () {
  resizeCanvas(windowWidth, windowHeight);
}

function timeline () {
  tl = gsap.timeline({
    paused: true,
    repeat: -1,
    repeatDelay: 3
  });
  tl.call(() => {
    elAudio.currentTime = 0;
    elAudio.play();
  });
  const popSquares = [0, 0.46, 0.92, 1.39, 2.31, 2.77, 3.24, 3.69, 4.16, 4.622, 5.07, 6, 6.46, 7.39, 7.87, 8.32, 8.78, 9.7, 10.16, 10.62, 11.07, 11.54, 12.00, 12.47, 13.38, 13.86];
  popSquares.forEach(popTime => {
    tl.call(() => {
      shapes.forEach((shape, i) => {
        shape.split(i);
      });
      // Pop a new one
      const x = random(width * 0.2, width * 0.8);
      const y = random(height * 0.2, height * 0.8);
      shapes.unshift(new Square(x, y, random(width * 0.07, width * 0.12)));
    }, null, popTime);
  });
}

function draw () {
  clear();
  for (let i = shapes.length - 1; i >= 0; i--) {
    const shape = shapes[i];
    shape.update();
    shape.render();
    if (shape.isOut()) {
      shapes.splice(i, 1);
    }
  }
}