Curve Stitching

// Curve stitching — modular envelopes on a circle.
// Place N points evenly around a circle and connect each i to k*i mod N.
// The chord family doesn't fill the disc — its envelope traces an
// epicycloid: integer k = 2 -> cardioid, k = 3 -> nephroid, k = 4 ->
// (k-1)-cusped epicycloid, and irrational k sweeps a caustic that
// never closes. We drift k continuously and the envelope morphs through
// the whole family, like a string-art piece slowly re-stitching itself.

let W, H, cx, cy, R;
const N = 360;            // points on the circle (smooth envelope)
let cosT, sinT;            // preallocated point positions

// k drifts smoothly through a target sequence. Integer plateaus dwell
// so the user can read off the cardioid / nephroid / etc shapes; the
// continuous motion between them shows that those are just stations
// in a one-parameter family.
const TARGETS = [2, 3, 4, 5, 7, 6, 9, 8, 11, 13, 12];
let kIdx, kCur, kNext, segT, dwellT;
const TRANSIT = 4.5;       // seconds drifting from one target to the next
const DWELL   = 1.4;       // seconds held at an integer (the named curve)

function easeInOut(u) {
  return u < 0.5 ? 2 * u * u : 1 - 2 * (1 - u) * (1 - u);
}

function nameFor(k) {
  // nearest integer with a tolerance: shows the classical label
  const r = Math.round(k);
  if (Math.abs(k - r) > 0.02) return "epicycloid (k drifting)";
  if (r === 2) return "cardioid (k = 2)";
  if (r === 3) return "nephroid (k = 3)";
  if (r === 4) return "3-cusped epicycloid (k = 4)";
  if (r === 5) return "4-cusped epicycloid (k = 5)";
  return (r - 1) + "-cusped epicycloid (k = " + r + ")";
}

function buildPoints() {
  cosT = new Float32Array(N);
  sinT = new Float32Array(N);
  for (let i = 0; i < N; i++) {
    const a = (i / N) * Math.PI * 2;
    cosT[i] = Math.cos(a);
    sinT[i] = Math.sin(a);
  }
}

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

function init({ width, height }) {
  W = width; H = height;
  layout();
  buildPoints();
  kIdx = 0;
  kCur = TARGETS[0];
  kNext = TARGETS[1];
  segT = 0;
  dwellT = 0;
}

function tick({ ctx, dt, time, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    layout();
  }
  const step = Math.min(0.05, dt || 0.016);

  // advance k along its piecewise plan
  if (dwellT < DWELL) {
    dwellT += step;
  } else {
    segT += step;
    if (segT >= TRANSIT) {
      segT = 0;
      dwellT = 0;
      kIdx = (kIdx + 1) % TARGETS.length;
      kCur = TARGETS[kIdx];
      kNext = TARGETS[(kIdx + 1) % TARGETS.length];
    }
  }
  const u = easeInOut(Math.min(1, segT / TRANSIT));
  const k = kCur + (kNext - kCur) * u;

  // black background — a real cardboard-and-thread look needs contrast
  ctx.fillStyle = "#07060c";
  ctx.fillRect(0, 0, W, H);

  // faint guide circle
  ctx.strokeStyle = "rgba(180, 190, 230, 0.10)";
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.arc(cx, cy, R, 0, Math.PI * 2);
  ctx.stroke();

  // draw chords. Hue drifts slowly with time; chord brightness drops
  // with index so the eye reads the envelope rather than each line.
  // We batch by stride so the canvas doesn't issue 360 separate strokes
  // per frame on phones.
  const hueBase = (time * 14) % 360;
  ctx.lineCap = "round";
  ctx.globalCompositeOperation = "lighter";
  const STRIDE = 18;
  for (let s = 0; s < N; s += STRIDE) {
    const end = Math.min(N, s + STRIDE);
    const tFrac = (s + STRIDE * 0.5) / N;
    const hue = (hueBase + tFrac * 220) % 360;
    ctx.strokeStyle = "hsla(" + hue.toFixed(1) + ", 92%, 62%, 0.42)";
    ctx.lineWidth = 1.1;
    ctx.beginPath();
    for (let i = s; i < end; i++) {
      const j = (i * k) % N;
      const jf = j - Math.floor(j);   // fractional part for irrational k
      const j0 = Math.floor(j) % N;
      const j1 = (j0 + 1) % N;
      // linear interpolation in (cos, sin) — fine for envelope feel
      const x1 = cx + R * cosT[i];
      const y1 = cy + R * sinT[i];
      const x2 = cx + R * (cosT[j0] * (1 - jf) + cosT[j1] * jf);
      const y2 = cy + R * (sinT[j0] * (1 - jf) + sinT[j1] * jf);
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
    }
    ctx.stroke();
  }
  ctx.globalCompositeOperation = "source-over";

  // dot the boundary points — string-art pegs
  ctx.fillStyle = "rgba(220, 230, 255, 0.55)";
  for (let i = 0; i < N; i += 6) {
    ctx.beginPath();
    ctx.arc(cx + R * cosT[i], cy + R * sinT[i], 1.2, 0, Math.PI * 2);
    ctx.fill();
  }

  // HUD
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(10, 10, 268, 64);
  ctx.fillStyle = "#fff";
  ctx.font = "13px ui-monospace, monospace";
  ctx.fillText("N pegs  = " + N, 18, 30);
  ctx.fillText("k       = " + k.toFixed(3), 18, 48);
  ctx.fillText(nameFor(k), 18, 66);
}