fallingStreaks

Streaks that fall across the canvas in columns, each column at its own random speed.

fallingStreaks(slots: {
    angle: PropRef
    density: PropRef
    speedVariance: PropRef
    trailLength: PropRef
    strokeWidth: PropRef
    rounding: PropRef
    balance: PropRef
}): {mask: PatternPaint; fade: PatternPaint}

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

Returns two values: mask is the streak coverage, and fade runs from 0 at the tail to 1 at the leading edge, for a color ramp along each streak. angle is in degrees (90 falls down, 0 moves right). density is the number of columns across the canvas. speedVariance 0–1 spreads the per-column speeds. trailLength 0–1 is the streak length as a fraction of the spacing. strokeWidth 0–1 is the width as a fraction of a column. rounding 0–1 rounds the leading cap. balance 0–1 moves the midpoint of fade. Declare animatedTime: {speed: 'speed'} on the definition.

Parameters

angle: PropRef
density: PropRef
speedVariance: PropRef
trailLength: PropRef
strokeWidth: PropRef
rounding: PropRef
balance: PropRef

}` | |

Example

const streaks = fallingStreaks({angle: p('angle'), density: p('density'), speedVariance: p('speedVariance'), trailLength: p('trailLength'), strokeWidth: p('strokeWidth'), rounding: p('rounding'), balance: p('balance')})
const streakColor = strokeOver({fill: p('trailColor'), stroke: p('leadColor'), mask: streaks.fade, space: p('colorSpace')})
// paint: withAlpha(streakColor, times(alphaOf(streakColor), streaks.mask))

See also

• stripeBands — A mask of straight parallel stripes that scroll with the layer's clock.
• dotLattice — A mask of round dots on a square grid, with optional row stagger, drift and twinkle.
• withAlpha — A color with its alpha replaced by a separately built mask.

Used by

FallingLines