gridLines

Square grid lines drawn in a cellFrame, plus a per-cell shade for the fill.

gridLines(slots: {
    frame: PatternPaint
    thickness: PropRef
    softness: PropRef
    variation: PropRef
}): {lines: PatternPaint; shade: PatternPaint}

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

Returns lines (1 on a line, 0 inside a cell) and shade (a brightness factor around 1 for vary). thickness 1 draws lines about 2% of a cell wide; 0 draws none. softness 0–1 blurs the lines. variation 0–1 sets how far shade strays from 1. Draw it with the 'flippedY' convention.

Parameters

NameTypeNotes
slots`{
frame: PatternPaint
thickness: PropRef
softness: PropRef
variation: PropRef

}` | |

Example

const field = gridLines({frame: cellFrame({cells: p('cells'), rotation: p('rotation'), convention: 'flippedY'}), thickness: p('thickness'), softness: p('softness'), variation: p('variation')})
// paint: strokeOver({fill: vary(p('cellColor'), field.shade), stroke: p('color'), mask: field.lines, space: p('colorSpace')})

Tip. Rotate the frame 45 degrees for a diamond crosshatch.

See also

  • 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.
  • 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.
  • vary — A color lightened or darkened per cell by a shade factor, alpha untouched.

Used by

Grid