Rain

Rain is a window on a wet night. The glass is misted over, and behind it a city street glows: lit windows, shop signs, street lamps and the lights of passing cars. Wipe the glass with your finger or mouse to look outside. Drops gather, grow heavy, run down and leave clear trails through the mist, and the mist slowly creeps back over everything you wiped. Switch between drizzle, rain and a storm with lightning, or mist the window up again.

How it works

The street is painted once at full resolution, along with a blurred copy for the misted glass. On top sits a small water layer where every bead and running drop is drawn as a tiny lens: its colour stores which way its surface tilts and how thick it is. A shader mixes sharp and misted street by how clear the glass is at each pixel, then bends the view through every drop, adds a dark rim and a highlight, so each drop shows a small upside-down piece of the street like real water does. Running drops eat the beads in their path and wipe a clear trail behind them. The mist returns in small steps a few times a second.

Everything you hear is synthesised: the rain itself (heavier and brighter with the weather), single drops ticking on the glass, the squeak of a finger on wet glass, and thunder after the lightning.

Built with

• A WebGL2 shader for refraction, mist and lightning
• A Canvas 2D water layer with a simple simulation of beads and running drops
• Web Audio API for rain, ticks, wiping and thunder