Fields, palettes & ramps

The words every gradient and most textures are drawn with. A field is a number per pixel (Field): the distance from a point, a noise value, a flow pattern. A palette turns a number into a color (Palette): two colors, or a multi-stop ramp, mixed in the color space your definition declares. rampOver joins the two and is the single most common line in a generator.

Everything else here shapes the field before it meets the palette. warped bends the coordinate so smooth noise turns liquid. scaledVolume gives noise a zoomable, aspect-correct coordinate. tone and threshold reshape the value. rings and tiles repeat it. share lets two words read one result. Fields nest, so read a recipe from the inside out: the innermost word is sampled first and each wrapper changes what the next one sees.

The result is a paint: put it in the definition's paint: field.

import {paint} from 'shaders/std'

Reach for it when

Example

import {defineShader, p, paint, transformColor, transformColorSpace, colorSpaceOptions, colorStopsPropConfig} from 'shaders/std'

const {rampOver, tone, scaledVolume, warped, noiseField, stops} = paint

// Liquid plasma: warped noise on a zoomable slab, tone-shaped, read through the stop ramp.
export const Plasma = defineShader({
  name: 'Plasma',
  animatedTime: {speed: 'speed'},
  props: {
    colorA: {default: '#7018be', transform: transformColor},
    colorB: {default: '#000000', transform: transformColor},
    stops: colorStopsPropConfig(),
    colorSpace: {default: 'oklch', transform: transformColorSpace, compileTime: true, ui: {type: 'select', options: colorSpaceOptions}},
    scale: {default: 2},
    warp: {default: 0.4},
    intensity: {default: 1.5},
    speed: {default: 1},
  },
  paint: rampOver(
    tone(
      scaledVolume(warped(noiseField('mx3'), {amount: p('warp'), amountScale: 4, timeScale: 0.125}), {scale: p('scale')}),
      {glow: p('intensity'), contrast: 1, balance: 50, invert: true},
    ),
    stops(p('colorSpace')),
  ),
})

Types

Words

• rampOverA paint that colors each pixel by looking its field value up in a palette.
• pairA palette of two color props, mixed in the color space named by the space prop.
• stopsThe standard multi-stop palette, read from the stops, colorA and colorB props.
• standardPaletteThe color for a 0–1 value from the standard palette props: colorA, colorB, stops, colorSpace.
• distDistance fields: the shape of a gradient, as a number that grows away from a line or point.
• noiseFieldA field of smooth noise in the chosen flavor.
• warpedMakes a field flow like liquid by bending its coordinate with moving noise.
• scaledVolumeGives a noise field a zoomable, aspect-correct coordinate.
• toneReshapes a 0–1 field with glow, contrast and balance controls, then flips it.
• thresholdTurns a signed field (−1 to 1) into a soft 0–1 mask.
• ringsRepeats a field as concentric bands.
• tilesRepeats a field count times, always wrapping.
• shareEvaluates a field once and lets several words read the same result.
• flowFieldA swirling, animated wave pattern from −1 to 1.
• pulseA gentle brightness pulse that follows a pattern field, hovering around 1.
• shimmeredMultiplies a paint's color and alpha by a gain field, for a slow shimmer over a pattern.
• wrapRampRuns a palette value back and forth cycles times so a ramp repeats without a seam.
• foldRampFolds any number into 0–1 as a seamless zigzag: up from 0 to 1, back down, every 2 units.
• warpedPointA 3D position pushed around by moving noise, for reading several fields at one warped spot.
• warpStepOne step of a chained warp: pushes a 2D position by two noise reads and hands them back.
• scatterFieldA mesh-gradient field: up to 8 drifting points scattered across the canvas, blended by nearness.
• scatteredAnchorsComputes the scatterField points once per frame instead of once per pixel.
• quadBlendA four-color blend on a square: a to b across the top, c to d across the bottom, then top to bottom.
• colorLadder3A three-color blend: a to b by the first value, then on to c by the second.
• hueWheelA rainbow color for a hue value: 0 is red, cycling through the spectrum and back every 1.
• dist.conicA sweep around a center, like a clock hand: 0 to 1 once around.
• dist.diamondA diamond-shaped gradient spreading out from a center.
• dist.linearA straight gradient from one point to another.
• dist.radialA round or elliptical gradient spreading out from a center.
• dist.spiralA turning spiral stripe: 0 on the background, 1 on the stroke.