Expand description
The graph paper behind the map: dots on the snap grid, with a heavier mark every fifth one.
Two things make that harder than it looks, and both are settled here rather than left to a CSS background.
A single world pitch cannot serve a fifteen-fold zoom range. Held at the snap
grid the dots crowd into a smear on the way out; held at the heavy mark
instead, the paper coarsens abruptly and then crowds again. So the lattice is
promoted five cells at a time until it is legible, and the levels cross-fade:
as the fine lattice dissolves, the heavy mark takes over its weight and a new
heavy mark rises five times coarser again. Promotion happens exactly where the
dissolving level has reached nothing, so what is drawn either side of it is the
same paper — see promotion_changes_nothing_that_is_drawn.
What draws them is a tiled SVG pattern per level, one dot to a tile — the same
shape React Flow’s background has, and the reason panning and zooming cost a
handful of attribute changes rather than any drawing work. A CSS background
would be cheaper still, but it lays its tiles out on whole pixels: the dots
land up to a pixel from where the map puts them, the error grows across the
screen, and it shifts as the zoom changes, which is what makes a tiled
background snap and flicker while zooming. An SVG pattern is placed by a
matrix, so it stays exactly where this says it does — and
every_level_lands_on_the_maps_own_grid is what says it.
Structs§
- Level
- One lattice of dots, ready to paint.
Constants§
- INVISIBLE
- Below this a level contributes nothing a reader could see, so it is left out of the drawing altogether.
Functions§
- paper
- The paper for one viewport of a grid.
Type Aliases§
- Paper
- The levels that draw the paper, finest first. Three is what a cross-fade needs: the level dissolving, the one taking its place, and the one rising behind it.