displaceBy

Push the child's pixels around by a vector field from one of your simulations.

displaceBy(
  field: import('./sim').SimOutputRef,
  opts: {strength: PropRef; chromatic: PropRef; edges: PropRef},
): DisplaceByEffect

Import displaceBy from shaders/std.

field is a simulation output, such as waves.output('displacement') from simulate.grid. strength scales the push (the library uses 0–20), capped at about 15% of the canvas. chromatic (0–3) splits red and blue slightly apart from green along the push, like a lens. edges is a prop marked compileTime: true holding 'stretch', 'transparent', 'mirror' or 'wrap'. Gather.

Parameters

Example

effect: displaceBy(waves.output('displacement'), {strength: p('intensity'), chromatic: p('chromaticSplit'), edges: p('edges')})

Tip. The simulation must derive the field with op.gradient(); the definition fails loudly otherwise.

See also

• gather — Write your own gather effect: a function that can read the child anywhere.

Used by

CursorRipples