fig. #21 · rendered live in your browser from the code below

#21de stijl

A Mondrian that never stops recomposing.

date: 2026.10.05
tags: generative-art · javascript

Back in #14 De Stijl was only a quote. This time it gets a generator.

Piet Mondrian spent the 1920s reducing painting to almost nothing: horizontal and vertical black lines, a white ground, and red, yellow and blue used sparingly. Restrictions like these suit a computer well. A composition turns out to be a tree. Split the canvas once, split each half again, keep going with a slowly falling probability, and colour a few of the leaves.

The generator

javascriptde-stijl.js

const RATIOS = [0.24, 0.32, 0.38, 0.62, 0.68, 0.76];
const PALETTE = ['#ece9e1', '#c8312a', '#1f4d9b', '#efc22f', '#121214'];

const colour = () => {
  const r = random();
  return r < 0.62 ? 0 : r < 0.74 ? 1 : r < 0.84 ? 2 : r < 0.95 ? 3 : 4;
};

const build = (depth, w, h) => {
  const block = { color: colour() };
  if (depth < 5 && max(w, h) > 0.12 && random() < 0.95 - depth * 0.14) {
    // split across the longer side
    block.split = w > h * 1.2 ? 'v' : h > w * 1.2 ? 'h' : random(['v', 'h']);
    block.ratio = random(RATIOS);
    const [wa, ha, wb, hb] = block.split === 'v'
      ? [w * block.ratio, h, w * (1 - block.ratio), h]
      : [w, h * block.ratio, w, h * (1 - block.ratio)];
    block.a = build(depth + 1, wa, ha);
    block.b = build(depth + 1, wb, hb);
  }
  return block;
};

const paint = (block, x, y, w, h) => {
  if (!block.split) {
    noStroke();
    fill(PALETTE[block.color]);
    rect(x, y, w, h);
    return;
  }
  const r = block.ratio;
  if (block.split === 'v') {
    paint(block.a, x, y, w * r, h);
    paint(block.b, x + w * r, y, w * (1 - r), h);
    stroke('#121214');
    line(x + w * r, y, x + w * r, y + h);
  } else {
    paint(block.a, x, y, w, h * r);
    paint(block.b, x, y + h * r, w, h * (1 - r));
    stroke('#121214');
    line(x, y + h * r, x + w, y + h * r);
  }
};

function setup() {
  createCanvas(800, 800);
  strokeWeight(13);
  strokeCap(SQUARE);
  paint(build(0, 1, 1), 0, 0, width, height);
}

Recomposing

A still image only shows one tree. The live plate keeps editing its tree, as if the painter never quite put the brush down. Every second and a half one of three things happens:

A block splits. A new line draws itself across the block, and once it reaches the far side the new half takes on its colour.
Two blocks merge. A line between two leaves retracts. While it does, the second block takes on the first one’s colour, so the collapse is seamless.
A block changes colour. The new colour wipes in from the left.

Meanwhile every line drifts slowly around its composed position, so the proportions keep shifting. It is a quiet nod to the rhythm of Broadway Boogie Woogie.