LIVE REBUILD / THE SKETCHBOOK · NINE SINGAPORE PLATES
A watercolour field manual
A sketchbook that opens on the desk like a real object: leaves that bend when you drag them, a brass glass you can pick up and glide across the ink, a book that leans toward your cursor. Every plate below — Marina Bay to Pulau Ubin — is painted from scratch at boot by seeded canvas code, so every reload shows the exact same watercolour.
Vanilla JavaScript + Canvas 2D effect
PLATES / THE CITY IN INK AND A LITTLE COLOUR
Nine spreads, zero images
The original page ships AI-generated watercolour PNGs of Singapore. This rebuild keeps the experience but repaints every spread live: wet-in-wet gradient washes, paper-grain noise, jittered ink line-work, botanical corner ornaments, plate numerals and handwritten captions — all drawn onto offscreen canvases from a fixed seed the moment the page loads.
METHOD / HOW IT IS MADE
iThe bending leaf
A turned page is not a flat door. The leaf is cut into sixteen vertical strips whose tangent sweeps through an arc — base angle θ·t plus a curl of β·sin(πt) that peaks mid-turn and flattens at both ends. Each strip samples its slice of the spread art, flips to the reverse face past vertical, and carries a shading gradient derived from its facing angle, so paper bends the way paper bends. On release, drag velocity decides: past 42 percent of the arc or flicked fast enough the turn commits, otherwise the leaf falls back.
iiThe brass glass
The magnifier lies on the desk above the book, outside the tilt layer, so leaning the page never drags it along. Its lens re-samples the composited scene — desk, paper, ink — at 2.3× inside a clipped circle with rim highlights, colour fringing and dome speculars. Start a turn while it rests on the page and the sweeping leaf shoves it smoothly aside; when the leaf lands, the glass eases back home.
iiiSeeded watercolour
One 32-bit seed feeds a mulberry32 generator per plate. Washes are stacked radial gradients multiplied into wet paper; grain is a tiled noise pattern; every ink stroke is a polyline jittered by the same stream — skylines, supertrees, lantern strings, jetty planks. Determinism means reloads are pixel-identical, and no external image is loaded anywhere in the demo.
Every spread is painted at boot by seeded Canvas 2D code — paper grain, watercolour washes, ink linework. Drag a page: the bend math, velocity commit and magnifier behaviour are all original implementation.