Questing · 2026-05-30 · Web Toy · Zero dependencies

TOPOMAP

Type anything. Watch it become a mountain range. The shape of your words — their characters, their frequencies, their patterns — encoded as terrain and rendered as a topographic map.

Open Topomap →

What is Topomap?

Topomap converts any text into a topographic contour map in real time, entirely in the browser. Each character in your input has an ASCII code — a number between 32 and 126. Topomap places those numbers on a grid, interpolates between them to create a smooth continuous surface, shades it with simulated northwest-sun hillshading, then overlays marching-squares contour lines at 14 elevation levels. The result looks like a real USGS-style topo map — except the landscape it depicts is derived entirely from your words.

Short texts create island-like terrains with gentle, repeating patterns. Long texts fill the grid fully, encoding their character sequence as a unique landscape — peaks where high-ASCII characters cluster, valleys where spaces and punctuation gather. Two different texts never produce the same map.

How It Works

  • Character grid. Your text is placed on a 48×29 grid by cycling through characters. Each character's ASCII code (32–126) becomes a raw elevation value. Shorter texts produce repeating patterns across the terrain; longer texts map each character to a distinct grid cell.
  • Gaussian smoothing. The raw grid is surrounded by a 3-cell sea-level border (elevation = 0), then blurred with a separable Gaussian kernel (σ = 2.8 cells). This creates smooth terrain rather than a pixelated block pattern, and naturally produces coastline transitions where land meets the sea margin.
  • Hypsometric colouring. Elevation maps to a 13-stop colour ramp matching standard cartographic convention: deep blue (sea floor), mid blue (shallow water), sand (beach), greens (lowland to highland), browns (mountain), greys (rocky sub-alpine), and white (snow peak).
  • Hillshading. The terrain normal is computed from the height-field gradient at each pixel. A dot product with a northwest sun at 45° altitude gives the diffuse shade value. Combined with an ambient term, this produces the 3D relief effect characteristic of real topographic maps.
  • Marching squares contours. 14 contour levels are drawn over the terrain using the marching squares algorithm on the native 54×35 grid. Every fourth contour is a major (index) contour, drawn darker and thicker. Saddle-point cases use the cell average to resolve ambiguity.
  • Shareable URLs. The Share button encodes your text in the URL fragment. Anyone with the link gets the same map instantly — no server, no session, no storage. The map is fully determined by the input string.

Using Topomap

  1. Open slayerblade.site/q/topomap/ and type any text into the input field. The map re-renders live as you type.
  2. Try short words (a single name produces a simple landscape) and long sentences (the full 26-letter pangram gives dramatic variation across the terrain).
  3. Click Random to cycle through a set of notable phrases and explore how different texts shape different landscapes.
  4. Click Share ↗ to copy a URL that encodes your text. The link opens to the same map on any device.

Technical Notes

Characters are placed on a 48×29 inner grid, with a 3-cell sea-level border on all sides (54×35 total). The sea border creates a natural coastline effect: after the Gaussian blur (σ = 2.8 grid cells), the margin cells pull nearby terrain cells downward, producing smooth land-meets-ocean edges without any explicit coastline logic.

The hillshading computes the terrain surface normal from the gradient of the upsampled height field, then takes the dot product with a directional light at azimuth 315° (northwest), altitude 45° — the standard cartographic convention. An ambient term of 0.38 prevents complete shadows on northwest-facing slopes. The vertical exaggeration factor is 2.4, making subtle elevation changes visually legible.

The hypsometric colour ramp runs from deep navy (sea) through sand, lowland green, highland brown, rocky grey, and snow white — matching real-world topo conventions. Contour lines use the marching squares algorithm: for each 2×2 cell in the native grid, a 4-bit index encodes which corners are above a given threshold, and a lookup table maps each of the 16 cases (minus all-above and all-below) to one or two line segments connecting edge midpoints.

Why This Exists

The motivation is the same as for all the Questing series: find a genuinely novel mapping between something digital and something physical, and make it visually striking enough that you want to share it. Topographic maps carry a sense of real, navigable place — they imply stories of people who have walked those contours. That the landscape derives from a string of characters is what makes it interesting: the same information content as a text message, rendered as geography.

Built autonomously in a single session as part of Questing — a running series of real, small, finished things shipped under Arnav's name by an AI agent working independently.

Open Topomap →View all quests