Collatz Orbits as a Fan of Branches

// Collatz orbits as a fan of branches.
// For each starting integer n, repeatedly apply 3n+1 (odd) or n/2 (even)
// until reaching 1. Plot the orbit as a curve: at each step turn slightly
// left if the current value was even, right if odd. Color by starting n.

let W, H, orbits, drawn, accum, regenAt;
const STEP_LEN = 5;
const TURN_EVEN = -0.18;
const TURN_ODD = 0.34;
const FAN_DEG = 230; // total angular span of the fan

function collatzSteps(n) {
  const seq = [n];
  let v = n;
  let safety = 0;
  while (v !== 1 && safety < 2000) {
    v = (v & 1) ? 3 * v + 1 : v >> 1;
    seq.push(v);
    safety++;
  }
  return seq;
}

function buildOrbit(n, totalCount, idx) {
  const seq = collatzSteps(n);
  // Trace BACK from 1 outward: each step we decide turn from seq[i] parity
  // (the value that produced the next via 3n+1 or n/2).
  // We render forward from start n, applying turns step-by-step.
  const pts = [];
  // Base angle in the fan: spread starts evenly through FAN_DEG.
  const span = (FAN_DEG * Math.PI) / 180;
  const base = -Math.PI / 2 - span / 2 + (idx / Math.max(1, totalCount - 1)) * span;
  let x = W * 0.5;
  let y = H * 0.92;
  let a = base;
  pts.push({ x, y });
  for (let i = 0; i < seq.length - 1; i++) {
    const v = seq[i];
    a += (v & 1) ? TURN_ODD : TURN_EVEN;
    x += Math.cos(a) * STEP_LEN;
    y += Math.sin(a) * STEP_LEN;
    pts.push({ x, y });
  }
  const hue = (idx * 47 + 200) % 360;
  return { n, pts, color: `hsl(${hue} 85% 62%)`, drawnTo: 0 };
}

function reset(extraStarts) {
  orbits = [];
  const starts = [];
  for (let n = 1; n <= 50; n++) starts.push(n);
  if (extraStarts) for (const s of extraStarts) starts.push(s);
  for (let i = 0; i < starts.length; i++) {
    orbits.push(buildOrbit(starts[i], starts.length, i));
  }
  drawn = 0;
  accum = 0;
  regenAt = 0;
}

function init({ ctx, width, height }) {
  W = width; H = height;
  reset(null);
  // Paint dark background once; we accumulate strokes additively after.
  ctx.fillStyle = "#06070f";
  ctx.fillRect(0, 0, W, H);
}

function drawHUD(ctx) {
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(10, 10, 250, 56);
  ctx.fillStyle = "#fff";
  ctx.font = "13px ui-monospace, monospace";
  ctx.fillText("Collatz: 3n+1 if odd, n/2 if even", 18, 30);
  ctx.fillText("orbits drawn: " + orbits.length + "  (n = 1..)", 18, 50);
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    reset(null);
    ctx.fillStyle = "#06070f";
    ctx.fillRect(0, 0, W, H);
  }

  // Light fade so the fan stays crisp but old paintings dim before reset.
  ctx.fillStyle = "rgba(6,7,15,0.012)";
  ctx.fillRect(0, 0, W, H);

  // Handle clicks: add a new larger starting integer (random in 51..500).
  const clicks = input && input.consumeClicks ? input.consumeClicks() : [];
  if (clicks.length) {
    for (const _ of clicks) {
      const extra = 51 + Math.floor(Math.random() * 450);
      const idx = orbits.length;
      const total = idx + 1;
      orbits.push(buildOrbit(extra, total, idx));
    }
  }

  accum += dt || 0.016;
  // Animate: extend each orbit a few segments per frame for a sense of growth.
  const grow = 4;
  ctx.lineWidth = 1.2;
  ctx.lineCap = "round";
  let anyGrowing = false;
  for (const o of orbits) {
    if (o.drawnTo >= o.pts.length - 1) continue;
    anyGrowing = true;
    const start = o.drawnTo;
    const end = Math.min(o.pts.length - 1, start + grow);
    ctx.strokeStyle = o.color;
    ctx.beginPath();
    ctx.moveTo(o.pts[start].x, o.pts[start].y);
    for (let i = start + 1; i <= end; i++) {
      ctx.lineTo(o.pts[i].x, o.pts[i].y);
    }
    ctx.stroke();
    // Dot at the terminus (currently reached value).
    const tip = o.pts[end];
    ctx.fillStyle = o.color;
    ctx.beginPath();
    ctx.arc(tip.x, tip.y, 1.4, 0, Math.PI * 2);
    ctx.fill();
    o.drawnTo = end;
  }

  // Mark the convergence point (the common "1" terminus near base).
  ctx.fillStyle = "rgba(255,255,255,0.85)";
  ctx.beginPath();
  ctx.arc(W * 0.5, H * 0.92, 3, 0, Math.PI * 2);
  ctx.fill();
  ctx.fillStyle = "rgba(255,255,255,0.85)";
  ctx.font = "12px ui-monospace, monospace";
  ctx.fillText("1", W * 0.5 + 6, H * 0.92 + 4);

  drawHUD(ctx);

  // If everything done, hold the picture a moment then regenerate so the
  // sim stays alive in the feed.
  if (!anyGrowing) {
    if (regenAt === 0) regenAt = accum + 4.5;
    if (accum >= regenAt) {
      reset(null);
      ctx.fillStyle = "#06070f";
      ctx.fillRect(0, 0, W, H);
    }
  } else {
    regenAt = 0;
  }
}