Point and Line as Pictorial Elements (Kandinsky)

This module builds toward the whole task a live-coding visualist faces every set: making a near-empty screen carry weight. In an audio-visual performance rig — shaders or canvas sketches reloading against a running track — the temptation is to add complexity until something “happens.” Kandinsky’s analysis of point and line argues the opposite: a single mark, placed and sized deliberately, already speaks. The capstone asks you to prove that with an abstract composition whose elements do the talking, plus a note connecting your lines back to musical pitch — the mapping move you will reuse whenever you sync visuals to sound.

The arc starts supported. First, make one mark and study it: the ideas that the geometric point is the proto-element of painting, that a pictorial point is born from a collision with the basic plane, and that point-versus-plane is a relative judgment tell you what your first pixel is and how big it can be before it stops being a point. Then displace it — the demonstration that removing a point from its conventional context awakens its inner tensions is your JIT how-to for the “make it speak” step. Next, apply force: the line as point-in-motion, the three straight-line temperatures, the angular line’s drift toward the plane, and line-length as time give you a vocabulary for contrast in temperature and curvature. Finally, repeat elements into elementary rhythm and write your pitch-to-line-width mapping note, grounded in Kandinsky’s pitch-as-line-width music analogy — a required gate, since the capstone’s note stands or falls on it.

Every required atom gates a clause of the capstone — omit one and the composition or its note goes hollow. The supporting atom on abstraction’s liberation from representation is the permission structure: enriching context, not a gate.

Walkthrough

You’ll build Kandinsky’s argument in code: from a single mark to a composition where point, line, temperature, and rhythm carry all the meaning — and where line width stands in for musical pitch. Paste each sketch into the p5 web editor and press Run (▶). Each step is a complete, standalone sketch.

1 — one point. The point is the proto-element: the smallest deliberate mark. Place one, sized on purpose. It is already an event — a collision between a mark and the empty plane. Notice how big it can get before it stops reading as a point and becomes a disc; that boundary is relative to the frame around it ([[point-as-proto-element-of-painting]], [[point-plane-boundary-is-relative]]).

function setup() {
  createCanvas(400, 400);
  noStroke();
}
function draw() {
  background(18);
  fill(240);
  circle(200, 200, 26);        // one deliberate mark, dead centre
}

2 — displace it. Dead centre is the calmest, most inert placement there is. Move the point off-centre and it speaks: pulled toward a corner, it holds tension against the empty space it left behind. That inner tension — not the shape itself — is the real pictorial element ([[inner-tensions-of-isolated-point]], [[element-as-tension-not-form]]).

function setup() {
  createCanvas(400, 400);
  noStroke();
}
function draw() {
  background(18);
  fill(80);
  circle(200, 200, 18);        // faint ghost of the "expected" centre
  fill(245);
  circle(312, 96, 26);         // displaced → the mark now carries tension
}

3 — a line is a point in motion. Apply a force to the point and it travels; the path it leaves is a line. Read the line’s length as elapsed time — a long line is a long gesture. Here the trailing dot marks where the moving point “is now” ([[line-as-point-in-motion]], [[line-as-time-element-length-and-curvature]]).

function setup() { createCanvas(400, 400); }
function draw() {
  background(18);
  stroke(245);
  strokeWeight(3);
  line(60, 200, 340, 200);     // the point, set in motion, traces a line
  noStroke();
  fill(245);
  circle(340, 200, 12);        // where the moving point has arrived
}

4 — the three temperatures. A straight line’s direction is its temperature. Horizontal is cold and flat (the supporting ground); vertical is warm and rising; the diagonal is the bridge between them — the most tension, drifting toward becoming a plane. Give each its own colour so the temperature is legible ([[three-straight-line-temperatures]], [[angular-line-as-bridge-to-plane]]).

function setup() {
  createCanvas(400, 400);
  strokeWeight(4);
}
function draw() {
  background(18);
  stroke(120, 170, 255);
  line(80, 70, 320, 70);       // horizontal — cold, flat, supporting
  stroke(255, 120, 90);
  line(200, 120, 200, 350);    // vertical — warm, rising
  stroke(235);
  line(80, 350, 320, 130);     // diagonal — the bridge, most tension
}

5 — repetition makes rhythm. Repeat one element at an even interval and you get elementary rhythm — the visual equivalent of a pulse. Uniform spacing reads as a steady beat; vary it later for syncopation. Two repeated families here: a row of verticals and a row of points beneath ([[repetition-creates-elementary-rhythm]]).

function setup() { createCanvas(400, 400); }
function draw() {
  background(18);
  stroke(240);
  strokeWeight(3);
  for (let i = 0; i < 8; i++) {
    let x = 40 + i * 45;         // even interval = a steady visual pulse
    line(x, 120, x, 280);
  }
  noStroke();
  fill(255, 170, 60);
  for (let i = 0; i < 8; i++) circle(40 + i * 45, 320, 10);
}

6 — pitch as line-width (the capstone). Kandinsky’s own analogy: a line’s thickness is like a musical pitch — thin lines sing high, thick lines sound low. Encode that directly. A rhythmic row of lines whose strokeWeight and height rise with “pitch”, one cold horizontal to ground the field, and the isolated point from step 2 holding tension against the beat. The whole thing is now a score you could read as sound ([[musical-line-pitch-width-analogy]]):

function setup() { createCanvas(400, 400); }
function draw() {
  background(16);
  // rhythmic repetition; line WIDTH encodes pitch (thin = high, thick = low)
  for (let i = 0; i < 6; i++) {
    let x = 50 + i * 60;
    let pitch = i / 5;                        // 0 = low, 1 = high
    strokeWeight(map(pitch, 0, 1, 11, 1.5));  // low pitch → thick line
    stroke(map(pitch, 0, 1, 255, 120), 150, map(pitch, 0, 1, 90, 255));
    line(x, 300, x, 300 - map(pitch, 0, 1, 60, 200)); // high pitch → taller, rising
  }
  stroke(120, 170, 255);                      // one cold horizontal grounds the field
  strokeWeight(3);
  line(30, 330, 370, 330);
  noStroke();                                 // the isolated point, holding its tension
  fill(245);
  circle(330, 70, 30);
}

What good looks like. A near-empty frame that still reads as composed, not accidental: one clear focal tension (the displaced point), a legible rhythm, and at least one strong contrast axis — cold horizontal against warm risers, thin against thick. The beginner failure is adding elements until the screen is full and nothing leads; restraint is the skill here. Say your pitch mapping out loud — “thick low line, thin high line” — and check the picture would actually sound like something. (Skill map: live-visualist Domain B1/B4 — focal hierarchy, negative space, contrast as language.)

Now make it yours. Break the even spacing in step 6 for syncopation. Curve a line (swap line for a bezier) and read it as a pitch bend. Invert the pitch map so thick = high. Add a second, quieter point to answer the first. Tint the background a deep hue and pull the line colours from one palette (see [[generating-palettes-in-hsb]]).