Koch Snowflake

// Koch Snowflake — start from an equilateral triangle. Each iteration replaces
// every segment by 4 segments (the middle third bumps outward into a triangular
// tooth). Perimeter scales by 4/3 per order so it diverges, while the area
// converges to (8/5) * area(triangle_0). Fading trails of prior orders are
// drawn behind the current snowflake so you can watch the fractal grow.

const MAX_ORDER = 7;
const HOLD_FRAMES = 90;    // ~1.5s on the final order before reset
const STEP_FRAMES = 55;    // ~0.9s per order
const TRAIL_DEPTH = 4;     // how many prior orders to ghost in

let W, H;
let cx, cy;                // centroid of base triangle
let baseSide;              // side length of order-0 triangle
let basePerim;             // perimeter at order 0 (3 * baseSide)
let orders;                // orders[k] = Float32Array of [x0,y0,x1,y1,...] points (closed loop)
let currentOrder;
let stepFrame;
let holdFrame;
let phase;                 // "growing" | "holding"

function buildTriangle() {
  // Equilateral triangle inscribed in a disc of radius R, centroid at (cx,cy),
  // pointing up. Side length = R * sqrt(3).
  const R = Math.min(W, H) * 0.34;
  baseSide = R * Math.sqrt(3);
  basePerim = 3 * baseSide;
  const pts = new Float32Array(6);
  for (let i = 0; i < 3; i++) {
    const a = -Math.PI / 2 + (i * 2 * Math.PI) / 3;
    pts[i * 2] = cx + R * Math.cos(a);
    pts[i * 2 + 1] = cy + R * Math.sin(a);
  }
  return pts;
}

// One Koch refinement: each edge (A,B) becomes A, P, T, Q, B where
// P = A + 1/3 (B-A), Q = A + 2/3 (B-A), and T is P rotated -60deg around the
// edge so the bump points outward (the polygon is wound counter-clockwise).
function refine(pts) {
  const n = pts.length / 2;
  const out = new Float32Array(n * 2 * 4); // each edge -> 4 segments, so 4 new points per edge
  const cos60 = Math.cos(-Math.PI / 3);
  const sin60 = Math.sin(-Math.PI / 3);
  let o = 0;
  for (let i = 0; i < n; i++) {
    const ax = pts[i * 2], ay = pts[i * 2 + 1];
    const j = (i + 1) % n;
    const bx = pts[j * 2], by = pts[j * 2 + 1];
    const dx = bx - ax, dy = by - ay;
    const px = ax + dx / 3, py = ay + dy / 3;
    const qx = ax + 2 * dx / 3, qy = ay + 2 * dy / 3;
    // Vector from P to Q is (dx/3, dy/3). Rotate by -60deg to get P->T.
    const vx = dx / 3, vy = dy / 3;
    const tx = px + (vx * cos60 - vy * sin60);
    const ty = py + (vx * sin60 + vy * cos60);
    out[o++] = ax; out[o++] = ay;
    out[o++] = px; out[o++] = py;
    out[o++] = tx; out[o++] = ty;
    out[o++] = qx; out[o++] = qy;
  }
  return out;
}

function buildAllOrders() {
  orders = new Array(MAX_ORDER + 1);
  orders[0] = buildTriangle();
  for (let k = 1; k <= MAX_ORDER; k++) {
    orders[k] = refine(orders[k - 1]);
  }
}

function strokePath(ctx, pts, color, lineWidth, alpha) {
  const n = pts.length / 2;
  if (n < 2) return;
  ctx.beginPath();
  ctx.moveTo(pts[0], pts[1]);
  for (let i = 1; i < n; i++) ctx.lineTo(pts[i * 2], pts[i * 2 + 1]);
  ctx.closePath();
  ctx.globalAlpha = alpha;
  ctx.lineWidth = lineWidth;
  ctx.strokeStyle = color;
  ctx.stroke();
  ctx.globalAlpha = 1;
}

