Fourier Square: Gibbs Phenomenon

// f_N(t) = (4/pi) * sum_{k=1..N} sin((2k-1) t) / (2k-1) -> square wave.
// Left: target square, partial sum, faint harmonic stack, Gibbs overshoot label.
// Right: rotating epicycles tracing the same f_N(t).

const NMIN = 1, NMAX = 50;
let Nf = 6, phase = 0, lastMX = -1, hover = 0;

function init() { Nf = 6; phase = 0; lastMX = -1; hover = 0; }

function partial(t, N) {
  let s = 0;
  for (let k = 1; k <= N; k++) { const m = 2*k - 1; s += Math.sin(m*t) / m; }
  return (4 / Math.PI) * s;
}

function drawCurve(ctx, x0, y0, w, h, N, t) {
  ctx.fillStyle = "#0c0f17"; ctx.fillRect(x0, y0, w, h);
  const pL=36, pR=14, pT=22, pB=24;
  const cx0=x0+pL, cy0=y0+pT, cw=w-pL-pR, ch=h-pT-pB;
  const midY = cy0 + ch/2;
  const tMin=-2*Math.PI, tMax=2*Math.PI;
  const xOf = (tt) => cx0 + ((tt - tMin)/(tMax - tMin)) * cw;
  const yOf = (v)  => midY - (v/1.45) * (ch/2);

  // Axes.
  ctx.strokeStyle = "rgba(120,140,180,0.25)"; ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.moveTo(cx0, midY); ctx.lineTo(cx0+cw, midY);
  ctx.moveTo(cx0, cy0);  ctx.lineTo(cx0, cy0+ch);
  ctx.stroke();

  // y=+/-1 references.
  ctx.strokeStyle = "rgba(120,140,180,0.18)"; ctx.setLineDash([2,4]);
  ctx.beginPath();
  ctx.moveTo(cx0, yOf(1));  ctx.lineTo(cx0+cw, yOf(1));
  ctx.moveTo(cx0, yOf(-1)); ctx.lineTo(cx0+cw, yOf(-1));
  ctx.stroke(); ctx.setLineDash([]);

  const samples = Math.min(360, Math.max(180, Math.floor(cw)));
  const dt = (tMax - tMin) / samples;

  // Individual harmonics, faint, layered.
  const harmMax = Math.min(N, 12);
  for (let k = 1; k <= harmMax; k++) {
    const m = 2*k - 1;
    ctx.strokeStyle = `hsla(${200 + (k*32)%160}, 80%, 65%, 0.18)`;
    ctx.beginPath();
    for (let i = 0; i <= samples; i++) {
      const tt = tMin + i*dt;
      const v = (4/Math.PI) * Math.sin(m*tt) / m;
      const X = xOf(tt), Y = yOf(v);
      if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
    }
    ctx.stroke();
  }

  // Target square (dashed).
  ctx.strokeStyle = "rgba(120,200,255,0.55)"; ctx.lineWidth = 1.2;
  ctx.setLineDash([5,4]); ctx.beginPath();
  for (let i = 0; i <= samples; i++) {
    const tt = tMin + i*dt;
    const sq = Math.sin(tt) >= 0 ? 1 : -1;
    const X = xOf(tt), Y = yOf(sq);
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
  }
  ctx.stroke(); ctx.setLineDash([]);

  // Partial sum.
  ctx.strokeStyle = "#ffd166"; ctx.lineWidth = 2;
  ctx.beginPath();
  let traceX=0, traceY=0, traceSet=false;
  for (let i = 0; i <= samples; i++) {
    const tt = tMin + i*dt;
    const v = partial(tt, N);
    const X = xOf(tt), Y = yOf(v);
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
    if (!traceSet && tt >= t) { traceX=X; traceY=Y; traceSet=true; }
  }
  ctx.stroke();

  // Gibbs overshoot near t = 0+ : tip is at t ~ pi/(2N).
  const tTip = Math.PI / (2*N + 1e-4);
  if (tTip < tMax) {
    const vTip = partial(tTip, N);
    const tipX = xOf(tTip), tipY = yOf(vTip);
    ctx.strokeStyle = "rgba(255,90,120,0.85)"; ctx.lineWidth = 1;
    ctx.beginPath(); ctx.moveTo(tipX, tipY); ctx.lineTo(tipX+34, tipY-22); ctx.stroke();
    ctx.fillStyle = "rgba(255,90,120,0.95)";
    ctx.beginPath(); ctx.arc(tipX, tipY, 3, 0, 6.283); ctx.fill();
    ctx.font = "11px system-ui, sans-serif";
    ctx.fillStyle = "rgba(255,170,185,0.95)";
    ctx.fillText("Gibbs +" + ((vTip-1)*100).toFixed(1) + "%", tipX+36, tipY-24);
  }

  // Phase marker linking to the epicycle.
  if (traceSet) {
    ctx.fillStyle = "#ffd166";
    ctx.beginPath(); ctx.arc(traceX, traceY, 3.5, 0, 6.283); ctx.fill();
  }

  ctx.fillStyle = "rgba(180,195,220,0.7)";
  ctx.font = "10px system-ui, sans-serif";
  ctx.fillText("+1", x0+6, yOf(1)+4);
  ctx.fillText("-1", x0+6, yOf(-1)+4);
  ctx.fillText("0",  x0+12, midY+4);
  ctx.fillText("t",  cx0+cw-8, midY+14);
}

