Substrate Cracks

About this piece

This is Substrate, published by Jared Tarbell in 2003 and rebuilt here from the rule rather than from his code. The rule is three sentences long:

• A crack travels in a perfectly straight line. It never turns, never curves and never changes its mind.
• Wherever it goes it stamps its own heading into a grid the size of the plate.
• The instant it steps onto a cell some other crack already stamped, it stops dead. A replacement is then born: pick a random cell that is already cracked, and set off from there at a right angle to whatever heading is written in it.

That is all of it. There is no list of shapes, no tiling, no target picture and nothing anywhere in the model that knows what a rectangle is. Six cracks travel at a time; the first few have no parent, so they start at a random point on a random heading and usually run clean off the edge of the frame.

Why a rule with no mosaic in it can only make a mosaic

Because a crack stops on the crack it met rather than crossing it, every junction in the finished plate is a T, not an X. A T-junction closes a region; an X-junction does not. So each new crack that lands takes one open region and splits it in two, and the plate is a partition of the frame at every moment — a set of closed cells, getting smaller.

Counted over ten builds of a 910×512 stage — what a 1280‑px window renders, about 530 cracks each: 87.3% stopped dead butted against an existing crack, and 12.7% ran off the edge of the frame instead. That split moves with the plate, because a small plate keeps everything near an edge: on a 380×240 tile it is 74.9% against 25.1%, and on a 1280×720 stage 90.5% against 9.5%. The finished 910×512 plate holds about 703 closed cells with a mean area of 619 px² — a 25‑px square — but the distribution is nothing like uniform: the median cell is 125 px², roughly an 11‑px square, while the largest single cell in a typical run is around 18,500 px². That gap is the whole texture of the piece. Cells are subdivided where cracks happened to land, not where a rule wanted them to be, so the plate ends up with wide-open panels sitting next to pockets of dense ruling.

What this is not, and the two plates it sits nearest

Two animations in this gallery are its close neighbours, and neither of them is doing this.

• Frost Dendrites is diffusion-limited aggregation: particles wander at random and freeze where they touch. Its marks are soft, furry and radial, and its output is one connected blob growing on open ground.
• Differential Growth is one closed curve that keeps getting longer than its frame and has to buckle. Its output is a single continuous line folded against itself.

This one is neither: rigid straight segments, hard right-angled T-junctions, and an object that is a partition of the plane. The interesting thing here is the set of cells between the lines, not the lines. The one other partition in the gallery is Voronoi Drift, and it is the opposite construction — convex cells decided all at once by the distances between drifting seeds, every wall a perpendicular bisector, the whole diagram redrawn every frame. Here the cells are non-convex, they are built one crack at a time in an order that matters, and nothing is ever redrawn.

Colour is the crack’s reach, not a coat of paint

The moment a crack is armed — before it has moved a pixel — the walk it is about to take is run once as a read-only probe, to find the clear run ahead of it: the distance to the first crack already standing in its way, or to the edge of the frame. That single number picks its ink for life, in four bands measured in grid units (one grid unit is about one CSS pixel):

• under 50 — the deep cobalt, carried lightest. This is the fine, late subdivision.
• 50 to 96 — cobalt.
• 96 to 200 — cobalt, carried strongest.
• 200 and over — the coral accent. The long slashes that cut the frame into its big pieces.

Reach is heavily skewed: mean 53 grid units, median 34, ninetieth percentile 119, and the longest crack seen in ten builds of a 910×512 plate was 815. So the top band is a small minority of the cracks and a large share of the ink. Measured over full builds: on a 1280×720 plate the coral band is 4.5% of cracks and 25% of the ink — 3.1 cobalt to 1 coral, which is this site’s own weighting, arrived at by arithmetic rather than by a share anyone tuned. On a small 380×240 tile it falls to 3.1% of cracks and 12% of the ink, because a tile that size has nowhere to put a 200‑unit crack.

The mean crack length barely moves with the plate — 46 to 57 grid units at every size tried — because what the plate is given is a quantity of ink, which fixes the finished cell size rather than the crack count. That is why one fixed set of band edges means the same thing on a phone tile and on a full-width desktop stage.

Reading the plate: what to watch for

• Every meeting is a T. Follow any line to its end and it will stop against the side of another line rather than continuing through it. That one property is what turns a pile of straight strokes into a set of rooms.
• Coral lines are the early ones, mostly. A long clear run is only available while the plate is still open, so the warm slashes are largely the first cracks laid. The first frame you are shown runs 25–35% coral on a stage; the finished plate settles back to 22–25%, as the cool fine detail arrives.
• Slivers. When a new crack comes in almost parallel to one already there, it leaves a long thin cell a few pixels wide. Between 30% and 37% of the closed cells on a finished plate are 10 px² or smaller. Those are not a mistake; they are what a right angle plus a few degrees of slop produces against an existing line.
• It stops. The model converges — once the ink is laid, a new crack would die within a few units of its birthplace. So the plate finishes, holds the completed mosaic for 4.5 seconds, and then cracks an entirely fresh one. Clicking the animation starts a new plate on demand.

