Harmonograph

// Harmonograph: two damped sinusoids per axis tracing a damped Lissajous figure.
// x(t) = A1 sin(f1 t + p1) e^{-d1 t} + A2 sin(f2 t + p2) e^{-d2 t}
// y(t) = A3 sin(f3 t + p3) e^{-d3 t} + A4 sin(f4 t + p4) e^{-d4 t}
// Frequencies drift slowly so the figure morphs through topologies.
// The phase amplitudes are "re-pumped" so damping never bottoms out.

const TRAIL_MAX = 2400;
const SUBSTEPS = 8;
const DT_SIM = 0.012;

let W, H, cx, cy, scale;
let trail; // x,y interleaved
let head, count;
let hueOffset;
let phaseT; // local time inside one "drawing"; resets/loops smoothly
let f1, f2, f3, f4;
let f1t, f2t, f3t, f4t; // drift targets
let driftClock;
let p1, p2, p3, p4;
let A1, A2, A3, A4;
let d1, d2, d3, d4;

function rand(a, b) { return a + Math.random() * (b - a); }
function pick(arr) { return arr[(Math.random() * arr.length) | 0]; }

function newFreqTarget() {
  // Near-integer ratios produce closed figures; small detunings open them up.
  const base = pick([2, 3, 4, 5]);
  return base + rand(-0.06, 0.06);
}

function resetParams() {
  f1 = newFreqTarget(); f2 = newFreqTarget();
  f3 = newFreqTarget(); f4 = newFreqTarget();
  f1t = f1; f2t = f2; f3t = f3; f4t = f4;
  p1 = rand(0, Math.PI * 2); p2 = rand(0, Math.PI * 2);
  p3 = rand(0, Math.PI * 2); p4 = rand(0, Math.PI * 2);
  A1 = rand(0.55, 1.0); A2 = rand(0.35, 0.85);
  A3 = rand(0.55, 1.0); A4 = rand(0.35, 0.85);
  d1 = rand(0.004, 0.012); d2 = rand(0.004, 0.012);
  d3 = rand(0.004, 0.012); d4 = rand(0.004, 0.012);
}

function sample(t) {
  const e1 = Math.exp(-d1 * t);
  const e2 = Math.exp(-d2 * t);
  const e3 = Math.exp(-d3 * t);
  const e4 = Math.exp(-d4 * t);
  const x = A1 * Math.sin(f1 * t + p1) * e1 + A2 * Math.sin(f2 * t + p2) * e2;
  const y = A3 * Math.sin(f3 * t + p3) * e3 + A4 * Math.sin(f4 * t + p4) * e4;
  return [x, y];
}

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

function init({ ctx, width, height }) {
  W = width; H = height;
  cx = W * 0.5; cy = H * 0.5;
  scale = Math.min(W, H) * 0.32;

  trail = new Float32Array(TRAIL_MAX * 2);
  head = 0; count = 0;
  hueOffset = Math.random() * 360;
  phaseT = 0;
  driftClock = 0;
  resetParams();

  // pre-seed so the first frame already has a curve
  for (let i = 0; i < 600; i++) {
    phaseT += DT_SIM;
    const [x, y] = sample(phaseT);
    pushPoint(x, y);
  }

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

function tick({ ctx, dt, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    cx = W * 0.5; cy = H * 0.5;
    scale = Math.min(W, H) * 0.32;
  }

  // Slowly drift frequencies toward fresh targets. Every ~12s, pick new targets.
  driftClock += dt;
  if (driftClock > 12) {
    driftClock = 0;
    f1t = newFreqTarget(); f2t = newFreqTarget();
    f3t = newFreqTarget(); f4t = newFreqTarget();
  }
  const k = Math.min(1, dt * 0.15);
  f1 += (f1t - f1) * k;
  f2 += (f2t - f2) * k;
  f3 += (f3t - f3) * k;
  f4 += (f4t - f4) * k;

  // Periodically "re-pump" so damping doesn't collapse the figure to a point.
  // After the envelope shrinks past a threshold, restart the local time and
  // randomize phases — frequencies keep their drifted values, so the topology
  // morphs continuously instead of jump-cutting.
  if (Math.exp(-Math.min(d1, d2, d3, d4) * phaseT) < 0.18) {
    phaseT = 0;
    p1 = rand(0, Math.PI * 2); p2 = rand(0, Math.PI * 2);
    p3 = rand(0, Math.PI * 2); p4 = rand(0, Math.PI * 2);
  }

  // fade trail
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = 'rgba(6, 6, 12, 0.10)';
  ctx.fillRect(0, 0, W, H);

  const steps = Math.max(1, Math.min(20, Math.round(SUBSTEPS * (dt / (1 / 60)))));
  for (let i = 0; i < steps; i++) {
    phaseT += DT_SIM;
    const [x, y] = sample(phaseT);
    pushPoint(x, y);
  }

  hueOffset = (hueOffset + dt * 22) % 360;

  ctx.globalCompositeOperation = 'lighter';
  ctx.lineWidth = 1.1;
  ctx.lineCap = 'round';

  const n = count;
  if (n > 1) {
    const start = (head - n + TRAIL_MAX) % TRAIL_MAX;
    let pX = cx + trail[start * 2] * scale;
    let pY = cy + trail[start * 2 + 1] * scale;
    for (let i = 1; i < n; i++) {
      const idx = (start + i) % TRAIL_MAX;
      const x = cx + trail[idx * 2] * scale;
      const y = cy + trail[idx * 2 + 1] * scale;
      const t = i / n;
      const hue = (hueOffset + t * 320) % 360;
      const alpha = 0.06 + t * 0.55;
      ctx.strokeStyle = `hsla(${hue.toFixed(1)},92%,62%,${alpha.toFixed(3)})`;
      ctx.beginPath();
      ctx.moveTo(pX, pY);
      ctx.lineTo(x, y);
      ctx.stroke();
      pX = x; pY = y;
    }
    // bright pen tip
    ctx.fillStyle = `hsla(${hueOffset.toFixed(1)},100%,82%,0.95)`;
    ctx.beginPath();
    ctx.arc(pX, pY, 2.4, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalCompositeOperation = 'source-over';

  // HUD: current frequency ratios
  ctx.fillStyle = 'rgba(220,225,240,0.78)';
  ctx.font = '11px ui-monospace, Menlo, monospace';
  ctx.fillText(
    `fx ${f1.toFixed(2)}:${f2.toFixed(2)}  fy ${f3.toFixed(2)}:${f4.toFixed(2)}`,
    10, H - 10
  );
}