Home▸Weather▸Raindrop Refraction Lab (2D)

Raindrop Refraction Lab (2D)

Each raindrop sliding down the glass acts as a tiny plano-convex lens: drag the refractive-index, droplet-size and scene-distance sliders to watch the Snell's-law-derived thin-lens equation flip the view inside every drop between a magnified upright image and a shrunk inverted one, with live focal length, image distance and magnification readouts.

Weather2DModerate60 FPS📱 Mobile-adapted⇄ 3D version

The 3D original shows raindrops flowing and merging on a window pane; this 2D companion takes the optics its title promises and actually computes them. Every drop on screen is treated as a plano-convex lens — flat where it touches the glass, curved on the outside — with a focal length set by Snell's law via f = R/(n−1). The thin-lens equation then decides, per drop and in real time, whether the crop of scenery rendered inside it is a real, inverted image or a virtual, magnified, upright one, exactly the way a hand lens flips a view when you move it past its focal length. Dragging the refractive-index, droplet-size or scene-distance slider crosses that boundary live, and the readout panel reports the focal length, image distance and magnification driving what's on screen.

⚙ Under the hood

2D Canvas raindrop-refraction lab: each drop is a plano-convex lens (f = R/(n-1) from Snell's law), rendered by clipping a circle and drawing a scaled/inverted crop of a static background scene through the thin-lens equation (1/d₀ + 1/dᵢ = 1/f, m = -dᵢ/d₀) — a genuine optical computation, not a texture.

refractionsnell's lawthin lens equationopticsraindropsmagnification

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install