cellFrame

The shared coordinate system of a tiled pattern: how many cells fit down the canvas height and how far the whole lattice is rotated.

cellFrame(slots: {cells: PropRef; rotation: PropRef; convention: CellFrameConvention}): PatternPaint

Import patterns from shaders/std and use patterns.cellFrame.

cells counts cells along the canvas height, so cells stay square as the canvas resizes. rotation is in degrees about the canvas centre. Pass the result as the frame of gridLines, hexLines, triangleLines, truchetArcs, weaveThreads or isoCubeFaces.

Parameters

Example

const field = gridLines({frame: cellFrame({cells: p('cells'), rotation: p('rotation'), convention: 'flippedY'}), thickness: p('thickness'), softness: p('softness'), variation: p('variation')})

Tip. One frame can feed several line words. It is evaluated once however many read it.

See also

• gridLines — Square grid lines drawn in a cellFrame, plus a per-cell shade for the fill.
• hexLines — Honeycomb lines (pointy-top hexagons) drawn in a cellFrame, plus a per-cell shade.
• triangleLines — A lattice of equilateral triangles drawn in a cellFrame, with rows that can drift.
• truchetArcs — A maze of quarter-circle arcs, two per tile, flipped at random so they join into flowing curves.
• weaveThreads — Two sets of threads woven over and under each other, returned as a finished color.
• isoCubeFaces — Tumbling blocks: three shaded rhombus faces per hexagon that read as a field of 3D cubes.

Used by

Grid, HexGrid, IsometricCubes, TriangularGrid, Truchet, Weave