Topographic Map Demo

This demo tiles a canvas with an N×N grid of shapes — SWTwoTonedDisk, SWArrow, or SWTriDisk — where each shape's starting orientation is driven by a topo map function evaluated at that cell's position. Choose a topo map to see different mathematical “fields” expressed as patterns of orientation across the grid.

The topo map idea

Every cell at canvas position (x, y) receives a rotation offset in degrees: cellAngle = baseAngle + topoFn(dx, dy), where dx and dy are the pixel offsets from the canvas centre. Centering the coordinates on the canvas origin is key — it makes all patterns symmetric and keeps the mathematical constants at intuitive scales.

Topo map reference

• 0 — Flat — f(x, y) = 0. Every shape shares the same base angle. The reference state.
• 1 — Ripple — 360 · sin(9×10⁻⁶ · (x²+y²)). r² = x²+y² is the squared distance from the centre, so this is a radial sine wave — concentric rings of alternating orientation radiating outward. The constant 9×10⁻⁶ is scaled so that roughly 1–2 full rings fit within the canvas (matching the visual density of the original [−20, 20] coordinate space).
• 2 — Pinwheel — atan2(y, x) · (180/π). The two-argument arctangent returns the compass bearing of each cell from the canvas centre, in radians. Multiplying by 180/π converts to degrees. The result: each shape points exactly along the radial direction outward from the centre — a perfect pinwheel. Combine with spin for a rotating fan effect.
• 3 — Diagonal Wave — 360 · sin(0.021 · (x + y)). Because x + y = c defines a diagonal line (slope −1), all cells on the same 45° diagonal share the same angle. This produces parallel stripes slanting from lower-left to upper-right. The constant 0.021 gives roughly 2 full wave cycles across the longest canvas diagonal (≈ 848 px), keeping the pattern clear without being too coarse or too dense.
• 4 — Interference — 360 · sin(0.021x) · sin(0.021y). Multiplying two perpendicular standing waves creates an interference pattern: where both sines peak together the offset is large; where either sine crosses zero the offset is zero. The result is a checkerboard-like lattice of orientation clusters, separated by horizontal and vertical zero lines through the canvas centre.
• 5 — Saddle — 360 · sin(3×10⁻⁵ · xy). The product xy is positive in quadrants I and III, negative in II and IV, and zero along both axes — producing a hyperbolic (saddle-shaped) contour map. Shapes near the axes share the base angle; shapes far into any quadrant rotate strongly in alternating directions. The constant 3×10⁻⁵ keeps the maximum argument near ±2.7 radians at the corners, giving 1–2 clean cycles.

Controls

• Shape type — SWTwoTonedDisk, SWArrow, or SWTriDisk.
• Grid N×N — number of rows and columns (2–20).
• Shape size — fraction of the cell width occupied by each shape.
• Topo map — selects the orientation function (see above).
• Base angle — global rotation offset added to every cell's topo value.
• Disk controls — top/bottom half colors and arc outline thickness.
• Arrow controls — stroke color, shaft thickness, tip angle, and barb factor.
• TriDisk controls — center/left/right disk colors, side radius factor (k), offset percentage, and stroke thickness.
• Spin — rotate all shapes together at the chosen speed (degrees/sec).

Keyboard shortcuts

• s — toggle spin
• r — factory reset
• q — stop all animations

Shape class references: SWTwoTonedDisk · SWArrow · SWTriDisk