waves

Overlapping traveling sine waves from a schedule written as data: the organic wobble behind blob edges, water lines and drifting fills.

waves(
  axes: {x: Expr | number; y?: Expr | number; t?: Expr | number},
  schedule: WaveTerm[],
): Expr

Import noise from shaders/std and use noise.waves.

Pass the coordinates to wave over (x, optionally y, and t for the layer's clock) and a list of terms. Each term multiplies its waves and the terms add up. The result is signed: one wave runs −1 to 1, a schedule runs within about ±(sum of weights). It returns an expression, not a field, so it slots into paint: (params) => … recipes and math.

Parameters

NameTypeNotes
axes{x: Expr | number; y?: Expr | number; t?: Expr | number}
scheduleWaveTerm[]

Example

const wobble = waves({x: delta.member('x'), y: delta.member('y'), t: time}, [
  {waves: [{x: 3, t: 0.8}, {y: 2.2, t: -0.5}]},
  {waves: [{x: 5.1, y: -3.3, t: 0.6}], weight: 0.5},
])

Tip. Keep the schedule as constants next to the definition. It is the look, so keep it where you can tune it.

See also

  • wavyLine — The height of an animated wavy line at a point along it: a stack of traveling sines.
  • organicWaves — A ready-made waves schedule from three knobs, for when you have no hand-tuned constants.
  • hashPhase — A random but stable angle in radians, 0..2π, from a seed.

Used by

Blob, Waveform