Bond Percolation on a 2D Lattice

// Bond percolation on a 60x40 grid. Each of the ~4720 edges is open with
// probability p, controlled by mouse-X (left edge = 0, right edge = 1).
// Union-Find groups sites connected by open bonds; the largest cluster is
// drawn in red. Below p_c = 1/2 only small islands appear; above it a
// percolating cluster wells up and spans the lattice.

const COLS = 60, ROWS = 40;
const N = COLS * ROWS;

let W = 0, H = 0;
let p = 0.5;
let hEdges, vEdges;       // Uint8Array flags, 1 = open
let parent, rank_, sz;    // union-find
let largestRoot = -1, largestSize = 0;
let spans = false;
let leftTouch = false, rightTouch = false;
let acc = 0;

function find(x) {
  while (parent[x] !== x) {
    parent[x] = parent[parent[x]];
    x = parent[x];
  }
  return x;
}

function union(a, b) {
  const ra = find(a), rb = find(b);
  if (ra === rb) return;
  if (rank_[ra] < rank_[rb]) {
    parent[ra] = rb; sz[rb] += sz[ra];
  } else if (rank_[ra] > rank_[rb]) {
    parent[rb] = ra; sz[ra] += sz[rb];
  } else {
    parent[rb] = ra; sz[ra] += sz[rb]; rank_[ra]++;
  }
}

function rebuild() {
  // sample edges
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS - 1; x++) {
      hEdges[y * (COLS - 1) + x] = Math.random() < p ? 1 : 0;
    }
  }
  for (let y = 0; y < ROWS - 1; y++) {
    for (let x = 0; x < COLS; x++) {
      vEdges[y * COLS + x] = Math.random() < p ? 1 : 0;
    }
  }
  // reset union-find
  for (let i = 0; i < N; i++) { parent[i] = i; rank_[i] = 0; sz[i] = 1; }
  // merge via open bonds
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS - 1; x++) {
      if (hEdges[y * (COLS - 1) + x]) union(y * COLS + x, y * COLS + x + 1);
    }
  }
  for (let y = 0; y < ROWS - 1; y++) {
    for (let x = 0; x < COLS; x++) {
      if (vEdges[y * COLS + x]) union(y * COLS + x, (y + 1) * COLS + x);
    }
  }
  // find largest cluster
  largestRoot = -1; largestSize = 0;
  for (let i = 0; i < N; i++) {
    if (parent[i] === i && sz[i] > largestSize) {
      largestSize = sz[i]; largestRoot = i;
    }
  }
  // spanning test: does the largest cluster touch both left and right cols?
  leftTouch = false; rightTouch = false;
  for (let y = 0; y < ROWS; y++) {
    if (find(y * COLS) === largestRoot) leftTouch = true;
    if (find(y * COLS + COLS - 1) === largestRoot) rightTouch = true;
  }
  spans = leftTouch && rightTouch;
}

function init({ width, height }) {
  W = width; H = height;
  hEdges = new Uint8Array(ROWS * (COLS - 1));
  vEdges = new Uint8Array((ROWS - 1) * COLS);
  parent = new Int32Array(N);
  rank_ = new Uint8Array(N);
  sz = new Int32Array(N);
  p = 0.5;
  rebuild();
}

function tick({ ctx, dt, width, height, input }) {
  W = width; H = height;

  // mouse X scrubs p
  const newP = Math.max(0, Math.min(1, input.mouseX / W));
  if (Math.abs(newP - p) > 0.005) {
    p = newP;
    rebuild();
  }

  // re-roll a fresh realization a couple of times per second so the user
  // sees the distribution, not one frozen sample
  acc += dt;
  if (acc > 0.4) { acc = 0; rebuild(); }

  // background
  ctx.fillStyle = '#0a0d14';
  ctx.fillRect(0, 0, W, H);

  // layout: leave HUD strip at top and bottom
  const padT = 30, padB = 26, padX = 16;
  const gw = W - 2 * padX;
  const gh = H - padT - padB;
  const cell = Math.min(gw / COLS, gh / ROWS);
  const ox = (W - cell * COLS) / 2;
  const oy = padT + (gh - cell * ROWS) / 2;

  // nodes — gray by default, red if part of largest cluster
  const nodeR = Math.max(1.2, cell * 0.18);
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS; x++) {
      const idx = y * COLS + x;
      const inBig = find(idx) === largestRoot && largestSize > 1;
      ctx.fillStyle = inBig ? '#ff5a5f' : 'rgba(180,195,215,0.55)';
      ctx.beginPath();
      ctx.arc(ox + (x + 0.5) * cell, oy + (y + 0.5) * cell, nodeR, 0, Math.PI * 2);
      ctx.fill();
    }
  }

  // bonds
  ctx.lineWidth = Math.max(1, cell * 0.10);
  for (let y = 0; y < ROWS; y++) {
    for (let x = 0; x < COLS - 1; x++) {
      if (!hEdges[y * (COLS - 1) + x]) continue;
      const inBig = find(y * COLS + x) === largestRoot;
      ctx.strokeStyle = inBig ? 'rgba(255,90,95,0.95)' : 'rgba(140,170,210,0.45)';
      ctx.beginPath();
      ctx.moveTo(ox + (x + 0.5) * cell, oy + (y + 0.5) * cell);
      ctx.lineTo(ox + (x + 1.5) * cell, oy + (y + 0.5) * cell);
      ctx.stroke();
    }
  }
  for (let y = 0; y < ROWS - 1; y++) {
    for (let x = 0; x < COLS; x++) {
      if (!vEdges[y * COLS + x]) continue;
      const inBig = find(y * COLS + x) === largestRoot;
      ctx.strokeStyle = inBig ? 'rgba(255,90,95,0.95)' : 'rgba(140,170,210,0.45)';
      ctx.beginPath();
      ctx.moveTo(ox + (x + 0.5) * cell, oy + (y + 0.5) * cell);
      ctx.lineTo(ox + (x + 0.5) * cell, oy + (y + 1.5) * cell);
      ctx.stroke();
    }
  }

  // p slider strip across the top
  const sliderY = 14, sliderH = 6;
  ctx.fillStyle = 'rgba(255,255,255,0.10)';
  ctx.fillRect(padX, sliderY, W - 2 * padX, sliderH);
  // mark p_c
  const pcX = padX + (W - 2 * padX) * 0.5;
  ctx.fillStyle = 'rgba(255,214,107,0.7)';
  ctx.fillRect(pcX - 1, sliderY - 3, 2, sliderH + 6);
  // current p
  const pX = padX + (W - 2 * padX) * p;
  ctx.fillStyle = spans ? '#ff5a5f' : '#7ee787';
  ctx.fillRect(pX - 2, sliderY - 4, 4, sliderH + 8);

  // HUD
  ctx.fillStyle = '#e6edf3';
  ctx.font = '12px monospace';
  ctx.fillText('p = ' + p.toFixed(3) + '   p_c = 0.500', padX, 10);
  const frac = largestSize / N;
  const status = spans ? 'SPANS' : 'no span';
  ctx.fillStyle = spans ? '#ff5a5f' : 'rgba(205,217,229,0.75)';
  ctx.fillText('largest cluster: ' + (frac * 100).toFixed(1) + '% of sites   ' + status,
               padX, H - 10);

  ctx.fillStyle = 'rgba(205,217,229,0.45)';
  ctx.font = '10px monospace';
  const hint = 'move cursor L/R to scrub p';
  ctx.fillText(hint, W - padX - ctx.measureText(hint).width, H - 10);
}