function drawEpicycles(ctx, x0, y0, w, h, N, t) {
  ctx.fillStyle = "#0a0d14"; ctx.fillRect(x0, y0, w, h);
  const cx = x0 + w*0.34, cy = y0 + h/2;
  const R = Math.min(w*0.28, h*0.42);
  const unit = R / 1.45;

  let px = cx, py = cy;
  ctx.lineWidth = 1;
  for (let k = 1; k <= N; k++) {
    const m = 2*k - 1;
    const len = (4/Math.PI) / m * unit;
    const ang = m*t - Math.PI/2;
    const nx = px + Math.cos(ang)*len;
    const ny = py + Math.sin(ang)*len;
    ctx.strokeStyle = `hsla(${200 + (k*32)%160}, 70%, 60%, 0.18)`;
    ctx.beginPath(); ctx.arc(px, py, len, 0, 6.283); ctx.stroke();
    ctx.strokeStyle = `hsla(${200 + (k*32)%160}, 85%, 70%, 0.95)`;
    ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(nx, ny); ctx.stroke();
    px = nx; py = ny;
  }
  ctx.fillStyle = "#ffd166";
  ctx.beginPath(); ctx.arc(px, py, 3.5, 0, 6.283); ctx.fill();

  // Link to output strip showing recent history of f_N.
  const sx0 = x0 + w*0.55, sx1 = x0 + w - 14, sw = sx1 - sx0;
  ctx.strokeStyle = "rgba(255,209,102,0.35)"; ctx.setLineDash([3,3]);
  ctx.beginPath(); ctx.moveTo(px, py); ctx.lineTo(sx0, py); ctx.stroke();
  ctx.setLineDash([]);
  ctx.strokeStyle = "rgba(120,200,255,0.3)";
  ctx.beginPath(); ctx.moveTo(sx0, cy); ctx.lineTo(sx1, cy); ctx.stroke();
  ctx.strokeStyle = "#ffd166"; ctx.lineWidth = 1.6;
  ctx.beginPath();
  const NS = 80;
  for (let i = 0; i <= NS; i++) {
    const s = (i / NS) * (2*Math.PI);
    const v = partial(t - s, N);
    const X = sx0 + (i / NS) * sw, Y = cy + v * unit;
    if (i === 0) ctx.moveTo(X, Y); else ctx.lineTo(X, Y);
  }
  ctx.stroke();

  ctx.fillStyle = "rgba(180,195,220,0.7)";
  ctx.font = "10px system-ui, sans-serif";
  ctx.fillText("epicycles", x0+10, y0+14);
  ctx.fillText("output",    sx0,   y0+14);
}

function tick({ ctx, dt, width, height, input }) {
  ctx.fillStyle = "#07080d"; ctx.fillRect(0, 0, width, height);

  const mx = input.mouseX, my = input.mouseY;
  const inCanvas = mx >= 0 && mx <= width && my >= 0 && my <= height;
  const moved = Math.abs(mx - lastMX) > 1 && inCanvas;
  if (moved) { hover = 90; lastMX = mx; }
  let target;
  // Touch: tap-and-hold latches N to the pointer x position.
  if (input.mouseDown && inCanvas) {
    hover = 90; lastMX = mx;
    const f = Math.max(0, Math.min(1, mx / width));
    target = NMIN + f * (NMAX - NMIN);
  } else if (hover > 0) {
    hover--;
    const f = Math.max(0, Math.min(1, mx / width));
    target = NMIN + f * (NMAX - NMIN);
  } else {
    const tt = (phase * 0.08) % (2*Math.PI);
    const f = 0.5 - 0.5 * Math.cos(tt);
    target = NMIN + f * (NMAX - NMIN);
  }
  Nf += (target - Nf) * Math.min(1, dt * 4);
  const N = Math.max(1, Math.round(Nf));

  phase += dt * 0.9;
  const t = phase % (2*Math.PI);

  const splitX = Math.floor(width * 0.62);
  drawCurve(ctx, 0, 0, splitX, height, N, t);
  drawEpicycles(ctx, splitX, 0, width - splitX, height, N, t);

  ctx.fillStyle = "rgba(230,235,245,0.95)";
  ctx.font = "bold 13px system-ui, sans-serif";
  ctx.fillText("N = " + N + " harmonic" + (N === 1 ? "" : "s"), 12, 18);
  ctx.font = "11px system-ui, sans-serif";
  ctx.fillStyle = "rgba(180,195,220,0.85)";
  ctx.fillText("f_N(t) = (4/π) Σ sin((2k−1)t)/(2k−1)", 12, height - 10);
  ctx.fillStyle = "rgba(255,170,185,0.95)";
  ctx.fillText("Gibbs phenomenon → ~9% overshoot persists as N→∞", Math.max(12, width - 320), height - 10);
}