Continued Fractions

// Continued-fraction expansions of famous reals. Cycles through π, e, φ.
// For each target x we compute a_0, a_1, ... by a_n = floor(x_n);
// x_{n+1} = 1 / (x_n - a_n). Convergents p_n/q_n satisfy
// p_n = a_n p_{n-1} + p_{n-2},  q_n = a_n q_{n-1} + q_{n-2}.

const TARGETS = [
  { name: "π", val: Math.PI },
  { name: "e", val: Math.E },
  { name: "φ", val: (1 + Math.sqrt(5)) / 2 },
];

const PER = 5.0;       // seconds per number
const STEP = 0.45;     // seconds between new terms
const MAX_TERMS = 11;

let idx = 0;
let segStart = 0;
let lastStepAt = -1;
let a = [];            // partial quotients
let conv = [];         // {p,q,err}
let pPrev = 1, pPrev2 = 0;
let qPrev = 0, qPrev2 = 1;
let xCur = 0;
let paused = false;
let pauseTime = 0;     // wall-clock time when pause began
let pauseOffset = 0;   // total time spent paused, subtracted from `time`

function startSegment(time) {
  segStart = time;
  lastStepAt = -1;
  a = [];
  conv = [];
  pPrev = 1; pPrev2 = 0;
  qPrev = 0; qPrev2 = 1;
  xCur = TARGETS[idx].val;
}

function pushTerm() {
  const t = TARGETS[idx];
  let ai;
  // φ is exactly [1;1,1,...]; force it (floating-point would drift).
  if (t.name === "φ") {
    ai = 1;
    xCur = t.val; // keep stable for display
  } else {
    ai = Math.floor(xCur);
    const frac = xCur - ai;
    xCur = frac > 1e-15 ? 1 / frac : Infinity;
  }
  a.push(ai);
  const p = ai * pPrev + pPrev2;
  const q = ai * qPrev + qPrev2;
  pPrev2 = pPrev; pPrev = p;
  qPrev2 = qPrev; qPrev = q;
  const err = Math.max(Math.abs(t.val - p / q), 1e-18);
  conv.push({ p, q, err, a: ai });
}

function init({ time = 0 } = {}) {
  idx = 0;
  paused = false;
  pauseTime = 0;
  pauseOffset = 0;
  startSegment(0);
}

function fmtBig(n) {
  if (!isFinite(n)) return "∞";
  if (n < 1e9) return n.toLocaleString();
  return n.toExponential(3);
}

function drawTower(ctx, x, y, w, h, terms, name) {
  ctx.fillStyle = "#e8e8f0";
  ctx.font = "13px monospace";
  ctx.fillText(`${name} = [${terms[0] ?? "?"}; ${terms.slice(1).join(", ")}]`, x, y - 8);

  // Build the nested fraction display, top-down.
  // x = a0 + 1/(a1 + 1/(a2 + ...))
  // Render each level on its own line, shifted right.
  const lineH = 18;
  const indent = 22;
  ctx.font = "14px monospace";
  let cx = x, cy = y + 12;
  for (let i = 0; i < terms.length; i++) {
    const ai = terms[i];
    const isLast = i === terms.length - 1;
    const tail = isLast ? "" : "  +  1";
    const txt = i === 0 ? `${ai}${tail}` : `${ai}${tail}`;
    ctx.fillStyle = i === terms.length - 1 ? "#ffd166" : "#cfd";
    ctx.fillText(txt, cx, cy);
    if (!isLast) {
      // fraction bar under the "1"
      const w1 = ctx.measureText(`${ai}  +  `).width;
      const w2 = ctx.measureText("1").width;
      ctx.strokeStyle = "#9ad";
      ctx.lineWidth = 1.2;
      ctx.beginPath();
      ctx.moveTo(cx + w1, cy + 3);
      ctx.lineTo(cx + w1 + w2 + 4, cy + 3);
      ctx.stroke();
    }
    cx += indent;
    cy += lineH;
    if (cy > y + h - 4) break;
  }
}

