Color grading and look development on the GPU

In a live-coded visual set, color is the fastest lever you have: the same raymarched blob reads as toxic rave acid or warm ambient dusk depending purely on palette and grade. This module builds the whole task of look development — taking an already-animated procedural scene from your VJ rig and giving it an intentional, performance-ready color identity, the way a colorist grades a film after the edit is locked.

The arc starts supported. First, generate color from a single scalar using three phase-offset cosine waves — the atom on cosine-RGB palettes is your JIT pointer for what a, b, c, d each do, and interactive palette pickers keep this first exercise low-stakes. Next, prove you understand color spaces by rendering an HSB color wheel via atan and length, following “Mapping HSB to polar coordinates” step by step. Then the grading chain: turn on gamma correction immediately (per “Gamma correction must be applied from the start”), add a mild pow-contrast to separate dark detail, and finish with a smoothstep S-curve for the filmic snap. The capstone strips the supports: you develop a complete look on your own scene and write up a start-saturated workflow — pushing hues past comfortable on day one and pulling back with fresh eyes, per IQ’s principle.

Each required atom gates a capstone deliverable: no cosine formula, no palette; no polar mapping, no wheel; no gamma/pow/S-curve, no grade; no start-saturated principle, no documented workflow. The supporting atoms enrich rather than gate — mix() gives you an easier interpolation fallback, and the grouping-over-scatter principle previews how your graded palette will sit in a fuller composition.

Runnable examples

Generated from the context/ instrument corpus by concept (redistributable idioms only). Do not edit — regenerate with gen-module-examples.mjs.

noise-field

noise(4, 0.1).out()

_{hydra-0002 · CC0-1.0}

float h21(vec2 p){return fract(sin(dot(p,vec2(12.9898,78.233)))*43758.5453);}

_{glsl-0013 · public-domain}

palette-cycle

osc(30, 0.1, 1).colorama(0.1).out()

_{hydra-0015 · CC0-1.0}

hsvrgb [fract (ft/6.28 + 0.1*time), 1, 1] >> rgb

_{punctual-0024 · CC0-1.0}

polar-warp

float r = length(uv); float a = atan(uv.y, uv.x);

_{glsl-0008 · public-domain}

[rtx [fr, ft + 0.2*time], rty [fr, ft], 0.5] >> rgb

_{punctual-0032 · CC0-1.0}

gamma-correction

col = pow(col, vec3(1.0/2.2));

_{glsl-0021 · public-domain}

pow ([lo,mid,hi]) 0.4545 >> rgb

_{punctual-0034 · CC0-1.0}

outline-stroke

(circle 0 0.42 - circle 0 0.38) >> add

_{punctual-0019 · CC0-1.0}

value-contrast

stroke(255); fill(0); rect(0, 0, w, h)

_{p5live-0027 · CC0-1.0}