ribbons

Flowing gradient-colored ribbons between two points: the Strands look.

ribbons(slots: {
    from: PropRef
    to: PropRef
    count: PropRef
    width: PropRef
    amplitude: PropRef
    frequency: PropRef
    softness: PropRef
    spread: PropRef
    pinEdges: PropRef
    colorScale: PropRef
    colorVariance: PropRef
}): Paint

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

from and to are position props. count is how many ribbons, width and softness their thickness and edge (0 to 1), spread how far apart they sit (0 to 1), amplitude and frequency the size and tightness of the wave (0 to 5). pinEdges is a boolean prop that gathers the ribbons at both ends. colorScale (1 to 6) is how many times the gradient repeats along a ribbon and colorVariance (0 to 1) how far each ribbon is offset in it. The gradient comes from the definition's stops prop. The color comes out in the working color space, so close it with overRgb(ribbons(…), backToP3({space}), tonePow()). The wave runs on animatedTime: {speed: 'speed'} and the colors scroll on a second clock, extraAnimatedTimes: {color: 'colorSpeed'}. Declare both on the definition.

Parameters

NameTypeNotes
slots`{
from: PropRef
to: PropRef
count: PropRef
width: PropRef
amplitude: PropRef
frequency: PropRef
softness: PropRef
spread: PropRef
pinEdges: PropRef
colorScale: PropRef
colorVariance: PropRef

}` | |

Example

paint: overRgb(
  ribbons({from: p('start'), to: p('end'), count: p('lineCount'), width: p('lineWidth'), amplitude: p('amplitude'), frequency: p('frequency'), softness: p('softness'), spread: p('spread'), pinEdges: p('pinEdges'), colorScale: p('colorScale'), colorVariance: p('colorVariance')}),
  backToP3({space: p('colorSpace')}),
  tonePow(),
)

Tip. Add stops: colorStopsPropConfig() to the props. The ribbons read the stop list, not colorA / colorB.

See also

  • overRgb — Runs color-only steps over a paint, in order, leaving its alpha alone.
  • backToP3 — Brings ribbons color from its working color space back to display color.
  • tonePow — A gentle lift of the mid-tones (rgb to the power 0.85), as an overRgb step.

Used by

Strands