Wet & material strokes
Every stroke on this page samples the background at its own pixels: wet media drag and blur it, oil buries it under paint, and the materials reflect or refract it. The renderers are documented under Renderers, in the background samplers and height field sections.
Wet strokes
open full size ↗Strokes that read the background underneath and move it. Top to bottom: a watercolor wash, a brush dragging color along its path, and the two combined with less water.
Details
Inflated geometry: Geometry is built wider than the visible mark, and the shader receives the position of the visual edge inside that margin, so effects that reach past the stroke have fragments to land on.
Background sampling: The background is sampled by screen position, not by the stroke's own coordinates.
Caps: Ends are carved in the shader inside the same margin, so one quad past the end serves rounded, square, and ragged caps.
Watercolor: The wash reads a pre-blurred copy of the background, one texel per fragment, instead of gathering a neighborhood. Pigment collects just inside the boundary, leaving a darker rim.
Smear: Each fragment samples backward along the stroke's direction in screen space and averages the result, so the background streaks the way the mark traveled. The sampling distance varies with noise across and along the mark.
Wet brush: The drag runs first, over a mix of the sharp and blurred background, and the wash then tints the result.
Oil strokes
open full size ↗Thick paint: the wet stroke's drag under a dominant paint color, lit through a height field.
Details
Drag: Each fragment samples backward along the stroke's direction, the same walk as the smear, with the reach varied by lane noise.
Paint: The dragged background is mixed under the stroke's color at a high ratio, thinner where the height field dips, so the background survives only as streaks in the crevices.
Lighting: Ridges stretched along the path supply a surface normal, and diffuse and specular lighting from a fixed light make the relief read as thickness. The drag and the ridges share one lane noise, so the paint that moved furthest also sits highest.
Material strokes
open full size ↗Strokes shaded as a surface rather than a fill, using a height field over the mark. Top to bottom: metal against an assumed environment, metal reflecting the real background, and glass.
Details
Height field: Height is built from distance to the edge, which rounds the cross-section into a bead, plus noise stretched along the path, which reads as liquid dragged along the stroke. The surface normal comes from finite differences in the stroke's own frame.
The bead is parabolic, not a hemisphere: a hemisphere's slope is infinite at the rim, which breaks the finite differences there. Height and the across coordinate are both measured in half-widths, so the gradient is dimensionless at any width.
Chrome: The environment is two tones split at a horizon; the boundary sweeping across the curved surface reads as metal.
Mirror: The reflected direction is used as a screen-space offset into the background, so the reflection costs one texture read but cannot show anything outside the frame. Contrast is pushed after sampling.
Glass: Refraction offsets the background lookup along the surface normal, largest where the surface tilts most. Reflection is mixed in by a Fresnel term (mirror-like at glancing angles).
Try drawing
open full size ↗Draw with the strokes on this page, in the drawing tool: the settings panel picks the tool, its colors, and its parameters exactly, the floating dials reroll the palette, set the width, and walk a trail of rolled tools, and Clear, Replay, and recording work as on the Drawing Tool Demo page. A turn sharper than a threshold splits the drawn line, so a fast zigzag bakes as separate strokes; each piece appears once its direction settles, and the wider the stroke, the harder its turns smooth. Every stroke here reads the canvas itself, so it drags, buries, or bends what is already painted. With a pen tablet, pressure scales the stroke around the set width, light thinner and heavy wider, each tool by its own amount; a mouse draws at the set width.