Two Shores
Brush away a beach to find the open sea underneath, where a whole day passes from dawn through sunset to a starlit night - or freeze it all into Antarctica.
Sand Simulation · Day Cycle · 2026
How it is made
The beach is a height field simulated on the CPU. Brushing scoops sand from under the pointer and throws it ahead of the stroke, an avalanche pass slides anything steeper than the angle of repose downhill so dug sand banks into ridges, and the wind slowly drifts it all back. The field is uploaded as a float texture each frame, displacing the sand mesh and lighting it with per-pixel normals, wet darkening and glittering grains. Thrown grains fly as ballistic particles. Wherever the sand runs out, a separately rendered ocean shows through in screen space behind a line of foam. The sea is Gerstner swells shaded per pixel with wind ripples, Fresnel sky reflection, light scattering through the crests, sun and moon glints and whitecaps, under a procedural sky whose colours are all keyed off sun elevation. The freeze sweeps in from the screen edges along a ragged frost front drawn from ridged noise, each pixel turning over at its own moment: the beach becomes blue-shadowed snow that holds steeper walls and refills under falling snow, the shoreline becomes a rim of glacial ice, falling snow drifts down in near and far layers, the sea calms to glass, weathered icebergs surface one by one while pancake ice spreads outward across the water, and the polar night brings a volumetric aurora - the view ray marched through layers of folded triangle-wave noise, gathered into arcs - that the sea reflects and that wash green over the snow. Halfway through, the whole screen glazes over with feathery frost and clears again. The thaw runs the same front backwards. The sand height field is uploaded as half floats so phones can filter it.
Techniques: Height-field sand simulation · Angle-of-repose avalanching · Ballistic grain particles · Screen-space portal · Gerstner ocean · Procedural day cycle · Frost-front transition · Procedural aurora
This interactive WebGL sketch requires JavaScript.