Buffon's Needle: Monte Carlo π

const d = 60;
const L_MULTIPLIERS = [1.0, 0.75, 0.5];
let lIndex = 0;
let L = d * L_MULTIPLIERS[lIndex];
let total = 0, crossings = 0;
let history = [];
const recentNeedles = [];
const MAX_RECENT = 400;
const PI = Math.PI;

function init() {}

function dropNeedle(floorW, floorH, numLines) {
  const cx = Math.random() * floorW;
  const cy = Math.random() * floorH;
  const theta = Math.random() * PI;
  const dx = (L / 2) * Math.cos(theta);
  const dy = (L / 2) * Math.sin(theta);
  const y1 = cy - dy, y2 = cy + dy;
  const top = Math.min(y1, y2), bot = Math.max(y1, y2);
  let crosses = false;
  for (let i = 0; i < numLines; i++) {
    const ly = i * d;
    if (ly >= top && ly <= bot) { crosses = true; break; }
  }
  return { x1: cx - dx, y1, x2: cx + dx, y2, crosses };
}

function tick({ ctx, width: W, height: H, input }) {
  if (input && input.consumeClicks && input.consumeClicks() > 0) {
    lIndex = (lIndex + 1) % L_MULTIPLIERS.length;
    L = d * L_MULTIPLIERS[lIndex];
    total = 0;
    crossings = 0;
    history = [];
    recentNeedles.length = 0;
  }

  const floorW = Math.min(W * 0.55, 560);
  const floorH = Math.min(H * 0.7, 560);
  const floorX = 30;
  const floorY = (H - floorH) / 2;
  const numLines = Math.floor(floorH / d) + 1;

  const plotX = floorX + floorW + 40;
  const plotY = floorY;
  const plotW = Math.max(50, W - plotX - 30);
  const plotH = floorH;

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

  ctx.fillStyle = "#15151c";
  ctx.fillRect(floorX, floorY, floorW, floorH);

  ctx.strokeStyle = "#3a3a4a";
  ctx.lineWidth = 1;
  for (let i = 0; i < numLines; i++) {
    const y = floorY + i * d;
    ctx.beginPath();
    ctx.moveTo(floorX, y);
    ctx.lineTo(floorX + floorW, y);
    ctx.stroke();
  }

  for (let i = 0; i < 60; i++) {
    const n = dropNeedle(floorW, floorH, numLines);
    total++;
    if (n.crosses) crossings++;
    recentNeedles.push(n);
  }
  while (recentNeedles.length > MAX_RECENT) recentNeedles.shift();

  ctx.lineWidth = 1.2;
  for (const n of recentNeedles) {
    ctx.strokeStyle = n.crosses ? "rgba(255,80,80,0.75)" : "rgba(100,220,140,0.65)";
    ctx.beginPath();
    ctx.moveTo(floorX + n.x1, floorY + n.y1);
    ctx.lineTo(floorX + n.x2, floorY + n.y2);
    ctx.stroke();
  }

  const piHat = crossings > 0 ? (2 * L * total) / (d * crossings) : 0;
  history.push(piHat);
  if (history.length > plotW) history.shift();

  ctx.fillStyle = "#15151c";
  ctx.fillRect(plotX, plotY, plotW, plotH);

  const piMin = PI - 0.6, piMax = PI + 0.6;
  const toY = (v) => plotY + plotH - ((v - piMin) / (piMax - piMin)) * plotH;

  ctx.strokeStyle = "rgba(255,200,80,0.7)";
  ctx.setLineDash([4, 4]);
  ctx.beginPath();
  ctx.moveTo(plotX, toY(PI));
  ctx.lineTo(plotX + plotW, toY(PI));
  ctx.stroke();
  ctx.setLineDash([]);

  ctx.fillStyle = "rgba(255,200,80,0.9)";
  ctx.font = "11px monospace";
  ctx.fillText("π = 3.14159", plotX + 6, toY(PI) - 4);

  ctx.strokeStyle = "#6cf";
  ctx.lineWidth = 1.5;
  ctx.beginPath();
  for (let i = 0; i < history.length; i++) {
    const v = Math.max(piMin, Math.min(piMax, history[i]));
    const x = plotX + (i / Math.max(1, plotW)) * plotW;
    const y = toY(v);
    if (i === 0) ctx.moveTo(x, y); else ctx.lineTo(x, y);
  }
  ctx.stroke();

  ctx.fillStyle = "#e8e8f0";
  ctx.font = "bold 16px monospace";
  ctx.fillText("Buffon's Needle  —  Monte Carlo π", floorX, 28);
  ctx.font = "13px monospace";
  ctx.fillStyle = "#aab";
  const pCross = (2 * L) / (PI * d);
  ctx.fillText(`L = ${L_MULTIPLIERS[lIndex].toFixed(2)}·d (${L.toFixed(0)}px)   ·   p(cross) = 2L/(πd) ≈ ${pCross.toFixed(4)}`, floorX, 48);

  const hudY = floorY + floorH + 24;
  ctx.font = "13px monospace";
  ctx.fillStyle = "#9cf";
  ctx.fillText(`drops: ${total.toLocaleString()}`, floorX, hudY);
  ctx.fillStyle = "#f88";
  ctx.fillText(`crossings: ${crossings.toLocaleString()}`, floorX + 180, hudY);
  ctx.fillStyle = "#fc6";
  const err = piHat ? Math.abs(piHat - PI) : 0;
  ctx.fillText(`π̂ = ${piHat.toFixed(6)}   err = ${err.toFixed(6)}`, floorX, hudY + 22);
}