A Piece That Breaks Another Piece

It was all broken by me really, or built like a clumsy caveman

Trying to have something right afterwards

I’ve been building a series of pages where the computer generates the pattern: tin-glazed tiles painted by rule, then cut tile and poured cement, then heraldry and knotwork. They’ve been travelling round Europe, borrowing from the art and the history of each place, and trying to capture something about how patterns repeat across the whole of the artistic world: the same rule turning up in a different material somewhere else. This one is Barcelona. I’ve stood in front of Casa Batlló, and walked a good deal of that city in Gaudí’s footprints, and the thing you notice about his surfaces once you’re close is that none of them are made of anything whole. The bench at Park Güell, the dragon on the stair below it, the chimneys on the Pedrera roof and the pinnacles of the Sagrada Família are all trencadís: tiles that somebody broke with a hammer and set back, shard by shard, in lime.

So Trencadís is a page that starts with a wall it didn’t paint. It takes Azulejería’s tiles, grown from a seed by the same engine, and breaks them.

A piece that breaks another piece#

Every page in this series so far has made its own picture. This one consumes somebody else’s. The source wall is Azulejería’s flora, the rosette quartered on one corner, the bud on the opposite one, half a flower on each edge, painted by the engine’s makeTile with the same drifting brush and the same wash laid thin twice. The page asks the engine for four paintings of the design at the pixel size they’ll be seen at, and keeps them as the tiles the wall was laid from.

I copied the flora motif and its four painters into the page rather than importing them. Sixty lines. It felt wrong for about a minute, and then it didn’t: the engine holds the brush, each page holds what it paints with it. Azulejería’s motifs belong to Azulejería. If Trencadís wants a rosette it draws one with the engine, the same way Jerez draws a vine, and the fact that it draws the same rosette is the point of the piece rather than a reason to share code.

The crack#

A broken tile is a Voronoi diagram. Not exactly, but close enough that nobody at the bench will argue. Scatter points, give each point the region of the plane nearer to it than to any other, and you get convex cells with straight edges meeting at threes, which is what a sheet of glaze does when it goes under a hammer.

The points sit on a grid of cells about a third of a tile across, each one jittered nearly half a cell in either direction, and one in twelve is missing, so its neighbours grow into the gap and some shards come out bigger than others. The Voronoi itself is twenty lines: for each site, start with a square and clip it by the bisector with every neighbour, nearest first, stopping once the next neighbour is more than twice as far as the cell’s farthest corner, because it can’t touch the cell after that.

Then every cell goes through the cutter. It’s shifted and turned by the fraction a hand allows, its corners land a touch off the drawing, its long edges bow, and it’s inset from the joint by a mitred offset so the mortar between two shards is the same width along an edge as at a point. That cutter was Alicatado’s, and more on that below.

In the bucket, or where it fell#

A shard is a piece of a tile, so the page has to decide which tile and which piece. There are two honest answers. Either the shard is still where it broke, in which case the piece of the wall underneath it is simply the piece of the wall underneath it, and the rosettes read through the cracks. Or it went in the bucket with everything else, and came out somewhere else, turned some other way.

The intact slider is the share of shards that stayed put. At one, the wall is only cracked. At zero, every shard is a random piece of a random tile at a random angle, which is what a mason does with a bucket of pieces and no particular plan. In between you get a wall where the pattern keeps half-surfacing, a scalloped ring that runs across three shards and then stops, which is what the bench actually looks like when you get your face close to it.

I’ve had a year of breaking things and of things being broken, so a slider for how much of the original survives was always going to get built. It turns out the honest setting is somewhere around a third.

Sampling a shard in place is a clip and a drawImage of the tile under it, mirrored the way the module repeat lays it. A displaced shard is the same clip with the tile drawn around a random point at a random turn. The one surprise was the rim of the tile: the engine thickens the glaze at the edge of every tile with a faint square stroke, and on a wall that is only cracked those squares showed through as a grid. Real shards don’t carry their edges, they went in the bucket with everything else, so the page crops three per cent off every side of the tile before it samples.

The bench#

Trencadís is a curved-surface technique. You can’t bend a tile, so you break it and lay the pieces on the curve, and that’s the whole reason it exists. A flat trencadís wall is a mosaic with a bad excuse.

The page’s surface is a height field: a long sine wave along the wall, bent by a slower one across it, with an amplitude the curve slider sets. The normal of the surface at each shard’s centre is taken against the light (the same light angle Alicatado uses, with a height to it now), and the difference from flat lights the shard or shades it. The mortar follows the same surface, sampled coarsely into a small canvas and drawn smoothly over the lime before the shards go on, so the joints dip into the troughs with the pieces. The troughs also sit a little in their own shadow, which is cheap and does more than the lighting.