How it is drawn

The collision grid is one cell per CSS pixel: the device-pixel canvas divided by a rounded device pixel ratio, so a crack is one CSS pixel wide on a phone and on a desktop alike, and the grid stays at roughly a million cells rather than four million on a retina screen. Each cell holds a single number — the stamping crack’s heading in whole degrees, plus one, so that zero can mean “empty” and the array needs no sweeping.

What the plate is given is not a number of cracks but a quantity of ink: the grid’s area divided by 16.5, and it stops when it has drawn that much line. A crack is wildly variable in length — median 34 grid units, mean 53, the longest past 800 — so a fixed crack count would finish at a density that swung by a fifth from build to build; an ink target is the quantity that actually decides how the plate looks. In a partition into cells of side s every wall is shared, so total crack length is 2A/s, and dividing by 16.5 pins the mean finished cell at 33 px across on any plate. A 910×512 stage — what a 1280‑px window gets — works out at about 530 cracks and 703 cells; a 390‑px phone, whose stage is 353×265, at about 122 and 152. Measured occupancy on a finished plate: 6.2–6.8% of the grid, at every size tried.

Seventy per cent of that ink — which is roughly half the cracks, since the long ones go first — is laid before the first frame is painted, so what you are handed on arrival is a finished partition rather than six lines on a bare plate. That founding pass costs about 5 ms of arithmetic on the stage size above.

After that, six cracks creep. The step each one takes per frame is derived from the ink still to lay rather than fixed, and the fraction of a step a crack cannot use is banked rather than rounded up — without that, a small plate, whose whole refinement is worth less than one model step a frame, would run at the step’s speed and be done in a couple of seconds. A fixed step would have refined a 1280‑px stage over 17 seconds and a phone stage over 1.6, which is not a slower phone: it is a different artwork. As built the refinement measures 21–28 seconds at every size from a 300×190 tile to a 1920×1080 stage.

A crack is straight, so during the founding pass the whole of it is a single moveTo/lineTo, and the four inks go down in four stroke() calls rather than one per line. Nothing is ever redrawn: the history lives in the pixels, so a frame costs six short segments however old the plate is. The strokes are opaque — each ink is pre-mixed against the background at its own alpha instead of being composited translucent — because a growing crack is a run of butt-joined collinear segments, one per frame, and translucent segments would double up at every joint and turn a straight line into a dotted one.

Under prefers-reduced-motion no animation loop is scheduled at all, and the founding pass is the only rendering that ever happens — which is exactly why it is built to be a complete picture. Not one colour is named in the drawing code: the background, four ink triplets and four alphas are handed in by the caller from the shared palette, which is why the gallery tile, this page and a copy of the embed on someone else’s blog are the same artwork and follow the same light and dark settings.

Honest limits

“Every junction is a T” is very nearly true, not exactly true. A crack treats a stamped heading within 5° of its own as its own trail rather than as an obstacle — without that tolerance it would die on the cell it just stamped. The cost is that two different cracks meeting almost head-on pass straight through each other. Counted as crossing events over fourteen builds of a 910×512 stage: a mean of 0.32 crossings per crack, i.e. roughly one crossing for every three cracks. It is a noisy quantity — individual plates in that sample ran from 0.14 to 0.57 — but it is never zero for long, so if you look for X-junctions on a finished plate you will find some. Look for it and you will find X-junctions on any plate.

The right angles are not exactly right angles. Every child is born at 90° to its parent plus a random slop of up to ±3.4°. With no slop at all the whole plate collapses onto the handful of directions its seeds happened to start on and reads as graph paper; much more than that and the junctions stop reading as right angles and the mosaic turns to slivers. Everything you see is inside that narrow band, so “perpendicular” here means perpendicular to within a few degrees.

It is different every time. The seeds, the birth points and the slop on each turn are all drawn fresh, so no two visits give the same plate and reloading is the honest way to see another. That is the opposite trade from Rule Thirty Cascade, which has no random number in it at all and gives everybody the identical picture. Neither is better; they are different promises.

A small plate is a coarser artwork, not a smaller one. The ink target scales with area so the cell size stays put, which means a 353×265 phone stage gets about 122 cracks and 152 cells where the desktop gets 530 and 703. The structure survives; what is lost is the long coral runs, which need room the plate does not have. On a 380×240 tile the ratio drifts from the stage’s 3.1:1 to roughly 7:1 cobalt to coral.

No sand, no grain, no texture. Tarbell’s original lays a soft sprayed fill either side of each crack, which is most of what makes it look like cracked glaze. That is deliberately absent here: the soft, granular register in this gallery belongs to Frost Dendrites and Slime Mould Network, and adding it here would blur the one thing this plate is for — the hard edge and the closed cell.

Nothing here is adjustable. The ink target, the slop, the tolerance and the four ink bands are constants in one file. Exposing them would be a different product; this gallery ships finished compositions rather than controls.

Curious how the loop and canvas fit together? Read how it works →