Spirograph Generator

// Spirograph — each arm is two rotating radii stacked, leaving a fading trail.
// Change ratio for a completely different figure. Try 2.5, -3, 0.5.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const config = window.params = Object.assign({
  arms: 4,          // baked: one trail buffer per arm
  ratio: -3,        // speed of the second radius relative to the first
  speed: 0.012,
  maxTrail: 220,    // points kept per arm
  r1: 0.54,         // outer radius, as a fraction of the drawing radius
  r2: 0.32,         // inner radius
  damping: 0,       // >0 turns the spirograph into a harmonograph
  fade: 0.16,       // canvas wipe per frame; 0 draws forever
  hueSpread: 300,
  zoom: 1, panX: 0, panY: 0, interactive: false,
}, window.params);

let w = 0, h = 0, dpr = 1;
function resize() {
  dpr = Math.min(window.devicePixelRatio || 1, 2);
  w = canvas.width = Math.floor(canvas.clientWidth * dpr);
  h = canvas.height = Math.floor(canvas.clientHeight * dpr);
}
resize();
// ResizeObserver rather than window.onresize: it fires once right after layout
// settles (so the canvas is never measured at zero) and again on every panel
// resize, which a window listener would miss entirely.
new ResizeObserver(resize).observe(canvas);

window.panZoom && window.panZoom(canvas, config);

const trails = Array.from({ length: config.arms }, () => []);
let t = 0;

function frame() {
  t += config.speed;

  ctx.fillStyle = 'rgba(6, 4, 12, ' + config.fade + ')';
  ctx.fillRect(0, 0, w, h);
  ctx.globalCompositeOperation = 'lighter';
  ctx.lineCap = 'round';

  const cx = w / 2 + config.panX, cy = h / 2 + config.panY;
  const R = Math.min(w, h) / 2 * 0.82 * config.zoom;

  // A real harmonograph loses energy as it draws. damping > 0 shrinks the radii
  // over time, so the closed spirograph figure spirals inward instead.
  const decay = config.damping > 0 ? Math.exp(-t * config.damping * 0.02) : 1;

  for (let a = 0; a < config.arms; a++) {
    const phase = (a / config.arms) * Math.PI * 2;
    const x = cx + R * config.r1 * decay * Math.cos(t + phase)
                 + R * config.r2 * decay * Math.cos(config.ratio * t + phase);
    const y = cy + R * config.r1 * decay * Math.sin(t + phase)
                 + R * config.r2 * decay * Math.sin(config.ratio * t + phase);

    const trail = trails[a];
    trail.push({ x: x, y: y });
    while (trail.length > config.maxTrail) trail.shift();

    const hue = (a / config.arms) * config.hueSpread + 160;
    for (let i = 1; i < trail.length; i++) {
      const k = i / trail.length;                 // 0 = tail, 1 = head
      ctx.strokeStyle = 'hsla(' + hue + ', 95%, ' + (55 + k * 25) + '%, ' + (k * 0.9) + ')';
      ctx.lineWidth = (0.6 + k * 2.6) * dpr;
      ctx.beginPath();
      ctx.moveTo(trail[i - 1].x, trail[i - 1].y);
      ctx.lineTo(trail[i].x, trail[i].y);
      ctx.stroke();
    }

    // Bright head dot.
    const head = trail[trail.length - 1];
    ctx.fillStyle = 'hsl(' + hue + ', 100%, 85%)';
    ctx.beginPath();
    ctx.arc(head.x, head.y, 2.6 * dpr, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.globalCompositeOperation = 'source-over';
  requestAnimationFrame(frame);
}
frame();