---
title: "De Stijl · generative art"
description: "A Mondrian that never stops recomposing. Generative art plate #21 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/de-stijl"
---

![](https://vorillaz.com/_astro/de-stijl.m3xOa7O-_vvtHT.webp)

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

# #21 de stijl

A Mondrian that never stops recomposing.

- date

  2026.10.05

- tags

  generative-art · javascript

Back in [#14](https://vorillaz.com/lab/lines) 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

```javascript title="de-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:

1. **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.
2. **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.
3. **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_.

## References

- [De Stijl](https://en.wikipedia.org/wiki/De_Stijl)
- [Piet Mondrian](https://en.wikipedia.org/wiki/Piet_Mondrian)
- [Broadway Boogie Woogie](https://www.moma.org/collection/works/78682), MoMA