function drawErrPlot(ctx, x, y, w, h, history, target) {
  ctx.fillStyle = "#15151c";
  ctx.fillRect(x, y, w, h);

  // log scale from 1e-1 down to 1e-16
  const yMaxLog = 0;     // 10^0 = 1
  const yMinLog = -16;
  const toY = (lg) => y + ((yMaxLog - lg) / (yMaxLog - yMinLog)) * h;

  ctx.strokeStyle = "rgba(80,80,110,0.5)";
  ctx.lineWidth = 1;
  ctx.font = "10px monospace";
  ctx.fillStyle = "#778";
  for (let lg = 0; lg >= -16; lg -= 2) {
    const yy = toY(lg);
    ctx.beginPath();
    ctx.moveTo(x, yy);
    ctx.lineTo(x + w, yy);
    ctx.stroke();
    ctx.fillText(`10⁻${-lg}`.replace("-0", "0"), x + 2, yy - 2);
  }

  if (history.length < 1) return;

  const n = history.length;
  const dx = w / Math.max(1, MAX_TERMS - 1);

  ctx.strokeStyle = "#6cf";
  ctx.lineWidth = 1.8;
  ctx.beginPath();
  for (let i = 0; i < n; i++) {
    const lg = Math.log10(history[i].err);
    const xx = x + i * dx;
    const yy = toY(Math.max(yMinLog, Math.min(yMaxLog, lg)));
    if (i === 0) ctx.moveTo(xx, yy); else ctx.lineTo(xx, yy);
  }
  ctx.stroke();

  ctx.fillStyle = "#6cf";
  for (let i = 0; i < n; i++) {
    const lg = Math.log10(history[i].err);
    const xx = x + i * dx;
    const yy = toY(Math.max(yMinLog, Math.min(yMaxLog, lg)));
    ctx.beginPath();
    ctx.arc(xx, yy, 2.4, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.fillStyle = "#aab";
  ctx.font = "11px monospace";
  ctx.fillText("|x − pₙ/qₙ|  (log)", x + 6, y + h - 6);
  ctx.fillText(`target: ${target}`, x + w - 110, y + h - 6);
}

function tick({ ctx, width: W, height: H, time, input }) {
  ctx.fillStyle = "#0a0a0f";
  ctx.fillRect(0, 0, W, H);

  // click toggles pause
  if (input && typeof input.consumeClicks === "function" && input.consumeClicks() > 0) {
    if (!paused) {
      paused = true;
      pauseTime = time;
    } else {
      paused = false;
      pauseOffset += time - pauseTime;
    }
  }

  // freeze the clock while paused so sequence/target don't advance
  const t0 = time - pauseOffset - (paused ? (time - pauseTime) : 0);

  // segment management
  const elapsed = t0 - segStart;
  if (!paused && elapsed >= PER) {
    idx = (idx + 1) % TARGETS.length;
    startSegment(t0);
  }

  // step new terms (only when not paused)
  const elapsed2 = t0 - segStart;
  if (!paused) {
    const wantTerms = Math.min(MAX_TERMS, 1 + Math.floor(elapsed2 / STEP));
    while (a.length < wantTerms) pushTerm();
  }

  const t = TARGETS[idx];

  // Header
  ctx.fillStyle = "#e8e8f0";
  ctx.font = "bold 16px monospace";
  ctx.fillText("Continued Fractions", 24, 28);
  ctx.font = "12px monospace";
  ctx.fillStyle = "#9ad";
  ctx.fillText(`x = ${t.name} ≈ ${t.val.toFixed(12)}`, 24, 48);

  // Layout
  const pad = 24;
  const colGap = 18;
  const towerW = Math.min(360, Math.max(220, W * 0.42));
  const towerX = pad;
  const towerY = 70;
  const towerH = H - towerY - 140;

  const plotX = towerX + towerW + colGap;
  const plotY = towerY;
  const plotW = W - plotX - pad;
  const plotH = Math.max(120, H - plotY - 140);

  drawTower(ctx, towerX, towerY, towerW, towerH, a, t.name);
  drawErrPlot(ctx, plotX, plotY, plotW, plotH, conv, t.name);

  // Convergents table
  const tableY = Math.max(towerY + towerH + 18, plotY + plotH + 18);
  ctx.fillStyle = "#e8e8f0";
  ctx.font = "12px monospace";
  ctx.fillText("convergents pₙ/qₙ  →  x", pad, tableY);
  ctx.font = "11px monospace";
  const rowH = 14;
  const cols = Math.min(conv.length, 6);
  const colW = (W - pad * 2) / Math.max(1, cols);
  // show the latest `cols` convergents
  const start = Math.max(0, conv.length - cols);
  for (let i = 0; i < cols; i++) {
    const c = conv[start + i];
    if (!c) continue;
    const cx = pad + i * colW;
    const cy = tableY + 18;
    ctx.fillStyle = "#cfd";
    ctx.fillText(`n=${start + i}  a=${c.a}`, cx, cy);
    ctx.fillStyle = "#ffd166";
    ctx.fillText(`${fmtBig(c.p)} / ${fmtBig(c.q)}`, cx, cy + rowH);
    ctx.fillStyle = "#f88";
    ctx.fillText(`err ${c.err.toExponential(2)}`, cx, cy + rowH * 2);
  }

  // progress bar
  const barY = H - 6;
  ctx.fillStyle = "#222";
  ctx.fillRect(0, barY, W, 6);
  ctx.fillStyle = paused ? "#ffd166" : "#6cf";
  ctx.fillRect(0, barY, W * Math.min(1, elapsed2 / PER), 6);

  // paused indicator
  if (paused) {
    ctx.fillStyle = "#ffd166";
    ctx.font = "bold 12px monospace";
    const label = "PAUSED  (tap to resume)";
    const tw = ctx.measureText(label).width;
    ctx.fillText(label, W - tw - 24, 28);
  }
}