My first shading was far too strong and the Pedrera chimneys looked like they’d been left out in the rain. The shadow is cooler and lighter now, a lime-coloured surface throwing back a bluish shade rather than going black, and the tin-white shards on the bench stay white on the lit side, which is what the bench does at midday.

The cutter moves house#

Trencadís was the second page to want Alicatado’s cutter, which is the point at which something stops being one page’s and becomes the engine’s. offsetPoly (the mitred inset), cutPiece (the shift, the turn, the nicked corners, the bowed edges), the edge relief that lights one side of a standing piece and shades the other, the grain for the mortar, and the small polygon maths every page kept rewriting all moved out of Alicatado into the package as azulejeria/pieces, with the Voronoi beside them for pieces that are broken rather than cut.

Moving a function that draws random numbers is the dangerous kind of refactor on these pages, because every wall is deterministic per seed and an extra rng() call anywhere shifts everything after it. So before touching anything I rendered all nine of Alicatado’s presets, main canvas and the card thumbnails, and hashed the bytes. Then moved the cutter, rendered them again, and compared. Identical, which is the only acceptable answer. The same check ran on every engine page for the two small engine changes Delft needed, below, and came back identical each time.

The next customer for the cutter is Sutton Hoo, garnets in gold cells, which was blocked on this move and now isn’t.

Delft#

Delft is the engine sent north, to see whether it works for someone else’s country with no help. A Delft tile is a picture: a ship, a bird on a branch, a windmill, a tulip, a pikeman or a child bowling a hoop in the middle of a tin-white square, with a corner motif in each corner (the ossenkop, the spider’s head, the fleur-de-lis) that completes where four tiles meet. Cobalt on white, or manganese when the painter had it.

It nearly worked with no help. The engine’s wall mirrors or turns every other tile so that quarter designs complete across the joints, and a picture of a ship can’t be turned upside down. The fallthrough branch of the wall already laid tiles the same way up for any repeat it didn’t recognise, so a whole repeat was a word in a list. The second thing was that a wall draws from four paintings of its design, which is plenty when the design is a rosette, and makes a wall of ships four ships. A variants option on createWall lets Delft ask for eight. The figure is chosen in the painter from the painting’s own random stream, not when the design is grown, so each of the eight is a different ship. That was the whole engine change, and both pages’ bytes were checked before and after.

Then the figures. I drew them from parts, the way I’d drawn Leonor’s first lions and Knotwork’s first hound: a trapezoid for the mill, a drop for the bird, a hat and a coat for the pikeman. They looked, for the third time in this series, like toys. This is now a rule rather than a lesson: a figure that is a convention copied by hand for three hundred years gets traced from a drawing, not built from rules.

So I asked an image model for six, on the terms the tracer wants: one solid gold fill, a thick even black line around every part, red for the parts to wash lighter, nothing else in the frame. It gave me a fluyt with red sails, a robin with a red breast, a post mill with a red cap, a tulip, a pikeman with a red feather in his hat, and a boy with a red hoop. The forty-line tracer from the heraldry post turned each one into loops. Gold became the cobalt wash, laid twice so it pools; red became a lighter wash over the glaze; black became the ink, laid last. The mill’s lattice sails keep their holes because the silhouette is filled even-odd.

One thing the traced figures couldn’t do at first was listen to the sliders. The brush slider is the engine’s line weight, and a traced line is a filled shape at the drawing’s own width. So the brush object the engine hands every painter now carries hand and brush as the state has them, and the traced ink drifts with the hand like the wash does, and is stroked wider when the brush is loaded past the drawing’s line. A lighter brush can’t thin a traced line without painting a halo over the wash outside it, so below one it stays the drawing’s weight, and the page says so. Jerez’s horse and Rosa y Granada’s pomegranate got the same.

In the package#

azulejeria is at 2.3.1. The cutter is its own module, next to the knots, and uses nothing from the wall except the seeded random.

npm install azulejeria

import { voronoi, cutPiece, relief } from 'azulejeria/pieces';

cutPiece takes a polygon and how far it may stray and gives you back the piece as laid and its glazed face inside the joint. voronoi gives you the cells of a scatter of points. relief lights the edges. The README has the rest, and the whole repeat and variants are in the wall’s options for anyone whose tiles are pictures.

Sebka is next, the brick lattice of the Giralda, a piece that is entirely light. Then Sutton Hoo.