Heraldry by Rule

The man who boarded at Gatwick never got off in Seville.

Teleporter

Until now the art pages have stayed on the peninsula: Islamic stars, Talavera cobalt, the Alhambra's cut tile, Barcelona's cement floors, Roman pavements under Seville. I'm English, and I wanted the series to come home without changing the subject. The link turns out to be seven hundred years old and made of exactly the right stuff. Eleanor of Castile married Edward I in 1254 and brought her arms with her, the castle of Castile quartered with the lion of León. They're carved on her tomb in Westminster Abbey and on the crosses Edward put up wherever her coffin rested on the way to London. Two centuries later Catherine of Aragon's badge, the pomegranate of Granada beside the Tudor rose, got carved and painted over half of Tudor England. Heraldry is how Spain got into English stone, so heraldry is how England gets into this series.

Those of you who know me, or regular visitors, will maybe know of my deep love for Spain, my friends there and from there, and my dreams, intact and in ruins. Anyway. I wanted to bring this series home, and there are a few more steps I'll flesh out on the way.

Leonor is that page. The shield in the middle is hers, or what hers would have looked like on a wall at Westminster: England impaling Castile and León.

{{< figure src="https://stepinto.dev/images/leonor/hall.webp" class="chart" alt="A hall of shields hung on dark oak panelling, each with its blazon lettered beneath. At the centre, three gold lions on red impaled with the quartered castle and lion of Castile and León" caption="The hall. Every shield but the centre one is a random legal blazon, generated from its position on the wall." >}}

A sentence that paints

A blazon is a sentence that describes a shield exactly, in a grammar that hasn't really moved since the thirteenth century. "Gules three lions passant guardant in pale Or armed and langued Azure" is England. Read it in order: a red field, three lions walking and looking at you, one above another, gold, with blue claws and tongues. Every word changes the picture, and two heralds handed the same sentence paint the same shield, which I rather love.

So the page just has to read the sentence. The parser is a recursive descent over a chunk of the grammar: a field, which is a tincture, a division (per pale, per fess, quarterly) or a variation (barry, paly, chequy, lozengy); then ordinaries (chief, fess, pale, bend, chevron, cross, saltire, bordure, pile, canton), each of which can carry charges of its own; then charges by number and arrangement, with their attitudes and the tinctures of their parts; then marshalling, which is impaling and quartering, which recurse back into the whole thing.

function field() {
  if (peek() === 'per' && DIVISIONS[peek(1)]) {
    take(); const kind = DIVISIONS[take()];
    const a = tincture(); if (peek() === 'and') take(); const b = tincture();
    return { kind, a: a || 'argent', b: b || 'gules' };
  }
  if (peek() in VARIATIONS) {
    const kind = VARIATIONS[take()]; let n = 6;
    if (peek() === 'of') { take(); n = NUMBERS[peek()] || parseInt(peek(), 10) || 6; take(); }
    const a = tincture(); if (peek() === 'and') take(); const b = tincture();
    return { kind, n, a: a || 'argent', b: b || 'gules' };
  }
  return { kind: 'plain', a: tincture() || 'argent' };
}

It's a lot more forgiving than a herald would be. Unknown words are skipped, a missing tincture defaults, "gardant" and "guardant" both work. The sentence is the shareable thing: ?blazon=Or a lion rampant Gules is Scotland, and whatever you type into the box becomes the URL.

The generator goes the other way. Every shield in the hall apart from the centre one is a sentence written by a seeded random generator that knows the rule of tincture (metal on colour, colour on metal, never gold on silver or red on blue). It picks a field, then an ordinary, an ordinary with charges on it, a single charge, or three, and writes it out properly with the capitals in the right places. Then it hands the sentence to the same parser you'd type into. The generator can't paint at all. It can only write, which keeps the hall honest.

{{< figure src="https://stepinto.dev/images/leonor/stone.webp" class="chart" alt="Shields on a wall of dressed grey stone: Castile and León at the centre, purple towers on gold, black lions on green and gold stripes, a blue roundel on a gold and black chequer" caption="The Castile preset on dressed stone. The hall's palette is the medieval one: Or, Argent, Gules, Azure, Sable, Vert and Purpure, and nothing else." >}}

Enamel and gilt

The material is a painted board. Each tincture goes down flat and then gets whatever that pigment would have had. Gold gets a gradient from leaf to shadow and back, and over it a tooled grain, fine diagonal lines punched into the leaf. Silver gets a cool fall-off from top to bottom. The whole shield gets a gloss across it, light at the top left and a touch of dark in the base, and then a black line round the heater shape with a pale line just inside it for the bevel. The shield casts a shadow on the panelling. The oak itself is boards with a grain, and there are stone and red velvet halls for when the oak gets too brown.

The charges are painted like the tinctures, plus one thing. Every charge gets a single outline round the whole of itself, stroked wide in black before the parts are filled, so a lion built from a body and a tail and a leg reads as one animal. That was the theory, anyway.

