Lissajous

index.html

<div id="main" data-width="512">
  <canvas></canvas>
</div>
<div id="controller"></div>

lissajous.markdown

Lissajous

A Pen by Zhou Qi on CodePen.

License.

script.babel

const size = +document.querySelector('#main').dataset.width
const canvas = document.querySelector('canvas')
canvas.width = size
canvas.height = size
const ctx = canvas.getContext('2d')
ctx.translate(size / 2, size / 2)
ctx.strokeStyle = '#7ed'
ctx.lineCap = 'round'
const {
  sin,
  sqrt,
  random,
  PI,
} = Math
const A = size / 2 - 1

class Lissajous {
  constructor() {
    this.k = 1.66
    this.fade = false
    this.setup()
    this.draw = this.draw.bind(this)
    this.draw()
  }
  setup() {
    delete this.lastP
    ctx.clearRect(-size / 2, -size / 2, size, size)
    this._k = this.k
    this.delta = 0.05 / sqrt(this._k)
    this.phi = random() * 2 * PI
    this.theta = 0
  }
  draw() {
    if (this.fade) {
      ctx.fade()
    }
    const p = [
      sin(this.theta) * A,
      sin(this._k * this.theta + this.phi) * A
    ]
    ctx.beginPath()
    ctx.moveTo(...(this.lastP || p))
    ctx.lineTo(...p)
    ctx.stroke()

    this.lastP = p
    this.theta += this.delta
    requestAnimationFrame(this.draw)
  }
}

const lis = new Lissajous()
const setup = lis.setup.bind(lis)
const gui = new dat.GUI({
  autoPlace: false,
})
document.getElementById('controller').appendChild(gui.domElement)
gui.add(lis, 'k', 0.25, 4).step(0.01).onFinishChange(setup)
gui.add(lis, 'fade')

scripts

<script src="//codepen.io/handsomeone/pen/KgqaAO"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.1/dat.gui.min.js"></script>

style.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #48a;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0) 49px, rgba(0, 0, 0, .1) 49px, rgba(0, 0, 0, .1) 50px), 
    linear-gradient(90deg, rgba(0, 0, 0, 0) 49px, rgba(0, 0, 0, .1) 49px, rgba(0, 0, 0, .1) 50px);
  background-size: 50px 50px, 50px 50px;
  background-position: center center;
}

#main {
  position: relative;
  max-width: 90vmin;
}

canvas {
  display: block;
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

canvas:first-child {
  position: static;
}

#controller {
  position: fixed;
  top: 0;
  right: 0;
}