const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

const MINSPEED = 1000;
const SPEEDVAR = 3000;

// I'm sorry in advance, just so you know :ɔ
console.error("vai toimiiko...?");

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

window.addEventListener("resize", () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
});

class Particle {
  constructor(lifespan, direction, timestamp) {
    this._posX = 0;
    this._posY = 0;
    this._lifespan = lifespan;
    this._direction = direction;
    this._birthtime = timestamp;
  }

  getPosition() {
    return [this._posX, this._posY];
  }

  getLifespan() {
    return this._lifespan;
  }

  getDirection() {
    return this._direction;
  }
  
  getBirthtime() {
    return this._birthtime;
  }

  getPosAtTime(time) {
    const actualTime = (time - this.getBirthtime()) / this.getLifespan();
    const easing = (actualTime >= 1) ? 1 : 1 - Math.sqrt(1 - actualTime**2);
    const angle = this.getDirection();
    return [Math.cos(angle) * easing, Math.sin(angle) * easing];
  }

  getOpacityAtTime(time) {
    const actualTime = 2 * (time - this.getBirthtime()) / this.getLifespan();
    const easing = (actualTime >= 1) ? 1 : 1 - Math.sqrt(1 - actualTime**2);
    return easing;
    // const actualTime = time - this.getBirthtime();
    // return Math.min(2 * actualTime / this.getLifespan(), 1);
  }

  isTooOld(time) {
    return time - this.getBirthtime() >= this.getLifespan();
  }

  draw(outerRadius, time) {
    const position = this.getPosAtTime(time);
    ctx.moveTo(canvas.width / 2 + outerRadius * position[0], canvas.height / 2 + outerRadius * position[1]);
    ctx.beginPath();
    ctx.arc(canvas.width / 2 + outerRadius * position[0], canvas.height / 2 + outerRadius * position[1], 3 * ((time - this.getBirthtime()) / this.getLifespan())**5, 0, 2 * Math.PI);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.getOpacityAtTime(time)})`;
    ctx.fill()
  }
}

const particles = [];

function main(timestamp) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  const tooOld = [];
  for (let i = 0; i < particles.length; i++) {
    if (particles[i].isTooOld(timestamp)) tooOld.push(particles[i])
    else particles[i].draw(Math.sqrt(canvas.width**2 / 4 + canvas.height**2 / 4), timestamp);
  }
  for (let i = 0; i < tooOld.length; i++) {
    particles.splice(particles.indexOf(tooOld[i]), 1);
  }
  particles.push(new Particle(Math.random() * SPEEDVAR + MINSPEED, 2 * Math.PI * Math.random(), timestamp));
  particles.push(new Particle(Math.random() * SPEEDVAR + MINSPEED, 2 * Math.PI * Math.random(), timestamp));
  requestAnimationFrame(main);
}

main(0);