function fillPath(ctx, pts, color, alpha) {
  const n = pts.length / 2;
  if (n < 3) return;
  ctx.beginPath();
  ctx.moveTo(pts[0], pts[1]);
  for (let i = 1; i < n; i++) ctx.lineTo(pts[i * 2], pts[i * 2 + 1]);
  ctx.closePath();
  ctx.globalAlpha = alpha;
  ctx.fillStyle = color;
  ctx.fill();
  ctx.globalAlpha = 1;
}

function orderHue(k) {
  return (k * 38 + 190) % 360; // walk around the wheel as order grows
}

function drawHUD(ctx) {
  const perim = basePerim * Math.pow(4 / 3, currentOrder);
  const segCount = 3 * Math.pow(4, currentOrder);
  ctx.fillStyle = "rgba(0,0,0,0.6)";
  ctx.fillRect(10, 10, 230, 76);
  ctx.fillStyle = "#fff";
  ctx.font = "13px ui-monospace, monospace";
  ctx.fillText("order:     " + currentOrder + " / " + MAX_ORDER, 18, 30);
  ctx.fillText("segments:  " + segCount.toLocaleString(), 18, 50);
  ctx.fillText("perimeter: " + perim.toFixed(1) + " px", 18, 70);
}

function drawScene(ctx) {
  // Translucent fill each frame so old strokes ghost out slowly.
  ctx.fillStyle = "rgba(7, 9, 20, 0.18)";
  ctx.fillRect(0, 0, W, H);

  // Subtle fill of the current snowflake for body.
  const cur = orders[currentOrder];
  const hueCur = orderHue(currentOrder);
  fillPath(ctx, cur, `hsl(${hueCur} 70% 14%)`, 0.85);

  // Trail: re-stroke the few prior orders at low alpha so growth is visible.
  const startK = Math.max(0, currentOrder - TRAIL_DEPTH);
  for (let k = startK; k < currentOrder; k++) {
    const age = currentOrder - k;
    const alpha = 0.12 + 0.18 / age; // closer in time = brighter
    const lw = Math.max(0.6, 1.6 - age * 0.25);
    strokePath(ctx, orders[k], `hsl(${orderHue(k)} 75% 60%)`, lw, alpha);
  }

  // Current order — bright outline.
  strokePath(ctx, cur, `hsl(${hueCur} 90% 68%)`, 1.6, 1);
}

function init({ width, height }) {
  W = width; H = height;
  cx = W * 0.5; cy = H * 0.54;
  buildAllOrders();
  currentOrder = 0;
  stepFrame = 0;
  holdFrame = 0;
  phase = "growing";

  // Pre-seed the canvas so the first frame already shows the triangle
  // instead of a black square waiting for the trail-fade to kick in.
  // (Worker contract: ctx is available in tick, not init — so just leave
  // currentOrder = 0 and let tick paint frame 1.)
}

function tick({ ctx, width, height }) {
  if (width !== W || height !== H) {
    W = width; H = height;
    cx = W * 0.5; cy = H * 0.54;
    buildAllOrders();
    currentOrder = 0;
    stepFrame = 0;
    holdFrame = 0;
    phase = "growing";
    // Hard clear on resize so old geometry doesn't bleed in scaled.
    ctx.fillStyle = "#070914";
    ctx.fillRect(0, 0, W, H);
  }

  if (phase === "growing") {
    stepFrame++;
    if (stepFrame >= STEP_FRAMES) {
      stepFrame = 0;
      if (currentOrder < MAX_ORDER) {
        currentOrder++;
      } else {
        phase = "holding";
        holdFrame = 0;
      }
    }
  } else {
    holdFrame++;
    if (holdFrame >= HOLD_FRAMES) {
      // Restart the cycle. Clear hard so trails don't persist across resets.
      ctx.fillStyle = "#070914";
      ctx.fillRect(0, 0, W, H);
      currentOrder = 0;
      stepFrame = 0;
      holdFrame = 0;
      phase = "growing";
    }
  }

  drawScene(ctx);
  drawHUD(ctx);
}