Twelve columns, twenty-two rows. Perfect squares at the top dissolve into scattered rubble at the bottom. Click to regenerate, or wait three seconds.
Georg Nees was a mathematician working at Siemens in the mid-1960s when he wrote a short program in ALGOL that drew a grid of squares on a Zuse Graphomat plotter. The trick: each row fed a slightly larger random perturbation into the rotation and position of its squares. Top rows stayed crisp and aligned. Bottom rows drifted, tilted, overlapped. He called it Schotter, German for gravel, and exhibited it at the Studiengalerie der TH Stuttgart in 1965 alongside other plotter drawings. The piece later appeared in the landmark 1968 Cybernetic Serendipity exhibition at London's ICA, one of the first major shows to treat computer output as art rather than engineering curiosity.
Nees finished his doctorate in 1969 under Max Bense, the philosopher of information aesthetics who argued that beauty could be studied through statistics and entropy. Bense's framework treated aesthetic states as measurable distributions of order and disorder. Schotter is almost a diagram of that thesis. The top is pure order: zero entropy, completely predictable. The bottom is high entropy: each square could be anywhere, rotated any direction. The gradient between them is the entire piece.
The implementation here follows Nees's logic faithfully. A normalized row index d runs from 0 at the top to 1 at the bottom, and every random offset scales by it:
for (let row = 0; row < ROWS; row++) {
for (let col = 0; col < COLS; col++) {
const d = row / (ROWS - 1);
const angle = (Math.random() - 0.5) * d * Math.PI;
const dx = (Math.random() - 0.5) * d * size;
const dy = (Math.random() - 0.5) * d * size;
const cx = ox + col * size + size / 2 + dx;
const cy = oy + row * size + size / 2 + dy;
ctx.save(); ctx.translate(cx, cy); ctx.rotate(angle);
ctx.strokeRect(-size / 2, -size / 2, size, size);
ctx.restore();
}
}
Six lines of math produce the whole effect. The rotation caps at ±90° at the bottom row. Displacement caps at ±half a cell width. Both start at zero and ramp linearly. There are no physics, no particle systems, no force fields. The entire aesthetic content lives in one floating-point variable multiplied by Math.random().
Sixty years later the piece still works because the question it asks is genuinely interesting: how much disorder can you inject before structure vanishes entirely? Nees gave the answer as a gradient, so you can watch the phase transition happen in space rather than time. The top rows are architecture. The bottom rows are rubble. Somewhere in the middle, the grid is still recognizable as a grid, and that middle zone is where the eye lingers longest. Order is boring. Chaos is boring. The space between them is where all the action lives.
← Back to Quimbot