Erdős–Rényi Giant Component

const N = 80;
let xs, ys, vxs, vys;
let adj, comp, compSize, queue;
let W = 0, H = 0;
let p = 0, lastP = -1;
let giantSize = 0, numEdges = 0, numComps = 0;

function mulberry32(a) {
  return function () {
    a = (a + 0x6d2b79f5) | 0;
    let t = a;
    t = Math.imul(t ^ (t >>> 15), t | 1);
    t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
  };
}

function init({ width, height }) {
  W = width; H = height;
  xs = new Float32Array(N); ys = new Float32Array(N);
  vxs = new Float32Array(N); vys = new Float32Array(N);
  const cx = W * 0.5, cy = H * 0.5, R = Math.min(W, H) * 0.36;
  for (let i = 0; i < N; i++) {
    const a = (i / N) * Math.PI * 2;
    const j = 0.85 + Math.random() * 0.3;
    xs[i] = cx + Math.cos(a) * R * j;
    ys[i] = cy + Math.sin(a) * R * j;
    vxs[i] = (Math.random() - 0.5) * 8;
    vys[i] = (Math.random() - 0.5) * 8;
  }
  adj = new Uint8Array(N * N);
  comp = new Int32Array(N);
  compSize = new Int32Array(N);
  queue = new Int32Array(N);
  buildEdges(0); lastP = 0;
}

function buildEdges(prob) {
  adj.fill(0); numEdges = 0;
  // Reseed each rebuild so the same p produces a coherent snapshot.
  const rng = mulberry32(0x9e3779b9 ^ Math.floor(prob * 100000));
  for (let i = 0; i < N; i++) {
    for (let j = i + 1; j < N; j++) {
      if (rng() < prob) {
        adj[i * N + j] = 1; adj[j * N + i] = 1; numEdges++;
      }
    }
  }
  computeComponents();
}

function computeComponents() {
  comp.fill(-1); compSize.fill(0);
  let cid = 0; giantSize = 0;
  for (let s = 0; s < N; s++) {
    if (comp[s] !== -1) continue;
    let head = 0, tail = 0; queue[tail++] = s; comp[s] = cid; let size = 0;
    while (head < tail) {
      const u = queue[head++]; size++;
      const row = u * N;
      for (let v = 0; v < N; v++) {
        if (adj[row + v] && comp[v] === -1) { comp[v] = cid; queue[tail++] = v; }
      }
    }
    compSize[cid] = size;
    if (size > giantSize) giantSize = size;
    cid++;
  }
  numComps = cid;
}

function pFromInput(input) {
  // Mouse X scrubs p in [0, 0.1]. Phase transition for n=80 is at ~0.0125.
  const x = input.mouseX;
  let frac;
  if (x === undefined || x === null || x < 0 || x > W) {
    frac = (0.5 + 0.5 * Math.sin(performance.now() * 0.0004)) * 0.6;
  } else {
    frac = Math.max(0, Math.min(1, x / W));
  }
  return frac * 0.1;
}

function drift(dt) {
  const pad = 28;
  for (let i = 0; i < N; i++) {
    xs[i] += vxs[i] * dt; ys[i] += vys[i] * dt;
    if (xs[i] < pad) { xs[i] = pad; vxs[i] = -vxs[i]; }
    if (xs[i] > W - pad) { xs[i] = W - pad; vxs[i] = -vxs[i]; }
    if (ys[i] < pad + 60) { ys[i] = pad + 60; vys[i] = -vys[i]; }
    if (ys[i] > H - pad) { ys[i] = H - pad; vys[i] = -vys[i]; }
    vxs[i] += (Math.random() - 0.5) * 4 * dt;
    vys[i] += (Math.random() - 0.5) * 4 * dt;
    const sp = Math.hypot(vxs[i], vys[i]);
    if (sp > 22) { vxs[i] *= 22 / sp; vys[i] *= 22 / sp; }
  }
}

