isolines

Draw topographic contour lines over the child, traced from its brightness or its alpha.

isolines(slots: {
    source: PropRef
    levels: ArgSpec
    lineWidth: ArgSpec
    softness: ArgSpec
    gamma: ArgSpec
    invert: ArgSpec
    colorMode: PropRef
    lineColor: PropRef
    backgroundColor: PropRef
}): PointwiseEffect

Import effects from shaders/std and use effects.color.isolines.

levels is how many contours (2–30). lineWidth is in pixels. softness (0–1) blurs the line edges. gamma crowds the contours toward the highlights (below 1) or the shadows (above 1). The boolean invert prop flips the source. source ('luminance' | 'alpha') and colorMode ('source' | 'custom') are select props declared compileTime: true: in source mode the lines take the child's own colors over transparent, in custom mode they take lineColor over backgroundColor.

Parameters

source: PropRef
levels: ArgSpec
lineWidth: ArgSpec
softness: ArgSpec
gamma: ArgSpec
invert: ArgSpec
colorMode: PropRef
lineColor: PropRef
backgroundColor: PropRef

}` | |

Example

effect: isolines({source: p('source'), levels: p('levels'), lineWidth: p('lineWidth'), softness: p('softness'), gamma: p('gamma'), invert: p('invert'), colorMode: p('colorMode'), lineColor: p('lineColor'), backgroundColor: p('backgroundColor')})

Tip. The lines replace the child rather than sit over it; set blendWithChildren: false in the definition.

See also

• posterize — Reduce the child to a few flat color levels, like a screen-printed poster.
• duotone — Repaint the child in two colors: colorA for the shadows, colorB for the highlights.

Used by

ContourLines