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−6 · (x2+y2)).
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−5 · 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).