const canvas = document.createElement('canvas')

const c = canvas.getContext('2d')

let w;

let h;

onresize = e => {

  w = innerWidth * 2

  h = innerHeight * 2

  canvas.width = w

  canvas.height = h

  canvas.style.width = (w / 2) + 'px'

  canvas.style.height = (h / 2) + 'px'  

  c.fillStyle = '#000'

  c.fillRect(0, 0, w, h) 

}

onresize()

document.body.append(canvas)

canvas.style.filter = 'contrast(2) brightness(1.2)'

class Crystal {

  constructor() {

    this.init()

  }

  init() {

    this.x = w / 2

    this.y = h * .7

    this.rad = 250

    this.sides = 5

    // + ~~(Math.random() * 5)

    this.shrinkTime = 400 + Math.random() * 100 

    this.t = Math.random() * 7

    this.st = this.t;

    this.step = (Math.PI * 2) / this.sides

    this.time = 0

    this.shrinkSpeed = 1.3 - Math.random() * .6

    this.a = 0

    this.ad = .05

  }

  draw() { 

    this.a += (this.ad - this.a) / 150

    c.lineWidth = 5

    c.strokeStyle = `rgba(255, 255, 255, ${this.a})`

    c.fillStyle = `rgba(0, 111, 122, ${this.a / 2})`

    c.beginPath()

    for (let j = 0; j < 2; j++) {

      this.time++

      if (this.time > this.shrinkTime) {

        this.rad -= this.shrinkSpeed

        if (this.rad < 0) {

          setTimeout(() => {

            c.fillStyle = 'rgba(0, 0, 0, .02)'

            c.fillRect(0, 0, w, h)

            this.init()

          }, 500)

          return;

        }

      }

      this.t = this.st

      for (let i = 0; i < this.sides; i++) {

        let p = {

          x: this.rad * Math.cos(this.t),

          y: this.rad * .6 * Math.sin(this.t)

        }

        this.t += this.step;

        if (i === 0) {

          c.moveTo(this.x + p.x, this.y + p.y)

        } else {

          c.lineTo(this.x + p.x, this.y + p.y)

        }

      }

      c.closePath()

      c.stroke() 

      c.fill()

      this.y -= 1

    }

  }

}

let cryst = new Crystal()

setInterval(() => {

  for (let i = 0; i < 3; i++) cryst.draw()

}, 16)