dist

Distance fields: the shape of a gradient, as a number that grows away from a line or point.

dist: { linear, radial, conic, diamond, spiral }

Import paint from shaders/std and use paint.dist.

Each takes position props made with transformPosition and returns 0 at the start and 1 at the end, unbounded beyond. Feed one to rampOver.

Members

• dist.linear — A straight gradient from one point to another.
• dist.radial — A round or elliptical gradient spreading out from a center.
• dist.conic — A sweep around a center, like a clock hand: 0 to 1 once around.
• dist.diamond — A diamond-shaped gradient spreading out from a center.
• dist.spiral — A turning spiral stripe: 0 on the background, 1 on the stroke.

See also

• rampOver — A paint that colors each pixel by looking its field value up in a palette.
• rings — Repeats a field as concentric bands.
• tiles — Repeats a field count times, always wrapping.

Used by

ConicGradient, DiamondGradient, LinearGradient, RadialGradient, Spiral