droste-lab

██████╗ ██████╗  ██████╗ ███████╗████████╗███████╗  ██╗      █████╗ ██████╗
██╔══██╗██╔══██╗██╔═══██╗██╔════╝╚══██╔══╝██╔════╝  ██║     ██╔══██╗██╔══██╗
██║  ██║██████╔╝██║   ██║███████╗   ██║   █████╗    ██║     ███████║██████╔╝
██║  ██║██╔══██╗██║   ██║╚════██║   ██║   ██╔══╝    ██║     ██╔══██║██╔══██╗
██████╔╝██║  ██║╚██████╔╝███████║   ██║   ███████╗  ███████╗██║  ██║██████╔╝
╚═════╝ ╚═╝  ╚═╝ ╚═════╝ ╚══════╝   ╚═╝   ╚══════╝  ╚══════╝╚═╝  ╚═╝╚═════╝

               w = e^z · ln z · z² · √z · 1/z · sin z · droste

Take an image, declare it a patch of the complex plane, and look at it through a conformal map. The left panel holds the source on |Re z|, |Im z| ≤ π; the right panel shows its image under w = e^z or six other maps, computed by inverse mapping with bilinear sampling. One HTML file, no build, no dependencies.

Inspired by How (and why) to take a logarithm of an image. The droste map follows the mathematics of Escher's Print Gallery worked out by Bart de Smit and Hendrik Lenstra: Artful Mathematics: The Heritage of M. C. Escher (PDF, Notices of the AMS, April 2003).

Run

Live at https://tlausz.github.io/droste-lab/ — or open index.html in a browser. The demo images are embedded as base64, so it also works straight from file://.

Features

• seven maps: e^z, ln z, z², √z, 1/z, sin z and a droste mode whose twist α is derived from the current tile lattice — one turn around the origin lands exactly one tile further, which produces the Print Gallery spiral
• tiling: the source repeats along its own rotated lattice, so the plane has no gaps and e^z wraps the image once per 2π period
• morph slider blending the identity into the chosen map, with a play button; the WebM export records one eased, loopable 8-second cycle
• grid overlay: a cartesian π/4 grid on the source, its image under the current map on the result, morphing along with the slider
• direct manipulation: corner and rotation handles on both panels, panning by drag, w/s zoom and a/d rotation with key-hold acceleration
• render-image toggle for playing with the bare grid; grid-only WebM exports come out black on white, ready for use elsewhere
• PNG export at the native resolution of the loaded image
• the whole state except the image itself lives in the URL hash, so a view can be bookmarked and shared
• light and dark theme, styled after a plate from an old mathematical atlas (see DESIGN.md)

Demo images

Every built-in image is public domain or CC0, via Wikimedia Commons:

• portrait of M. C. Escher, 1971 — Nationaal Archief / Anefo, CC0
• The Starry Night — Vincent van Gogh, 1889
• The Great Wave off Kanagawa — Katsushika Hokusai, ca. 1831
• Blue Marble — NASA, Apollo 17, 1972
• world map Nova totius Terrarum Orbis — Hendrik Hondius, 1641
• a generated checkerboard aligned with the π/4 grid

Escher's own artworks are deliberately absent: they remain under copyright until 2042.

Files

• index.html — the entire app
• default-img.js, demo-imgs.js — embedded default and demo images
• DESIGN.md — visual identity of the interface

Credits

Vibe-coded in Claude Code, with Claude as co-author.