The lions were toys

I drew the first lions from parts. A body polygon, a tail polygon, a raised leg on top, a scalloped mane, little triangle claws, dot eyes. An afternoon of nudging coordinates got me this.

{{< figure src="https://stepinto.dev/images/leonor/leonor-old.webp" class="chart" alt="A shield with three crude gold lions, their manes drawn as spiky sunbursts and their legs as stubs, next to a quartered shield where the purple lion is a shapeless blob" caption="The first lions. England's three should be the thing you recognise first, and they weren't." >}}

A heraldic lion is a particular drawing. Tufted mane, tail curling up over the back into a brush, tongue out, claws splayed, and for passant guardant the head turned full-face so you see both eyes. You can't write that down as a rule and get a lion out. It's a convention copied by hand from roll to roll since the 1250s, and the honest way to get it is to copy a drawing too.

So I asked an image model for one. The prompt was about what I needed to trace, not what I wanted to look at: a flat vector illustration, one solid gold fill, a thick even black outline around every part, red tongue, blue claws, no shading, no texture, white background. It gave me a lion that a thirteenth-century herald would have recognised, and a purple rampant one to match, and then a pomegranate and a castle on the same terms.

The tracing is forty lines of Node, and it's pretty dumb. Every pixel is classed by its nearest colour out of white, black, gold, red, blue and green. Each class becomes a mask, each mask becomes closed loops by walking the boundary edges between a pixel that is in and a pixel that is out, each loop is simplified with Douglas-Peucker to a tolerance of two and a half pixels, and the points are normalised to the silhouette's bounding box. The silhouette is one layer. Each colour is a layer. The black lines are a layer. The page fills them in that order:

function traced(T, roles) {
  const P = [{ path: loops(T.main), role: 'main' }];
  for (const k of ['red', 'blue', 'green']) if (T[k] && roles[k]) P.push({ path: loops(T[k]), role: roles[k], detail: true });
  P.push({ path: loops(T.sable), role: 'sable', detail: true });
  P.traced = true;
  return P;
}

const DRAW = {
  lion(ch) { return traced(ch.attitude === 'rampant' ? TRACED.rampant : TRACED.passant, { red: 'armed', blue: 'armed' }); },
  pomegranate() { return traced(TRACED.pomegranate, { red: 'seeded', green: 'leaved' }); },
  castle() { return traced(TRACED.castle, { blue: 'armed' }); },
  // ...
};

The colours in the drawing are labels, and the shield doesn't use them. Red in the lion means "armed", and armed resolves to whatever the blazon said, so the same traced lion paints in Or, Purpure, Gules or Sable, with blue claws or red ones. Red in the pomegranate means "seeded" and green means "leaved". The silhouette is filled even-odd so the loop of the tail stays open and the field shows through. The black line network goes on last, and because the drawing's own outline is in it, the page's outline stroke drops to half its width for traced charges so the lion doesn't go muddy at the size of a quarter.

{{< figure src="https://stepinto.dev/images/leonor/leonor-close.webp" class="chart" alt="A close view of the centre shield: three gold lions passant guardant with tufted manes and curled tails on red, impaled with the quartered castle of Castile and purple lion rampant of León" caption="The same blazon, traced. The lions are the drawings; the colours are the sentence's." >}}

It costs about ninety kilobytes of numbers, more than the rest of the page put together, and it was worth every byte. The procedural charges are rules and the lions are a tradition, and if you pretend a tradition is a rule you get a sunburst for a mane.

{{< figure src="https://stepinto.dev/images/leonor/granada.webp" class="chart" alt="A gold pomegranate split to show a cluster of red seeds, with green leaves, on a silver shield" caption="Argent a pomegranate proper seeded Gules slipped and leaved Vert. Catherine's badge, traced on the same terms as the lions." >}}

Small corrections

Two things got fixed along the way that any herald would have spotted straight off. A crescent has its horns pointing up, to chief; mine pointed down, which is a crescent reversed and a different charge. And charges on a bend lie bendwise, turned with it and sized to the band, rather than standing upright in a column across it.

{{< figure src="https://stepinto.dev/images/leonor/bend.webp" class="chart" alt="A silver shield with a blue diagonal band carrying three red lions rampant, each turned to lie along the band" caption="Argent on a bend Azure three lions rampant Gules. They lie bendwise, as they should." >}}

What comes next

The tower is still drawn from parts and looks it, so it gets the same treatment when there's a drawing. Two of the pieces this page pointed at have since been made. Rosa y Granada is Catherine's rose and pomegranate as a medieval English floor, white clay inlaid in red, with the pomegranate traced here doing double duty. Knotwork is interlace on vellum after Lindisfarne and Kells, the same over-and-under as the Mudéjar lacería, and its beasts' heads came out of the same trace-a-drawing trick as these lions. Sutton Hoo's garnet cloisonné is still in the queue, which is Alicatado's cutter in gold. The English pieces are the same rules in a colder light.