wavyLine
The height of an animated wavy line at a point along it: a stack of traveling sines.
wavyLine(opts: {
along: Expr | number
time: Expr | number
waves: {freq: number; speed: number; amount: number; phase?: Expr | number}[]
}): Expr
Import noise from shaders/std and use noise.wavyLine.
along is the coordinate along the line and time the layer's clock. Each wave has a freq (tightness), a speed (drift along the clock), an amount (height) and an optional phase in radians. Signed, within ±(sum of amounts). Add it to a baseline to get the curve. Give each line of a family its own hashPhase so they do not move in step.
Parameters
| Name | Type | Notes |
|---|---|---|
opts | `{ |
along: Expr \| number
time: Expr \| number
waves: {freq: number; speed: number; amount: number; phase?: Expr \| number}[]
}` | |
Example
const arc = wavyLine({along: x, time: t, waves: [{freq: 1.4, speed: 0.3, amount: 0.5}, {freq: 3.1, speed: -0.2, amount: 0.2}]})
See also
waves— Overlapping traveling sine waves from a schedule written as data: the organic wobble behind blob edges, water lines and drifting fills.hashPhase— A random but stable angle in radians, 0..2π, from a seed.