Fields and noise

Topographic map

A map of an imaginary land: contour lines with bolder index contours, hypsometric tints and hillshading.

  • GPU shader
  • seamless tile
  • looping animation
Open in the editor →

A topographic map is among the most elegant infographics: brown rings of contour lines crowding on steep slopes, green lowlands, white summits, soft shadows along the ridges. This layer draws such a map of a land that does not exist, its relief invented by fractal noise. It makes posters, backgrounds, notebook covers and, in tile mode, seamless textures.

How it works

First comes a height h: five octaves of fbm, optionally warped by itself (“Warp”). The heights are then cut into N levels (“Contours”); a contour runs wherever h · N is a whole number. To keep lines equally thick on gentle slopes and cliffs, the distance to the nearest level is divided by how fast the height changes per pixel, giving a distance in pixels.

c = h · N d = |c − round(c)| / Δc Δc: change of c per pixel line where d < ½ “Line width”

Contours crowding closer than their own width fade out, as on real maps, where cliffs get their own symbol. Every n-th line, with n set by “Index contours”, is drawn 2.2 times bolder so heights are easy to count. “Hypsometric tint” fills each band between contours with one flat palette colour. “Hillshade” adds slope shadows lit from the north-west, the cartographic convention. On “auto”, “Line colour” is a darker shade of the tint beneath (lighter on dark tints), as on printed maps. “Line width” is measured in thousandths of the short side, so the preview and an 8K export look the same.

A bit of history

Lines of equal depth appear on a Dutch map of the river Spaarne from 1584; Edmond Halley charted lines of equal magnetic variation over the Atlantic in 1701. Contour lines on land were born of an attempt to weigh the Earth. In 1774 Nevil Maskelyne measured how the Scottish mountain Schiehallion deflects a plumb line, and the mathematician Charles Hutton, working out the mountain’s volume from thousands of survey points, joined points of equal height with lines and saw that their pattern showed the land’s shape at a glance. By the mid-nineteenth century contours were standard on survey maps, and in the twentieth the Swiss cartographer Eduard Imhof became the acknowledged master of relief shading.

What to tweak

  • “Hypsometric tint” and “Hillshade” at 0 leave clean lines: a minimalist poster.
  • A palette from sea green through yellow and brown to white is the classic physical-map scale.
  • “Warp” at 0.8–1.5 makes ridges wind like weathered mountains.
  • “Contours” at 40–60 with thin lines looks engraved; animation at “Speed” 1 makes the land slowly flow.
  • Set the map’s blend “Mode” to “multiply” over a “Mesh gradient”, turn “Hypsometric tint” off and add “Grain” on top: a map printed on old coloured paper.

Parameters

Scale
How many hills and valleys fit in the frame
Contours
How many height levels — and as many tint bands
Index contours
Every n-th contour is drawn bolder; 0 for none
Line width
In thousandths of the short side — the same in the preview and at 8K
Hypsometric tint
How strongly the bands between contours take the palette colours
Hillshade
Slope shading lit from the north-west, as on maps
Warp
The noise displaces itself — the land gets more winding
Speed
How many turns the landscape makes per animation loop
Line colour
Auto: a darker or lighter shade of the tint beneath the line