dotLattice

A mask of round dots on a square grid, with optional row stagger, drift and twinkle.

dotLattice(slots: {
    density: PropRef
    dotSize: PropRef
    offset: PropRef
    speedVariance: PropRef
    twinkle: PropRef
}): PatternPaint

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

density counts dots along the canvas height. dotSize 0–1 is the dot diameter as a fraction of a cell; 1 touches the neighbours. offset 0–1 shifts every other row (0.5 is the polka-dot stagger). speedVariance 0–1 gives rows different drift speeds. twinkle 0–1 pulses each dot on its own phase. Declare animatedTime: {speed: 'speed'} on the definition; the drift follows that clock while the twinkle keeps running at speed 0.

Parameters

density: PropRef
dotSize: PropRef
offset: PropRef
speedVariance: PropRef
twinkle: PropRef

}` | |

Example

paint: withAlpha(p('color'), dotLattice({density: p('density'), dotSize: p('dotSize'), offset: p('offset'), speedVariance: p('speedVariance'), twinkle: p('twinkle')}))

Tip. Add sampleMapsAtCellCentres when dotSize or twinkle is map-driven, so dots grow whole instead of being clipped.

See also

• sampleMapsAtCellCentres — Makes map-driven props change per whole cell instead of per pixel, so a mapped dot size or line thickness grows cell by cell rather than being cut off mid-cell.
• gridLines — Square grid lines drawn in a cellFrame, plus a per-cell shade for the fill.
• ringWaves — A mask of concentric rings spreading out from a point, animated by the layer's clock.

Used by

DotGrid