Reading and Grouping with Gestalt Perception

When you’re projecting generative visuals behind a live set, the audience never reads your canvas element by element — their perceptual system groups it instantly, before thought. This module builds the whole task of composing for that pre-attentive read: a poster-scale composition where every grouping the viewer perceives is one you chose. The same skill transfers directly to a live-coding rig, where shapes spawned by pattern code will clump, flow, or fragment according to these laws whether you intend it or not.

Start with the founding insight that the mind perceives unified wholes rather than sums of parts — this reframes every layout decision as a perceptual trigger. Then work the laws as a graded sequence of small studies: cluster and separate marks with proximity, unify scattered elements through shared colour or shape via similarity, then layer in continuity’s smooth reading paths, closure’s implied contours, and enclosure via common region. Common fate — grouping by shared direction or implied motion — is your bridge to animated work. Each study is supported: you annotate one law at a time. The capstone removes the scaffolding, demanding at least six principles orchestrated together along a deliberate reading path.

The required atoms gate the capstone directly: you cannot place the similarity-break accent without knowing how breaking similarity pulls the eye, nor build the flip-flopping region without understanding figure-ground assignment and multistability’s either/or oscillation. The supporting atoms enrich the read — Prägnanz explains why the laws resolve as they do, symmetry and invariance deepen your grouping vocabulary, and Itten’s simultaneous patterns preview how scattered colour becomes emergent shape at the compositional level. Drill fast identification of proximity, similarity, and figure-ground until spotting them in any visual field is automatic.

Walkthrough

The viewer groups your canvas before they think — you’ll learn to control that pre-attentive read one Gestalt law at a time, then orchestrate six into a single guided composition. Paste each sketch into the p5 web editor and press Run (▶). Each step is a complete, standalone sketch.

1 — proximity groups by nearness. The mind sees wholes, not marks. Identical dots, but spacing alone splits them into groups: tight pairs of columns separated by wide gaps read as four units, not thirty-two dots ([[gestalt-perception-whole-over-parts]], [[gestalt-proximity]]).

function setup() { createCanvas(400, 400); noStroke(); fill(230); }
function draw() {
  background(18);
  let xs = [60, 80, 160, 180, 260, 280, 340, 360];   // pairs, spaced apart
  for (let x of xs) for (let y = 100; y <= 300; y += 30) circle(x, y, 12);
}

2 — similarity overrides position. On an even grid, colour does the grouping: alternate the fill by column and the eye reads vertical stripes, even though every dot is equidistant. Shared appearance beats layout ([[gestalt-similarity]]).

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(18);
  for (let gx = 0; gx < 8; gx++) {
    for (let gy = 0; gy < 8; gy++) {
      if (gx % 2 === 0) fill(120, 200, 255); else fill(255, 150, 90);  // group by colour
      circle(50 + gx * 40, 50 + gy * 40, 20);
    }
  }
}

3 — continuity makes a path. Dots that fall on a smooth curve read as one flowing line — the eye prefers to continue along a gentle trajectory rather than break it. This is how you lead a viewer across a frame ([[gestalt-continuity]]).

function setup() { createCanvas(400, 400); noStroke(); fill(230); }
function draw() {
  background(18);
  for (let x = 20; x <= 380; x += 16) {
    let y = 200 + 120 * sin(x * 0.02);
    circle(x, y, 9);                       // dots on a curve = one line
  }
}

4 — closure completes the gaps. Broken arcs, yet you see a whole circle: the mind supplies the missing contour. A little incompleteness invites the viewer to finish the shape — engagement for free ([[gestalt-closure]]).

function setup() { createCanvas(400, 400); }
function draw() {
  background(18);
  stroke(230);
  strokeWeight(5);
  noFill();
  for (let a = 0; a < TWO_PI; a += PI / 4) {
    arc(200, 200, 200, 200, a + 0.15, a + PI / 4 - 0.15);   // gapped arcs → a completed ring
  }
}

5 — figure and ground can flip. Which region is the object and which is empty space? A symmetric black shape on white makes the white gap read as a second form (the classic vase/faces). When assignment is ambiguous, perception oscillates — multistability ([[gestalt-figure-ground]], [[gestalt-multistability]]).

function setup() { createCanvas(400, 400); noStroke(); fill(20); }
function draw() {
  background(255);
  beginShape();                            // left profile
  vertex(150, 40);
  bezierVertex(120, 140, 200, 180, 150, 260);
  bezierVertex(120, 340, 190, 360, 175, 360);
  vertex(175, 40);
  endShape(CLOSE);
  beginShape();                            // mirrored right profile → a vase appears between them
  vertex(250, 40);
  bezierVertex(280, 140, 200, 180, 250, 260);
  bezierVertex(280, 340, 210, 360, 225, 360);
  vertex(225, 40);
  endShape(CLOSE);
}

6 — orchestrate the read (the capstone). Now stack the laws to guide one eye-path: a similarity field as the ground texture, a bright continuity sweep leading left-to-right, a common-fate shoal (elements sharing a tilt), a closure ring as a focal target, one red similarity-break accent that grabs attention, and a figure-ground wedge. Every grouping is chosen ([[gestalt-common-fate]], [[gestalt-common-region]], [[gestalt-law-of-similarity-design-application]]):

function setup() { createCanvas(400, 400); noStroke(); }
function draw() {
  background(20);
  fill(70, 110, 170);                      // SIMILARITY field — the ground texture
  for (let x = 30; x <= 370; x += 34) for (let y = 30; y <= 370; y += 34) circle(x, y, 10);
  fill(255, 220, 120);                     // CONTINUITY — a path that leads the eye across
  for (let x = 20; x <= 380; x += 14) circle(x, 200 + 130 * sin(x * 0.016), 8);
  push();                                  // COMMON FATE — a shoal sharing one tilt
  translate(300, 90);
  fill(120, 255, 180);
  for (let i = 0; i < 6; i++) { push(); rotate(0.5); rect(i * 12, i * 4, 16, 5); pop(); }
  pop();
  stroke(255);                             // CLOSURE — a broken ring as a focal target
  strokeWeight(4);
  noFill();
  for (let a = 0; a < TWO_PI; a += PI / 3) arc(110, 300, 90, 90, a + 0.2, a + PI / 3 - 0.2);
  noStroke();
  fill(255, 60, 60);                       // SIMILARITY-BREAK accent — the one red among the blue
  circle(200, 132, 18);
  fill(240);                               // FIGURE-GROUND wedge
  triangle(330, 320, 390, 300, 360, 380);
}

What good looks like. A viewer’s eye should travel the path you intended — enter at the accent or the ring, follow the continuity sweep, rest on the focal target — and the groupings you built should be the ones they perceive. The beginner failure is accidental grouping: stray proximity or colour echoes that clump elements you meant to keep apart, muddying the read. Squint at your composition; the blurred blobs are what the viewer groups. The one similarity-break should be the single loudest thing. (Skill map: live-visualist Domain B1 — focal hierarchy and reading path; the #1 beginner failure is uniform noise with no lead.)

Now make it yours. Animate the common-fate shoal so it drifts as a unit — motion is the strongest grouping cue of all. Move the similarity-break accent and watch the reading path re-route. Add a mouseX-driven region that flips figure and ground live. Rebuild the whole poster from pattern-spawned shapes and notice which laws fire whether you intend them or not.

Runnable examples

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

radial-symmetry

osc(10).kaleid(5).out()

_{hydra-0010 · CC0-1.0}

// sandbox
osc(10, 0.05, 1.3).kaleid(8).out()
// sandbox

_{p5live-0037 · CC0-1.0}