Topographic flow guide

Overview

Topographic flow draws a picture as a map: its brightness becomes height, and coloured contour lines trace that height and move when you tap.

A patterned figure drawn as a map of glowing coloured contour lines on dim, shaded ground, a second figure showing through
The Relief map preset halfway through a run from picture A to picture B.

Each pixel's brightness is read as a height, so bright parts become hills and dark parts valleys. See height from luminance and heightmap. The picture is blurred first, so the ground is smooth. See contour smoothing.

Lines join the points of equal height, as on a hiking map. See contour line and topographic map. Every fifth line is drawn heavier. See index contour.

Each line takes the colour of the picture under it. Between the lines the picture shows dimmed and shaded as if lit from the upper left. See hillshade.

A run moves the lines across the ground. With A → B terrain on, as the page opens, the same run also turns the ground and colours of picture A into those of picture B, and the next run goes back. See image transition and picture A and picture B.

One number, the transition progress, runs from 0 to 1 over the run, and an easing curve sets how it speeds up and slows down. The lines are drawn for each pixel in a fragment shader on the GPU.

Six presets set every control at once: Relief map, Dune rings, Copper plate, Fine survey, Tidal and Topo bloom. You can swap in your own two pictures, and keep a PNG or a video.

Open Topographic flow Start here

In this guide

  1. StartWhat you need and your first map in five steps.
  2. Every controlEvery control in the panel, one line each.
  3. Three looksThree presets caught halfway from A to B, and how each was made.
  4. Keep your workThe PNG and the video.
  5. HelpWhat to do when something goes wrong.

It runs in your browser with WebGL. Your pictures stay on your device and nothing is uploaded. A mouse, a trackpad, a pen and a finger all work.