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.

Walkthrough

You’ll learn to hear the square frame’s own forces, then compose with them — ending on two contrasting pieces, one calm and one dramatic, on the same plane. Paste each sketch into the p5 web editor and press Run (▶). Each step is a complete, standalone sketch. (Remember p5’s y-axis points down, so “above” is a small y.)

1 — the plane is never neutral. Before you place anything, the empty square already has a pulse — a life of its own. Drop a single element near the upper-right and feel how it “sounds” different than it would dead-centre: the plane’s pulsation multiplies with whatever you add ([[basic-plane-as-living-organism]], [[bp-pulsation-multiplied-by-elements]]).

function setup() { createCanvas(400, 400); }
function draw() {
  background(22);
  noFill();
  stroke(70);
  rect(1, 1, 398, 398);          // the frame is a living edge, not a boundary
  noStroke();
  fill(240);
  circle(300, 100, 40);          // upper-right: the plane sounds light and free here
}

2 — the four sides have distinct sounds. Each edge carries a different feeling: above = freedom and lightness, below = earth and weight, left = adventure (setting out), right = home (arrival). Place one element toward each edge and let its shape and colour match that edge’s sound ([[basic-plane-four-sides-distinct-sounds]]).

function setup() { createCanvas(400, 400); }
function draw() {
  background(22);
  noStroke();
  fill(255, 220, 120);
  circle(200, 45, 26);                       // ABOVE — freedom, light
  fill(120, 90, 70);
  rect(120, 342, 160, 40);                    // BELOW — earth, heavy
  fill(120, 200, 255);
  triangle(20, 190, 60, 165, 60, 215);        // LEFT — adventure, pointing out
  fill(200, 120, 255);
  rect(362, 170, 28, 60);                     // RIGHT — home, arrival
}

3 — weight runs top to bottom. The vertical axis is a gravity gradient: things feel lighter high, heavier low. Compose a column that honours it — small and pale up top, large and dense at the base — and the frame feels stable instead of top-heavy ([[basic-plane-above-below-weight]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(22);
  for (let i = 0; i < 8; i++) {
    let y = 30 + i * 50;
    let heavy = map(y, 0, height, 0.3, 1);      // lower on the plane = heavier
    fill(230 * (1.2 - heavy));                   // and darker
    circle(200, y, map(heavy, 0.3, 1, 14, 54));  // and larger
  }
}

4 — the two diagonals. The corners give you two structural spines. The lyric diagonal (bottom-left → top-right) ascends: calm, harmonious, hopeful. The dramatic diagonal (top-left → bottom-right) descends: tense, effortful, falling. Every composition leans on one or the other ([[diagonal-lyric-vs-dramatic-in-bp]]).

function setup() {
  createCanvas(400, 400);
  strokeWeight(4);
}
function draw() {
  background(22);
  stroke(120, 220, 160);
  line(0, 400, 400, 0);          // LYRIC — ascending, calm
  stroke(255, 110, 90);
  line(0, 0, 400, 400);          // DRAMATIC — descending, tense
}

5 — a lyric composition. Build along the calm ascending spine: elements riding bottom-left up to top-right, heavier low and lighter high so the weight gradient agrees with the climb. A soft filled plane in the upper-left rest zone balances the rising line — a plane’s job is to counterweight the elements it holds ([[plane-balances-lines-in-composition]], [[composition-as-organized-tensions]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(20);
  for (let i = 0; i < 6; i++) {
    let t = i / 5;
    let x = lerp(50, 350, t);
    let y = lerp(350, 50, t);          // ascending — the lyric diagonal
    fill(150, 210, 255);
    circle(x, y, lerp(46, 18, t));      // heavy low, light high
  }
  fill(255, 255, 255, 30);
  rect(30, 40, 120, 120);              // a balancing plane in the upper-left rest zone
}

6 — a dramatic composition (the capstone). Now the same plane, organized on the descending spine: forms fall top-left to bottom-right, growing heavier as they sink (honouring “below = earth”). One light element up in the freedom zone answers the fall, and a plane bottom-left catches it. Run steps 5 and 6 side by side and you have the two-composition deliverable — same frame, opposite feeling, each defensible in its tensions ([[parallel-vs-contrast-as-compositional-principles]]):

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(16);
  stroke(255, 110, 90, 120);
  strokeWeight(3);
  line(40, 40, 360, 360);              // the dramatic (descending) spine
  noStroke();
  for (let i = 0; i < 6; i++) {
    let t = i / 5;
    let x = lerp(60, 340, t);
    let y = lerp(60, 340, t);          // descending
    fill(255, map(t, 0, 1, 200, 90), 80);
    let s = 24 + t * 36;               // heavier as it falls
    rect(x - s / 2, y - s / 2, s, s);
  }
  fill(255, 240, 180);
  circle(330, 70, 28);                 // a light form in the upper-right freedom zone
  fill(255, 255, 255, 25);
  rect(30, 250, 110, 120);             // a plane bottom-left to catch the descent
}

What good looks like. Each composition should feel inevitable — you can point at any element and say which force it serves (a side’s sound, the weight gradient, the chosen diagonal, a balancing plane). The lyric one should breathe and rise; the dramatic one should feel like weight falling and being caught. The beginner failure is scattering elements evenly so nothing leans — a screensaver with no organizing tension. Ask of every piece: which diagonal am I on, and what balances the weight? If you can’t answer, keep composing. (Skill map: live-visualist Domain B1 — focal hierarchy, negative space, symmetry-vs-asymmetry as a choice.)

Now make it yours. Swap the lyric and dramatic spines and feel the mood flip. Add a circle as a curved third plane and give it the same tensions. Pull all fills from one [[generating-palettes-in-hsb|single-hue palette]] so colour reinforces the structure. Push a light element to the extreme upper edge and see how much freedom the frame will bear before it feels unstable.

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}