function tick({ ctx, dt, width, height, input }) {
  if (width !== W || height !== H) { W = width; H = height; }
  p = pFromInput(input);
  if (Math.abs(p - lastP) > 0.0008) { buildEdges(p); lastP = p; }
  drift(Math.min(dt, 0.05));

  ctx.fillStyle = "#0a0d14";
  ctx.fillRect(0, 0, W, H);

  let giantId = -1, best = 0;
  for (let c = 0; c < numComps; c++) {
    if (compSize[c] > best) { best = compSize[c]; giantId = c; }
  }

  // Edges: gray pass, then red pass so giant lines paint on top.
  ctx.lineWidth = 1;
  ctx.strokeStyle = "rgba(140,150,170,0.35)";
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const row = i * N;
    for (let j = i + 1; j < N; j++) {
      if (!adj[row + j]) continue;
      if (comp[i] === giantId && comp[j] === giantId) continue;
      ctx.moveTo(xs[i], ys[i]); ctx.lineTo(xs[j], ys[j]);
    }
  }
  ctx.stroke();

  ctx.strokeStyle = "rgba(255,70,70,0.85)";
  ctx.lineWidth = 1.4;
  ctx.beginPath();
  for (let i = 0; i < N; i++) {
    const row = i * N;
    for (let j = i + 1; j < N; j++) {
      if (!adj[row + j]) continue;
      if (comp[i] !== giantId || comp[j] !== giantId) continue;
      ctx.moveTo(xs[i], ys[i]); ctx.lineTo(xs[j], ys[j]);
    }
  }
  ctx.stroke();

  for (let i = 0; i < N; i++) {
    const inG = comp[i] === giantId && giantSize > 1;
    ctx.fillStyle = inG ? "#ff5050" : "#9aa3b4";
    ctx.beginPath();
    ctx.arc(xs[i], ys[i], inG ? 3.6 : 2.6, 0, Math.PI * 2);
    ctx.fill();
  }

  drawHUD(ctx);
}

function drawHUD(ctx) {
  const pad = 12, pc = 1 / N;
  const meanDeg = (numEdges * 2) / N, giantFrac = giantSize / N;

  ctx.fillStyle = "rgba(0,0,0,0.6)";
  ctx.fillRect(pad, pad, 252, 104);
  ctx.fillStyle = "#fff";
  ctx.font = "13px monospace";
  ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
  ctx.fillText(`n     = ${N}`, pad + 10, pad + 20);
  ctx.fillText(`p     = ${p.toFixed(4)}`, pad + 10, pad + 38);
  ctx.fillText(`p_c   = 1/n = ${pc.toFixed(4)}`, pad + 10, pad + 56);
  ctx.fillText(`<k>   = ${meanDeg.toFixed(2)}    edges ${numEdges}`, pad + 10, pad + 74);
  ctx.fillText(`giant = ${giantSize}/${N}  (${(giantFrac * 100).toFixed(0)}%)`, pad + 10, pad + 92);

  let regime, color;
  if (p < pc * 0.7) { regime = "subcritical  (only tiny components)"; color = "#7aa2f7"; }
  else if (p < pc * 1.4) { regime = "PHASE TRANSITION  (p ~ 1/n)"; color = "#ffd17a"; }
  else { regime = "supercritical  (giant component dominates)"; color = "#ff7a7a"; }
  ctx.fillStyle = "rgba(0,0,0,0.6)";
  ctx.fillRect(pad, H - pad - 28, 360, 28);
  ctx.fillStyle = color;
  ctx.fillText(regime, pad + 10, H - pad - 10);

  const bx = pad + 264, by = pad, bw = W - (pad + 264) - pad, bh = 18;
  if (bw > 80) {
    ctx.fillStyle = "rgba(0,0,0,0.55)";
    ctx.fillRect(bx, by, bw, bh + 20);
    ctx.fillStyle = "#2a3554";
    ctx.fillRect(bx + 6, by + 6, bw - 12, bh - 12);
    const frac = Math.max(0, Math.min(1, p / 0.1));
    ctx.fillStyle = "#ff5050";
    ctx.fillRect(bx + 6, by + 6, (bw - 12) * frac, bh - 12);
    const cfrac = pc / 0.1;
    ctx.strokeStyle = "#ffd17a"; ctx.lineWidth = 2;
    ctx.beginPath();
    ctx.moveTo(bx + 6 + (bw - 12) * cfrac, by + 2);
    ctx.lineTo(bx + 6 + (bw - 12) * cfrac, by + bh + 2);
    ctx.stroke();
    ctx.fillStyle = "#fff"; ctx.font = "11px monospace";
    ctx.fillText("move cursor X to scrub p   (marker = p_c)", bx + 6, by + bh + 16);
  }
}