Pascal's Triangle Mod p

// Pascal's triangle modulo a prime p.
// C(n,k) mod p is computed row-by-row via Pascal's recurrence in a Uint8Array.
// For p=2 the nonzero cells form the Sierpinski triangle; higher primes give
// related self-similar gaskets (Lucas' theorem: C(n,k) mod p factors over the
// base-p digits of n and k, which forces fractal structure).
//
// We cycle p through [2,3,5,7,11] every ~6 seconds, rebuilding the triangle
// and the palette each time. Cells with C(n,k) ≡ 0 (mod p) are drawn dark;
// nonzero residues get colored hues that are unique per prime.

const PRIMES = [2, 3, 5, 7, 11];
const ROWS = 200;
const CYCLE = 6.0;

let W, H, tri, currentP, currentIdx, palette, time, lastBuildIdx;
let off, offCtx, builtW, builtH;

function buildTriangle(p) {
  // tri[n*ROWS + k] holds C(n,k) mod p for 0<=k<=n<ROWS
  // Use a flat Uint8Array; max p is 11 so a byte is plenty.
  if (!tri || tri.length !== ROWS * ROWS) tri = new Uint8Array(ROWS * ROWS);
  else tri.fill(0);
  tri[0] = 1 % p;
  for (let n = 1; n < ROWS; n++) {
    const row = n * ROWS;
    const prev = (n - 1) * ROWS;
    tri[row] = 1 % p;
    tri[row + n] = 1 % p;
    for (let k = 1; k < n; k++) {
      const v = tri[prev + k - 1] + tri[prev + k];
      tri[row + k] = v >= p ? v - p : v;
    }
  }
}

function makePalette(p, idx) {
  // Distinct palette per prime. Residue 0 is background-dark; residues 1..p-1
  // span an HSL ring whose base hue is keyed off the palette index so each
  // prime feels visibly different.
  const baseHue = [200, 30, 290, 130, 350][idx % 5];
  const arr = new Array(p);
  arr[0] = "rgba(8,10,22,0)"; // transparent / background
  for (let r = 1; r < p; r++) {
    const t = (r - 1) / Math.max(1, p - 1);
    const h = (baseHue + t * 240) % 360;
    const s = 78;
    const l = 50 + t * 18;
    arr[r] = `hsl(${h} ${s}% ${l}%)`;
  }
  return arr;
}

function renderToBuffer() {
  // Render the triangle into an offscreen buffer sized to W x H, then we just
  // blit it each frame. The triangle itself only needs to be redrawn when the
  // prime cycles or the canvas resizes.
  if (!off || builtW !== W || builtH !== H) {
    off = new OffscreenCanvas(Math.max(1, W), Math.max(1, H));
    offCtx = off.getContext("2d");
    builtW = W;
    builtH = H;
  }
  offCtx.fillStyle = "#06081a";
  offCtx.fillRect(0, 0, W, H);

  const margin = 14;
  // Triangle row n has n+1 cells. Use square cells so the triangle stays
  // equilateral-ish. Cell size is bounded by both width and height budgets.
  const cellW = (W - margin * 2) / ROWS;
  const cellH = (H - margin * 2) / ROWS;
  const cell = Math.max(1, Math.min(cellW, cellH));
  const triW = cell * ROWS;
  const triH = cell * ROWS;
  const x0 = (W - triW) * 0.5;
  const y0 = (H - triH) * 0.5;

  // Draw cells. Skip residue 0 (transparent over the background).
  for (let n = 0; n < ROWS; n++) {
    const row = n * ROWS;
    const rowY = y0 + n * cell;
    // Center the row horizontally: row n has n+1 cells of width `cell`.
    const rowX = x0 + (ROWS - (n + 1)) * 0.5 * cell;
    for (let k = 0; k <= n; k++) {
      const v = tri[row + k];
      if (v === 0) continue;
      offCtx.fillStyle = palette[v];
      // Slight 1px overlap kills sub-pixel gaps on fractional cell sizes.
      offCtx.fillRect(rowX + k * cell, rowY, cell + 0.6, cell + 0.6);
    }
  }
}

function drawHUD(ctx, phase) {
  ctx.fillStyle = "rgba(0,0,0,0.55)";
  ctx.fillRect(10, 10, 230, 64);
  ctx.fillStyle = "#fff";
  ctx.font = "13px ui-monospace, monospace";
  ctx.fillText("p = " + currentP + (currentP === 2 ? "  (Sierpinski)" : ""), 18, 30);
  ctx.fillText("rows: " + ROWS, 18, 48);
  // Cycle progress bar.
  ctx.fillStyle = "rgba(255,255,255,0.18)";
  ctx.fillRect(18, 56, 214, 6);
  ctx.fillStyle = palette[1] || "#fff";
  ctx.fillRect(18, 56, 214 * phase, 6);
}

function pickPrime(t) {
  const idx = Math.floor(t / CYCLE) % PRIMES.length;
  return idx;
}

function rebuild(idx) {
  currentIdx = idx;
  currentP = PRIMES[idx];
  palette = makePalette(currentP, idx);
  buildTriangle(currentP);
  renderToBuffer();
  lastBuildIdx = idx;
}

function init({ width, height }) {
  W = width;
  H = height;
  time = 0;
  off = null;
  builtW = builtH = 0;
  tri = null;
  rebuild(0);
}

function tick({ ctx, dt, width, height, time: t }) {
  time = t != null ? t : time + (dt || 0.016);
  if (width !== W || height !== H) {
    W = width;
    H = height;
    renderToBuffer();
  }
  const idx = pickPrime(time);
  if (idx !== lastBuildIdx) rebuild(idx);

  ctx.fillStyle = "#06081a";
  ctx.fillRect(0, 0, W, H);
  if (off) ctx.drawImage(off, 0, 0);

  const phase = (time % CYCLE) / CYCLE;
  drawHUD(ctx, phase);
}