Galton Board: Binomial → Normal

// Galton board → binomial → normal
// Balls drop through a triangular grid of pegs. At each peg they go L/R with p=0.5.
// Collect in bins at the bottom. Histogram updates live; overlay theoretical
// binomial PMF and normal approximation N(np, np(1-p)).

const ROWS = 12;
const N_BINS = ROWS + 1;
const P = 0.5;

let W, H;
let pegs;          // array of {x, y} in canvas px
let pegRadius;
let binW, binH;
let binTopY;
let counts;        // length N_BINS
let total;
let balls;         // active balls
let frameCount;
let dropRate;      // balls per frame target (auto)

// Precomputed analytics
let binomial;      // length N_BINS, P(k)
let mu, sigma;     // normal approx params (in k units)

function logChoose(n, k) {
  // log C(n,k) via lgamma-ish (we only need n=12, can compute directly)
  let r = 1;
  for (let i = 1; i <= k; i++) r = (r * (n - k + i)) / i;
  return Math.log(r);
}

function choose(n, k) {
  let r = 1;
  for (let i = 1; i <= k; i++) r = (r * (n - k + i)) / i;
  return r;
}

function precompute() {
  binomial = new Array(N_BINS);
  for (let k = 0; k < N_BINS; k++) {
    binomial[k] = choose(ROWS, k) * Math.pow(P, k) * Math.pow(1 - P, ROWS - k);
  }
  mu = ROWS * P;
  sigma = Math.sqrt(ROWS * P * (1 - P));
}

function layout(width, height) {
  W = width;
  H = height;

  // peg field occupies top ~55% of canvas
  const fieldTop = 50;
  const fieldHeight = H * 0.55;
  const fieldBottom = fieldTop + fieldHeight;
  const fieldCx = W / 2;
  const rowSpacing = fieldHeight / (ROWS + 1);

  pegs = [];
  // row r has r+1 pegs (r=0 has 1 peg at top)
  // peg horizontal spacing: keep pegs inside ~80% of width
  const maxRowWidth = Math.min(W * 0.85, fieldHeight * 1.2);
  const pegSpacingX = maxRowWidth / (ROWS); // distance between adjacent pegs in last row
  pegRadius = Math.max(2, Math.min(4, pegSpacingX * 0.12));

  for (let r = 0; r < ROWS; r++) {
    const y = fieldTop + (r + 1) * rowSpacing;
    const nInRow = r + 1;
    const rowWidth = r * pegSpacingX;
    const startX = fieldCx - rowWidth / 2;
    for (let i = 0; i < nInRow; i++) {
      pegs.push({ x: startX + i * pegSpacingX, y, row: r, col: i });
    }
  }

  // bins are below the field
  binTopY = fieldBottom + 10;
  binH = H - binTopY - 90;            // leave 90px at bottom for HUD
  // bin width matches peg spacing
  binW = pegSpacingX * 0.92;

  return { fieldTop, fieldBottom, fieldCx, rowSpacing, pegSpacingX };
}

function spawnBall(meta) {
  // start above row 0
  balls.push({
    x: meta.fieldCx + (Math.random() - 0.5) * 4,
    y: 20,
    vx: 0,
    vy: 0,
    row: -1,        // not yet entered grid
    col: 0,         // logical "lateral count of rights"
    settled: false,
    bin: -1,
    hue: Math.random() * 360,
  });
}

function stepBall(b, dt, meta) {
  if (b.settled) return;
  // simple physics — gravity
  const g = 1200; // px/s^2
  b.vy += g * dt;
  b.y += b.vy * dt;
  b.x += b.vx * dt;
  // slight horizontal drag
  b.vx *= Math.pow(0.5, dt * 8);

  // collision with next peg row
  const nextRow = b.row + 1;
  if (nextRow < ROWS) {
    const rowY = meta.fieldTop + (nextRow + 1) * meta.rowSpacing;
    if (b.y >= rowY) {
      // decide left or right
      const goRight = Math.random() < P;
      // bounce off peg
      const lateralKick = meta.pegSpacingX * 0.5;
      b.vx = (goRight ? 1 : -1) * lateralKick / 0.18;
      b.vy = Math.max(0, b.vy * 0.55);
      b.y = rowY + 0.5;
      if (goRight) b.col++;
      b.row = nextRow;
    }
  } else {
    // past last peg row → falling into bin
    if (b.y >= binTopY) {
      // determine bin index = b.col  (which can be 0..ROWS)
      b.bin = Math.max(0, Math.min(N_BINS - 1, b.col));
      // settle at top of stack in that bin
      const stackHeight = counts[b.bin] * (pegRadius * 1.8);
      const targetY = binTopY + binH - stackHeight - pegRadius;
      if (b.y >= targetY) {
        b.y = targetY;
        b.settled = true;
        counts[b.bin]++;
        total++;
        // clamp if overflowing visible bin
        if (counts[b.bin] * (pegRadius * 1.8) > binH - 4) {
          // recycle: drop oldest by scaling — we'll just remove from "balls" list
          // (count is preserved)
        }
      }
    }
  }
}

