Lissajous Figures

// Lissajous figures: x = A sin(a t + δ),  y = B sin(b t).
// Arrows change a and b (integer ratio); [ and ] change δ.

let W, H;
let cx, cy;
let R;               // half-extent of the box
let a, b;            // integer frequency ratios
let delta;           // phase offset (radians)
let t;               // parameter
let trail;           // ring buffer of [x, y]
let trailMax;
let head;
let count;

function init({ canvas, ctx, width, height }) {
  W = width;
  H = height;
  layout();
  a = 3;
  b = 2;
  delta = Math.PI / 2;
  t = 0;
  trailMax = 1400;
  trail = new Float32Array(trailMax * 2);
  head = 0;
  count = 0;

  ctx.fillStyle = '#0b0f17';
  ctx.fillRect(0, 0, W, H);
}

function layout() {
  cx = W * 0.5;
  cy = H * 0.5;
  R = Math.min(W, H) * 0.4;
}

function pushPoint(x, y) {
  trail[head * 2] = x;
  trail[head * 2 + 1] = y;
  head = (head + 1) % trailMax;
  if (count < trailMax) count++;
}

function clearTrail() {
  head = 0;
  count = 0;
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) {
    W = width;
    H = height;
    layout();
  }

  // Keys
  if (input.justPressed('ArrowUp'))    { a = Math.min(9, a + 1); clearTrail(); }
  if (input.justPressed('ArrowDown'))  { a = Math.max(1, a - 1); clearTrail(); }
  if (input.justPressed('ArrowRight')) { b = Math.min(9, b + 1); clearTrail(); }
  if (input.justPressed('ArrowLeft'))  { b = Math.max(1, b - 1); clearTrail(); }
  if (input.justPressed('[')) { delta -= Math.PI / 12; clearTrail(); }
  if (input.justPressed(']')) { delta += Math.PI / 12; clearTrail(); }
  if (input.justPressed(' ')) { clearTrail(); }
  // Wrap delta to (-π, π]
  while (delta >  Math.PI) delta -= 2 * Math.PI;
  while (delta <= -Math.PI) delta += 2 * Math.PI;

  // Advance and push several points per frame for smoothness
  const speed = 1.4;
  const subSteps = 6;
  for (let i = 0; i < subSteps; i++) {
    t += (dt * speed) / subSteps;
    const x = Math.sin(a * t + delta);
    const y = Math.sin(b * t);
    pushPoint(x, y);
  }

  // Fade old frame
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(11, 15, 23, 0.12)';
  ctx.fillRect(0, 0, W, H);

  // Box / axes
  ctx.strokeStyle = '#1f2733';
  ctx.lineWidth = 1;
  ctx.strokeRect(cx - R, cy - R, R * 2, R * 2);
  ctx.beginPath();
  ctx.moveTo(cx - R, cy);
  ctx.lineTo(cx + R, cy);
  ctx.moveTo(cx, cy - R);
  ctx.lineTo(cx, cy + R);
  ctx.stroke();

  // Draw trail
  ctx.globalCompositeOperation = 'lighter';
  ctx.lineWidth = 1.6;
  ctx.lineCap = 'round';
  const n = count;
  if (n > 1) {
    const startIdx = (head - n + trailMax) % trailMax;
    let prevX = trail[startIdx * 2];
    let prevY = trail[startIdx * 2 + 1];
    let prevPX = cx + prevX * R;
    let prevPY = cy - prevY * R;
    for (let i = 1; i < n; i++) {
      const idx = (startIdx + i) % trailMax;
      const x = trail[idx * 2];
      const y = trail[idx * 2 + 1];
      const px = cx + x * R;
      const py = cy - y * R;
      const u = i / n;
      const hue = 180 + u * 140;
      const alpha = 0.04 + u * 0.7;
      ctx.strokeStyle = `hsla(${hue.toFixed(1)}, 90%, 65%, ${alpha.toFixed(3)})`;
      ctx.beginPath();
      ctx.moveTo(prevPX, prevPY);
      ctx.lineTo(px, py);
      ctx.stroke();
      prevPX = px;
      prevPY = py;
    }

    // Head dot
    ctx.globalCompositeOperation = 'source-over';
    ctx.fillStyle = '#ffe07a';
    ctx.beginPath();
    ctx.arc(prevPX, prevPY, 3.2, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalCompositeOperation = 'source-over';

  // HUD
  ctx.fillStyle = 'rgba(0, 0, 0, 0.6)';
  ctx.fillRect(10, 10, 260, 130);
  ctx.strokeStyle = '#2a3242';
  ctx.strokeRect(10, 10, 260, 130);

  ctx.fillStyle = '#e6ecf5';
  ctx.font = '12px monospace';
  ctx.textAlign = 'left';
  let y = 28;
  const line = (s) => { ctx.fillText(s, 20, y); y += 17; };
  line(`x = sin(${a} t + δ)`);
  line(`y = sin(${b} t)`);
  line(`a : b   = ${a} : ${b}`);
  line(`δ       = ${(delta).toFixed(3)} rad`);
  line(`         = ${(delta * 180 / Math.PI).toFixed(1)}°`);
  line(`ratio   = ${(a / b).toFixed(4)}`);

  // Hint
  ctx.fillStyle = '#6b7790';
  ctx.font = '11px sans-serif';
  ctx.textAlign = 'right';
  ctx.fillText('↑ ↓ : a    ← → : b    [ ] : δ    space : clear', W - 12, H - 12);
}