Die Welle ohne double buffering

die-welle-one-buffer.html

<h1>Die Welle</h1>

<canvas id="canvas" width="700" height="700"></canvas>

die-welle-one-buffer.js

jQuery(document).ready(function($) {
  const doisPI = Math.PI * 2
  const cos = Math.cos
  const sin = Math.sin
  const canvas = document.getElementById('canvas')
  const largura = canvas.width
  const altura = canvas.height
  const ctx = canvas.getContext('2d')

  const phiDelta = doisPI / 15
  const phiStep = doisPI / 50
  const raio = 20
  const raioBolinha = 3
  const distancia = 23

  var currentPhi = 0
  
  function monteDeCirculosComBolinhas() {
    var x, y, xBolinha, yBolinha, phi, phiIndex

    currentPhi += phiStep;

    ctx.clearRect(0, 0, largura, altura)
    for (x = 0; x < largura + raio; x += distancia) {
      for (y = 0; y < altura + raio; y += distancia) {
        ctx.beginPath()
        ctx.arc(x, y, raio, 0, doisPI)
        ctx.stroke()
        phiIndex = (x + y) % (2 * largura) / raio
        phi = phiIndex * phiDelta + currentPhi
        xBolinha = cos(phi) * raio + x
        yBolinha = sin(phi) * raio + y
        ctx.beginPath()
        ctx.arc(xBolinha, yBolinha, raioBolinha, 0, doisPI)
        ctx.fill()
      }
    }
  }

  setInterval(monteDeCirculosComBolinhas, 20)
})