pointCloudGradient

Five colored points placed anywhere on the canvas, each pixel taking the colors of the points nearest it.

pointCloudGradient(slots: {
    points: {color: PropRef; position: PropRef}[]
    smoothness: ArgSpec
    space: PropRef
}): Paint

Import gradients from shaders/std and use gradients.pointCloudGradient.

Pass exactly five {color, position} prop pairs (positions made with transformPosition). smoothness (0–5) widens each point's reach as it rises. The mix happens in the color space named by the space prop (mark it compileTime).

Parameters

NameTypeNotes
slots`{
points: {color: PropRef; position: PropRef}[]
smoothness: ArgSpec
space: PropRef

}` | |

Example

paint: pointCloudGradient({points: [{color: p('colorA'), position: p('positionA')}, {color: p('colorB'), position: p('positionB')}, {color: p('colorC'), position: p('positionC')}, {color: p('colorD'), position: p('positionD')}, {color: p('colorE'), position: p('positionE')}], smoothness: p('smoothness'), space: p('colorSpace')})

Tip. For a softer, animated version with any number of points, see scatterField in the fields words.

See also

  • colorWheel — A striped gradient that slides across the canvas, cycling through its colors over time.

Used by

MultiPointGradient