Galton Board: Central Limit Theorem

let pegs = [];
let balls = [];
let bins = [];
let rows = 14;
let pegSpacing = 28;
let pegRadius = 3;
let ballRadius = 4;
let boardTop = 60;
let boardLeft = 0;
let binCount = 0;
let binTop = 0;
let binBottom = 0;
let totalLanded = 0;

function init({ canvas, ctx, width, height, input }) {
  pegs = [];
  balls = [];
  binCount = rows + 1;
  pegSpacing = Math.min(28, (width - 40) / (binCount + 1));
  boardTop = 50;
  let boardHeight = rows * pegSpacing;
  binTop = boardTop + boardHeight + 10;
  binBottom = height - 10;
  let centerX = width / 2;
  for (let r = 0; r < rows; r++) {
    let y = boardTop + r * pegSpacing;
    let count = r + 1;
    let rowWidth = (count - 1) * pegSpacing;
    let startX = centerX - rowWidth / 2;
    for (let c = 0; c < count; c++) {
      pegs.push({ x: startX + c * pegSpacing, y: y });
    }
  }
  boardLeft = centerX - (binCount - 1) * pegSpacing / 2 - pegSpacing / 2;
  bins = new Array(binCount).fill(0);
}

function spawnBall(width) {
  let centerX = width / 2;
  balls.push({
    x: centerX + (Math.random() - 0.5) * 4,
    y: 10,
    vx: 0,
    vy: 0,
    hue: 180 + Math.random() * 120,
    bounces: 0,
    landed: false,
    landY: 0
  });
}

function tick({ ctx, dt, frame, time, width, height, input }) {
  let clicks = input.consumeClicks();
  for (let i = 0; i < clicks.length; i++) {
    for (let j = 0; j < 10; j++) spawnBall(width);
  }
  if (frame % 2 === 0) spawnBall(width);

  ctx.fillStyle = "#0a0e1a";
  ctx.fillRect(0, 0, width, height);

  let grad = ctx.createLinearGradient(0, 0, 0, height);
  grad.addColorStop(0, "rgba(40,60,120,0.15)");
  grad.addColorStop(1, "rgba(10,14,26,0)");
  ctx.fillStyle = grad;
  ctx.fillRect(0, 0, width, height);

  let g = 380;
  let step = Math.min(dt, 0.033);

  for (let i = balls.length - 1; i >= 0; i--) {
    let b = balls[i];
    if (b.landed) continue;
    b.vy += g * step;
    b.x += b.vx * step;
    b.y += b.vy * step;
    b.vx *= 0.985;

    for (let p = 0; p < pegs.length; p++) {
      let peg = pegs[p];
      let dx = b.x - peg.x;
      let dy = b.y - peg.y;
      let rr = pegRadius + ballRadius;
      if (dx * dx + dy * dy < rr * rr) {
        let dir = Math.random() < 0.5 ? -1 : 1;
        b.vx = dir * (55 + Math.random() * 25);
        b.vy = Math.abs(b.vy) * 0.35 + 30;
        b.y = peg.y + rr + 0.5;
        b.x = peg.x + dir * (rr * 0.6);
        b.bounces++;
        break;
      }
    }

    if (b.y > binTop) {
      let idx = Math.floor((b.x - boardLeft) / pegSpacing);
      idx = Math.max(0, Math.min(binCount - 1, idx));
      bins[idx]++;
      totalLanded++;
      let stackH = bins[idx] * 2;
      let landY = binBottom - stackH;
      b.landed = true;
      b.landX = boardLeft + (idx + 0.5) * pegSpacing;
      b.landY = Math.max(binTop + 4, landY);
      if (bins[idx] * 2 > binBottom - binTop - 20) {
        for (let k = 0; k < binCount; k++) bins[k] = Math.floor(bins[k] * 0.6);
        balls = balls.filter(bb => !bb.landed);
        totalLanded = Math.floor(totalLanded * 0.6);
      }
    }
  }

  ctx.fillStyle = "#7a8aa8";
  for (let p = 0; p < pegs.length; p++) {
    ctx.beginPath();
    ctx.arc(pegs[p].x, pegs[p].y, pegRadius, 0, Math.PI * 2);
    ctx.fill();
  }

  ctx.strokeStyle = "rgba(120,140,180,0.25)";
  ctx.lineWidth = 1;
  for (let i = 0; i <= binCount; i++) {
    let x = boardLeft + i * pegSpacing;
    ctx.beginPath();
    ctx.moveTo(x, binTop);
    ctx.lineTo(x, binBottom);
    ctx.stroke();
  }

  for (let i = 0; i < binCount; i++) {
    let h = bins[i] * 2;
    let x = boardLeft + i * pegSpacing + 1;
    let y = binBottom - h;
    let hue = 200 + (i / binCount) * 80;
    ctx.fillStyle = `hsl(${hue}, 70%, 55%)`;
    ctx.fillRect(x, y, pegSpacing - 2, h);
  }

  for (let i = 0; i < balls.length; i++) {
    let b = balls[i];
    let bx = b.landed ? b.landX : b.x;
    let by = b.landed ? b.landY : b.y;
    ctx.fillStyle = `hsl(${b.hue}, 80%, 65%)`;
    ctx.beginPath();
    ctx.arc(bx, by, ballRadius, 0, Math.PI * 2);
    ctx.fill();
  }

  if (totalLanded > 50) {
    let N = rows;
    let p = 0.5;
    let mu = N * p;
    let variance = N * p * (1 - p);
    let sigma = Math.sqrt(variance);
    let maxBin = Math.max(1, ...bins);
    let peakPdf = 1 / (sigma * Math.sqrt(2 * Math.PI));
    let scale = (maxBin * 2) / peakPdf;
    ctx.strokeStyle = "rgba(255,180,80,0.95)";
    ctx.lineWidth = 2;
    ctx.beginPath();
    for (let i = 0; i <= binCount * 4; i++) {
      let k = i / 4;
      let xPix = boardLeft + (k + 0.5) * pegSpacing;
      let z = (k - mu) / sigma;
      let pdf = Math.exp(-0.5 * z * z) / (sigma * Math.sqrt(2 * Math.PI));
      let h = pdf * scale;
      let y = binBottom - h;
      if (i === 0) ctx.moveTo(xPix, y); else ctx.lineTo(xPix, y);
    }
    ctx.stroke();
    ctx.fillStyle = "rgba(255,180,80,0.9)";
    ctx.font = "12px system-ui, sans-serif";
    ctx.fillText(`N(μ=${mu.toFixed(1)}, σ²=${variance.toFixed(2)})`, 12, 24);
  }

  ctx.fillStyle = "rgba(200,220,255,0.7)";
  ctx.font = "11px system-ui, sans-serif";
  ctx.fillText(`balls landed: ${totalLanded}  ·  click for burst`, 12, height - 16);
}