Squiggle

HTML Canvas experiment

See the Pen Squiggle by Tom Watson (@tomjwatson) on CodePen.

Old squiggle

class Squiggle {

  constructor() {
    this.canvas = document.getElementById('main')
    this.ctx = this.canvas.getContext('2d')
    this.init()

    window.requestAnimationFrame(this.draw.bind(this));

    window.onresize = () => this.init()
  }

  init () {
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
  }

  draw() {

    this.ctx.globalCompositeOperation = 'destination-over'
    this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height)

    this.ctx.strokeStyle = 'rgb(255, 255, 0)'

    this.ctx.save();

    this.ctx.translate(this.canvas.width / 2, this.canvas.height / 2);

    var time = new Date();
    this.ctx.beginPath()

    this.ctx.arc(0, 0, 1, 0, Math.PI * 2)
    this.ctx.stroke()

    for (let i = 10; i < 50; i++) {

      this.ctx.rotate(
        (
          ((2 * Math.PI) / 6) * time.getSeconds() +
          ((2 * Math.PI) / 6000) * time.getMilliseconds()
        ) / (i >> 2) * 2
      )
      this.ctx.translate(0, 15);
      this.ctx.arc(0, 0, 0, 0, Math.PI * 2)
      this.ctx.stroke()
    }

    this.ctx.restore()

    window.requestAnimationFrame(this.draw.bind(this))
  }

}

document.addEventListener('DOMContentLoaded', function() {
  const squiggle = new Squiggle()
})