function init({ canvas, ctx, width, height }) {
  precompute();
  counts = new Array(N_BINS).fill(0);
  total = 0;
  balls = [];
  frameCount = 0;
  dropRate = 0.6;        // 0.6 balls/frame ≈ 36/s
  layout(width, height);
}

function tick({ ctx, dt, frame, width, height, input }) {
  if (width !== W || height !== H) layout(width, height);
  const meta = layout(width, height);  // recompute meta each frame (cheap)
  frameCount++;

  // click to reset the experiment
  if (input && input.consumeClicks && input.consumeClicks() > 0) {
    counts = new Array(N_BINS).fill(0);
    total = 0;
    balls = [];
  }

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

  // spawn new balls
  // accelerate over first ~200 frames, plateau at ~40/s
  const targetRate = 0.7;
  let toSpawn = targetRate + (Math.random() < 0.5 ? 0 : 1);
  // limit active in-flight balls
  let inFlight = 0;
  for (const b of balls) if (!b.settled) inFlight++;
  if (inFlight > 200) toSpawn = 0;
  for (let i = 0; i < toSpawn; i++) spawnBall(meta);

  // step
  const physDt = Math.min(dt, 0.033);
  for (const b of balls) stepBall(b, physDt, meta);

  // recycle: cap balls array — if a bin column is full, we keep counts but stop drawing extras
  if (balls.length > 1200) {
    // drop earliest settled
    balls = balls.filter((b, i) => !b.settled || i >= balls.length - 800);
  }

  // also: if any bin is overfilled (visually), trim settled visible balls but keep count
  for (let k = 0; k < N_BINS; k++) {
    const maxVisible = Math.floor((binH - 4) / (pegRadius * 1.8));
    let visible = 0;
    for (let i = balls.length - 1; i >= 0; i--) {
      const b = balls[i];
      if (b.settled && b.bin === k) {
        visible++;
        if (visible > maxVisible) balls.splice(i, 1);
      }
    }
  }

  // ---- draw pegs ----
  ctx.fillStyle = '#5a5a7a';
  for (const p of pegs) {
    ctx.beginPath();
    ctx.arc(p.x, p.y, pegRadius, 0, Math.PI * 2);
    ctx.fill();
  }

  // ---- draw bin boundaries ----
  ctx.strokeStyle = '#2a2a38';
  ctx.lineWidth = 1;
  for (let k = 0; k <= N_BINS; k++) {
    const x = meta.fieldCx - (N_BINS / 2) * meta.pegSpacingX + k * meta.pegSpacingX;
    ctx.beginPath();
    ctx.moveTo(x, binTopY);
    ctx.lineTo(x, binTopY + binH);
    ctx.stroke();
  }
  // floor
  ctx.beginPath();
  ctx.moveTo(meta.fieldCx - (N_BINS / 2) * meta.pegSpacingX, binTopY + binH);
  ctx.lineTo(meta.fieldCx + (N_BINS / 2) * meta.pegSpacingX, binTopY + binH);
  ctx.stroke();

  // ---- draw balls ----
  for (const b of balls) {
    ctx.fillStyle = `hsl(${b.hue.toFixed(0)}, 80%, ${b.settled ? 55 : 65}%)`;
    ctx.beginPath();
    ctx.arc(b.x, b.y, pegRadius * 0.95, 0, Math.PI * 2);
    ctx.fill();
  }

  // ---- analytic overlay ----
  // Histogram bin tops + theoretical curve
  // Frequency f_k = counts[k] / total. Theoretical = binomial[k].
  // Normal approx pdf at k: 1/(sigma sqrt(2π)) exp(-(k-mu)^2/(2 sigma^2))
  const binLeftX = meta.fieldCx - (N_BINS / 2) * meta.pegSpacingX;
  const maxP = Math.max(...binomial) * 1.15;

  // Empirical bars in a panel above the bins? Actually use the bin area itself —
  // overlay translucent reference curve at the *top* of each bin showing theoretical
  // expected count. Plus a small numeric panel below.

  // Curve: theoretical expected count = N * binomial[k]
  // Map empirical freq vs binomial[k] → translucent reference line in each bin
  ctx.strokeStyle = 'rgba(255, 200, 80, 0.85)';
  ctx.lineWidth = 2;
  ctx.beginPath();
  for (let k = 0; k < N_BINS; k++) {
    const cx = binLeftX + (k + 0.5) * meta.pegSpacingX;
    const expFreq = binomial[k];
    const y = binTopY + binH - (expFreq / maxP) * binH;
    if (k === 0) ctx.moveTo(cx, y);
    else ctx.lineTo(cx, y);
  }
  ctx.stroke();

  // Normal approx curve (continuous over k)
  ctx.strokeStyle = 'rgba(120, 200, 255, 0.7)';
  ctx.lineWidth = 1.5;
  ctx.setLineDash([4, 3]);
  ctx.beginPath();
  const STEPS = 200;
  for (let s = 0; s <= STEPS; s++) {
    const k = (s / STEPS) * ROWS;
    const cx = binLeftX + (k + 0.5) * meta.pegSpacingX;
    const pdf = (1 / (sigma * Math.sqrt(2 * Math.PI))) *
                Math.exp(-((k - mu) ** 2) / (2 * sigma * sigma));
    const y = binTopY + binH - (pdf / maxP) * binH;
    if (s === 0) ctx.moveTo(cx, y);
    else ctx.lineTo(cx, y);
  }
  ctx.stroke();
  ctx.setLineDash([]);

  // ---- HUD / labels ----
  ctx.fillStyle = '#e8e8f0';
  ctx.font = 'bold 16px monospace';
  ctx.fillText('Galton Board · Binomial(12, 0.5) → Normal', 20, 26);
  ctx.font = '12px monospace';
  ctx.fillStyle = '#aab';
  ctx.fillText(`pegs: ${ROWS} rows · bins: ${N_BINS} · p = ${P}`, 20, 44);

  // Legend
  const legX = W - 220;
  ctx.fillStyle = 'rgba(255,200,80,0.85)';
  ctx.fillRect(legX, 12, 14, 3);
  ctx.fillStyle = '#ddd';
  ctx.font = '11px monospace';
  ctx.fillText('binomial PMF (exact)', legX + 20, 17);
  ctx.fillStyle = 'rgba(120,200,255,0.85)';
  ctx.fillRect(legX, 28, 14, 3);
  ctx.fillStyle = '#ddd';
  ctx.fillText(`normal N(${mu.toFixed(1)}, ${(sigma * sigma).toFixed(2)})`, legX + 20, 33);

  // HUD: counts and empirical vs theoretical
  const hudY = binTopY + binH + 18;
  ctx.font = '12px monospace';
  ctx.fillStyle = '#9cf';
  ctx.fillText(`total balls: ${total}`, 20, hudY);

  // bin freqs row — show k, count, empirical, theoretical
  ctx.font = '10px monospace';
  ctx.fillStyle = '#888';
  for (let k = 0; k < N_BINS; k++) {
    const cx = binLeftX + (k + 0.5) * meta.pegSpacingX;
    ctx.fillStyle = '#aaa';
    ctx.textAlign = 'center';
    ctx.fillText(`${k}`, cx, hudY + 16);
    if (total > 0) {
      const emp = counts[k] / total;
      ctx.fillStyle = emp > binomial[k] ? '#9f9' : '#fc9';
      ctx.fillText(emp.toFixed(3), cx, hudY + 30);
      ctx.fillStyle = '#fc6';
      ctx.fillText(binomial[k].toFixed(3), cx, hudY + 44);
    }
  }
  ctx.textAlign = 'left';
  ctx.fillStyle = '#888';
  ctx.fillText('k', 20, hudY + 16);
  ctx.fillStyle = '#9f9';
  ctx.fillText('emp', 20, hudY + 30);
  ctx.fillStyle = '#fc6';
  ctx.fillText('thy', 20, hudY + 44);
}