Balancing Color Weight, Quantity, and Depth in Composition

When you live-code visuals for a set — flat color fields in a shader or Hydra patch, projected large behind the music — nothing betrays a rushed patch faster than a composition that tips over: one saturated region shouting down everything else, or a “background” that accidentally reads as figure. This module builds the whole task of holding a color field in equilibrium while deliberately steering its depth, so you can rebalance on the fly as areas grow and shrink under modulation.

The arc starts supported. First, internalize that colors carry unequal visual weights that must be balanced across the whole (the Klee equilibrium principle), then drill the concrete tool: contrast of extension, where Goethe’s luminosity ratios tell you yellow needs roughly a quarter of the area violet needs. Practice sizing two- and three-color fields to these ratios, checking your judgments against the sobering fact that most people misjudge cross-hue lightness — test, don’t assume, using the equal-brilliance matching exercises as calibration. Next, layer in depth: warm/cold advance-recede (and its background-dependent reversals) plus quantity dominance, learning that a loud hue given minimal area recedes while a quiet hue can dominate through sheer extension.

The capstone removes the scaffolding: a balanced abstract field, regions pushed and pulled in depth, each color positioned so its expressive weight suits its place — low blue heavy, high yellow weightless — and a second version where reversing area proportions flips figure and ground, directly exercising the tipping-point behavior of area dominance. The six required principles gate this outcome; you cannot size, layer, place, or reverse the field well without them. The supporting atoms enrich the same moves — perceptual calibration, luminosity-by-hue shortcuts for variations, Kandinsky’s active picture plane, and emergent simultaneous patterns — sharpening judgment without being strictly needed to complete the task.

Runnable examples

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

hue-shift

osc(30).hue(() => time * 0.1).out()

_{hydra-0016 · CC0-1.0}

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

_{punctual-0024 · CC0-1.0}

color-temperature

col *= vec3(1.1, 1.0, 0.85);

_{glsl-0116 · public-domain}