Buffon's Needle

Interactive simulation of the Buffon's Needle experiment — drop needles onto a lined surface and watch $\pi$ emerge from the chaos.

→ Live demo

What is this?

Buffon's Needle is an 18th-century probability problem: if you drop a needle of length $l$ onto a floor with parallel lines spaced $d$ apart, what's the probability it crosses a line? The answer involves $\pi$, which means you can flip it around and estimate $\pi$ just by throwing needles.

A needle crosses a line when its centre is within half a projection of the needle's length onto the perpendicular direction:

$$y_c \leq \frac{l}{2} \left|\sin\theta\right|$$

where $y_c$ is the perpendicular distance from the needle's centre to the nearest line and $\theta$ is the acute angle the needle makes with the lines.

Integrating over all positions and angles gives the crossing probability:

$$P = \frac{2l}{d\pi}$$

After $n$ drops with $c$ crossings, rearranging for $\pi$:

$$\hat{\pi} = \frac{2ln}{dc}$$

The more needles, the closer it gets. Usually.

Features

• Animated canvas — watch needles accumulate in real time
• Click anywhere on the canvas to drop a needle at that exact spot
• Speed control from "one needle every 50 frames" up to 200 per frame
• Dark and light mode
• UI in English, Czech, German and French (picked automatically from browser language)
• Parameters and live stats in a single tabbed panel

Running locally

git clone https://github.com/sejtam-dev/buffons-needle.git
cd buffons-needle
npm install
npm run dev

Then open http://localhost:3000.

npm run build   # production build
npm run lint    # ESLint

Stack

• Next.js 16 (App Router)
• TypeScript 5
• Tailwind CSS v4
• HTML5 Canvas API

Project structure

src/
├── app/          # layout, page, global CSS
├── components/   # NeedleCanvas, SidebarPanel, InfoModal, LocaleSwitcher
├── context/      # ThemeContext
├── hooks/        # useSimulation
├── i18n/         # translations + useLocale
└── types/        # shared interfaces

License

MIT © 2026 sejtam-dev