triangleLines

A lattice of equilateral triangles drawn in a cellFrame, with rows that can drift.

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

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

Returns lines (1 on a line) and shade (a brightness factor around 1 per triangle for vary). thickness 1 draws lines about 4% of a cell wide; 0 draws none. softness 0–1 blurs the lines. variation 0–1 sets how far shade strays from 1. speedVariance 0–1 gives rows different drift speeds. Declare animatedTime: {speed: 'speed'} on the definition; speed 0 holds still. Draw it with the 'flippedY' convention.

Parameters

frame: PatternPaint
thickness: PropRef
softness: PropRef
variation: PropRef
speedVariance: PropRef

}` | |

Example

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

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

Used by

TriangularGrid