Topographic Map Demo

This demo tiles a canvas with an N×N grid of shapes — SWTwoTonedDisk, SWArrow, SWTriDisk, SWCross, or SWTwoTonedSquare — 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.

Shape types

• ◔ SWTwoTonedDisk — A circle split into two colored halves by a diameter. The dividing line rotates with the shape, making orientation immediately visible.
• ➤ SWArrow — A line segment with a two-barb arrowhead at one end. Tip angle and barb length are independently adjustable.
• ● SWTriDisk — Three overlapping disks arranged in a triangle: a center disk flanked by a lighter and a darker satellite, evoking a 3-D shading effect.
• ✚ SWCross — A plus-sign shape with four arms extending outward from a small center hub. Arm color and thickness are independently adjustable.
• ■ SWTwoTonedSquare — A square filled with two colors arranged in one of four geometric patterns: 1 horizontal split, 2 diagonal triangle, 3 opposite-quadrant squares, or 4 top-and-bottom triangles pointing inward. Combine patterns with the topo map orientation for rich visual textures.

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²)). A radial sine wave — concentric rings of alternating orientation radiating outward from the centre.
• 2 — Pinwheel — atan2(y, x) · (180/π). 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)). Parallel stripes slanting from lower-left to upper-right.
• 4 — Interference — 360 · sin(0.021x) · sin(0.021y). A checkerboard-like lattice of orientation clusters.
• 5 — Saddle — 360 · sin(3×10⁻⁵ · xy). A hyperbolic contour; shapes near the axes share the base angle while corners rotate strongly in alternating directions.

Controls

• Shape type — SWTwoTonedDisk, SWArrow, SWTriDisk, SWCross, or SWTwoTonedSquare.
• 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.
• Cross controls — arm stroke color and arm thickness.
• Square controls — two fill colors and pattern selector (horizontal split, diagonal, opposite quadrants, or top/bottom triangles).
• 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 · SWCross · SWTwoTonedSquare