Composing on the Basic Plane: tensions, sides, and diagonals

When you project visuals behind a live set, the screen is your canvas — and it is never neutral. This module builds toward composing deliberately on that field: two abstract compositions on the same square plane, one calm, one dramatic, each defensible in terms of the tensions it organizes. That defensibility is the real skill: in a livecoded visual rig, you place points, lines, and filled regions in seconds, and only a felt-and-reasoned grasp of the frame’s own forces separates a composition from clutter.

Start supported: sketch a single element at several positions and describe how the composite sound changes — the plane’s pulsation multiplying with the element is your first evidence that placement is everything. Then read the frame itself: the four sides as distinct sounds (above as freedom, below as earth, left as adventure, right as home) and the vertical weight gradient give you a map, while the two diagonals — lyric versus dramatic — give you the structural spines the capstone demands. When lines and points accumulate energy, the principle that a plane balances lighter elements tells you exactly how to resolve it. Treating composition as organized tensions, and choosing between parallel reinforcement and contrast, turns your justification paragraph from taste into argument.

Every required atom gates the capstone: you cannot choose a diagonal, weight a zone, honor a side, or justify a balance without them. The supporting atoms widen the view — the circle as a curved plane carrying the same tensions, color’s power to pull the plane into depth, and the founding permission of abstraction — enriching where you take these compositions next, but not blocking the square, structural task at hand.

Runnable examples

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

sdf-shape

circle [0,0] 0.4 >> add

_{punctual-0018 · CC0-1.0}

float d = length(uv) - r;

_{glsl-0003 · public-domain}

vignette

smoothstep [0.3,1.2] (1 - fr) >> mul

_{punctual-0029 · CC0-1.0}

col *= smoothstep(1.2, 0.3, length(uv));

_{glsl-0035 · public-domain}

value-contrast

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

_{p5live-0027 · CC0-1.0}