Melbourne

// composition: a letterpress vignette of Flinders Street Station seen from the Swanston Street
// corner diagonally opposite. The domed corner entrance is the NEAR mass, sitting left of the
// print's centre; the long Flinders Street facade recedes to the right to the square clock tower
// at its far end; a short foreshortened Swanston Street return runs left into shade. Below, the
// tram tracks rule away to the right with one W-class tram and a few ticks of people. No sky.
//
// four non-negotiable facts
//   proportion — the corner bay is 108px wide and its dome apex stands 288px above the street
//     (2.7:1 for the whole corner); the clock tower at the far end is taller than the three-storey
//     facade but plainly LOWER than the corner dome; its shaft is 50 wide by 180 tall (3.6:1).
//   ordering — the corner bay is in front and largest; the facade recedes behind it to a single
//     right-hand vanishing point: cornice descending, street line rising, bays compressing.
//   material — red brick and cream stucco in horizontal bands; verdigris copper dome on an
//     octagonal drum; the openings are round arches, not square holes.
//   site — a street corner, not a monument: kerb, converging tram rulings, no sky, no ground band
//     wider than the print.
// counts drawn — NINE station clocks over ONE broad round arch; 3 storeys + 1 arcaded verandah;
//   14 arched windows per storey on the Flinders face (x3) and 15 verandah openings; 6 per storey
//   on the Swanston return; 3 visible drum faces, 8 dome ribs; 1 tower with 1 clock face;
//   1 tram with 8 window slots; 5 people; 4 rails.
// layering: paper flecks, the two receding faces (shade first), the corner bay, brick bands over
//   stucco, counted slots, the clock band, drum and dome, the tower, the kerb, the tracks and
//   tram, then the last darks and one gilt finial.
const PALETTE = [
  "#efe6d2", // paper — warm cream sheet
  "#a8452c", // brick — the red banding
  "#2f3a44", // ink — slate-navy line and shadow plate
  "#5d7f88", // verdigris — the copper domes and the tram
  "#d4b483", // sand — the cream stucco bands
  "#d9cfb6", // stone — cornices, the kerb, the clock band
  "#c9a24a", // gilt — the finial and the tram's stripe, the one warm accent
];
const BASE = 618; // street line at the near corner
const CB0 = 196, CB1 = 304, CX = 250; // the chamfered corner bay, and the dome's axis
const RX0 = 304, RX1 = 626; // the Flinders Street face
const LX0 = 124, LX1 = 196; // the Swanston Street return
const TX0 = 616, TX1 = 666, TCX = 641; // the clock tower

const g = (m, sd, lo, hi) => constrain(randomGaussian(m, sd), lo, hi);
const shift = (pts, dx, dy) => pts.map((p) => [p[0] + dx, p[1] + dy]);
const box = (x, y, w, h) => [[x, y], [x + w, y], [x + w, y + h], [x, y + h]];

// a solid grainy plate — the letterpress solid. noStroke: a plate never carries the last pen's outline.
const plate = (pts, col, w, dist, ang, rnd) => {
  brush.noStroke();
  brush.noFill();
  brush.hatchStyle("charcoal", col, w);
  brush.hatch(dist, ang, { rand: rnd, continuous: false, gradient: 0 });
  brush.polygon(pts);
  brush.noHatch();
};
// a half-tone plate — two crossed cpencil passes, paper breathing through
const halfPlate = (pts, col, w, dist, ang) => {
  brush.noStroke();
  brush.noFill();
  brush.hatchStyle("cpencil", col, w);
  brush.hatch(dist, ang, { rand: 0.25, continuous: false, gradient: 0 });
  brush.polygon(pts);
  brush.hatch(dist * 1.12, ang - 84, { rand: 0.25, continuous: false, gradient: 0 });
  brush.polygon(pts);
  brush.noHatch();
};
// a fading plate — gradient hatch, dense at one edge, open at the other
const fadePlate = (pts, col, w, dist, ang, grad) => {
  brush.noStroke();
  brush.noFill();
  brush.hatchStyle("charcoal", col, w);
  brush.hatch(dist, ang, { rand: 0.3, continuous: false, gradient: grad });
  brush.polygon(pts);
  brush.noHatch();
};
const ink = (x1, y1, x2, y2, w, name, col) => {
  brush.noFill();
  brush.set(name || "rotring", col || PALETTE[2], w || 1.0);
  brush.line(x1, y1, x2, y2);
};
// a dark window / arch slot
const slot = (x, y, w, h) => plate(box(x, y, w, h), PALETTE[2], 1.1, 1.5, 90, 0.2);

// --- the perspective. One right-hand vanishing point: cornice falls, street rises, bays compress.
const topR = (x) => 434 + (x - CB1) * 0.128;
const botR = (x) => BASE - (x - CB1) * 0.062;
const topL = (x) => 434 + (CB0 - x) * 0.145;
const botL = (x) => BASE - (CB0 - x) * 0.150;
// bay parameter -> x, compressed toward the far end
const runR = (u) => RX0 + (RX1 - RX0) * ((u * 2.15) / (1 + 1.15 * u));
const runL = (u) => LX1 - (LX1 - LX0) * ((u * 2.5) / (1 + 1.5 * u));
// a horizontal band of a receding face, between two fractions of its own height
const band = (x0, x1, f0, f1, tf, bf) => [
  [x0, lerp(tf(x0), bf(x0), f0)],
  [x1, lerp(tf(x1), bf(x1), f0)],
  [x1, lerp(tf(x1), bf(x1), f1)],
  [x0, lerp(tf(x0), bf(x0), f1)],
];
// an opening on a receding face: x, the two fractions, width
const opening = (x, f0, f1, w, tf, bf) => {
  const t = tf(x), b = bf(x);
  slot(x, lerp(t, b, f0), w, (f1 - f0) * (b - t));
};
const domeAt = (cx, springY, rx, ry, i0, i1) => {
  const pts = [];
  for (let i = i0; i <= i1; i++) {
    const a = Math.PI + (i / 16) * Math.PI;
    pts.push([cx + Math.cos(a) * rx, springY + Math.sin(a) * ry]);
  }
  pts.push([cx + Math.cos(Math.PI + (i1 / 16) * Math.PI) * rx, springY]);
  pts.push([cx + Math.cos(Math.PI + (i0 / 16) * Math.PI) * rx, springY]);
  return pts;
};
const archAt = (cx, springY, hw, rise, footY) => {
  const pts = [[cx - hw, footY]];
  for (let i = 0; i <= 12; i++) {
    const a = Math.PI + (i / 12) * Math.PI;
    pts.push([cx + Math.cos(a) * hw, springY + Math.sin(a) * rise]);
  }
  pts.push([cx + hw, footY]);
  return pts;
};

// the storey rhythm, as fractions of a face's own height
const F = {
  cor: [0.0, 0.055],   // stone cornice
  b1: [0.06, 0.105],   // brick band
  s3: [0.115, 0.345],  // third storey, stucco
  b2: [0.352, 0.397],
  s2: [0.405, 0.635],  // second storey, stucco
  b3: [0.642, 0.687],
  s1: [0.695, 0.815],  // first storey, stucco
  ver: [0.815, 1.0],   // the arcaded verandah
};

function setup() {
  createCanvas(800, 800, WEBGL);
  angleMode(DEGREES);
  brush.scaleBrushes(2.4);
  noLoop();
}

function draw() {
  translate(-width / 2, -height / 2);
  background(PALETTE[0]);

  // 0 — paper flecks: faint warm specks so the sheet is not dead, never dark
  for (let i = 0; i < 220; i++) {
    const x = random(10, 790), y = random(10, 790);
    ink(x, y, x + g(1.4, 0.5, 0.5, 2.6), y + g(0, 0.4, -1, 1), g(0.45, 0.1, 0.3, 0.6), "2H", random() < 0.7 ? "#bfb39a" : PALETTE[5]);
  }

  // 1 — the Swanston Street return: the short face turning away to the left, in shade
  halfPlate(band(LX0, LX1, F.cor[1], 1.0, topL, botL), PALETTE[4], 1.3, 2.5, 84);
  plate(band(LX0, LX1, F.b1[0], F.b1[1], topL, botL), PALETTE[1], 1.3, 2.4, 88, 0.3);
  plate(band(LX0, LX1, F.b2[0], F.b2[1], topL, botL), PALETTE[1], 1.3, 2.4, 86, 0.3);
  plate(band(LX0, LX1, F.b3[0], F.b3[1], topL, botL), PALETTE[1], 1.3, 2.4, 90, 0.3);
  fadePlate(shift(band(LX0, LX1, 0.02, 1.0, topL, botL), 1.5, 1), PALETTE[2], 0.95, 4.4, 94, 0.5); // shade, fading toward the corner
  plate(band(LX0, LX1, F.cor[0], F.cor[1], topL, botL), PALETTE[5], 1.2, 1.7, 4, 0.25);
  for (let i = 0; i < 6; i++) {
    const x = runL((i + 0.5) / 6), xn = runL((i + 1.5) / 6);
    const w = max(3, (x - xn) * 0.46);
    opening(x - w, 0.16, 0.305, w, topL, botL);
    opening(x - w, 0.45, 0.60, w, topL, botL);
    opening(x - w, 0.72, 0.795, w, topL, botL);
  }
  for (let i = 0; i < 6; i++) {
    const x = runL((i + 0.5) / 6), xn = runL((i + 1.5) / 6);
    opening(x - max(4, (x - xn) * 0.6), 0.855, 0.99, max(4, (x - xn) * 0.6), topL, botL);
  }
  ink(LX0, topL(LX0) - 1, LX1 + 2, topL(LX1) - 1, 1.2);
  ink(LX0, lerp(topL(LX0), botL(LX0), 0.815), LX1, lerp(topL(LX1), botL(LX1), 0.815), 0.9, "pen");
  ink(LX0 - 1, topL(LX0), LX0 - 1, botL(LX0), 1.1); // the crisp far end of the return

  // 2 — the Flinders Street face: two runs, the far one lighter, so the wall recedes
  const runs = [[RX0, 478, 1.35, 2.2, 66, 1.45, 2.15], [470, RX1, 1.1, 2.9, 58, 1.25, 2.7]];
  for (let r = 0; r < runs.length; r++) {
    const [x0, x1, hw, hd, ha, bw, bd] = runs[r];
    halfPlate(band(x0, x1, F.cor[1], 1.0, topR, botR), PALETTE[4], hw, hd, ha);
    plate(band(x0, x1, F.b1[0], F.b1[1], topR, botR), PALETTE[1], bw, bd, 90 + r * 4, 0.3);
    plate(band(x0, x1, F.b2[0], F.b2[1], topR, botR), PALETTE[1], bw, bd, 88 - r * 3, 0.3);
    plate(band(x0, x1, F.b3[0], F.b3[1], topR, botR), PALETTE[1], bw, bd, 92 + r * 2, 0.3);
    plate(band(x0, x1, F.cor[0], F.cor[1], topR, botR), PALETTE[5], 1.2, 1.7, r ? 6 : 0, 0.25);
  }
  // shadow under the cornice, and the verandah's deep shade at street level
  fadePlate(band(RX0, RX1, 0.055, 0.135, topR, botR), PALETTE[2], 1.0, 3.6, 0, 0.72);
  fadePlate(band(RX0, RX1, F.ver[0], 0.882, topR, botR), PALETTE[2], 1.0, 3.8, 0, 0.6);
  // the counted rhythm: 14 arched windows a storey, compressing to the right
  for (let i = 0; i < 14; i++) {
    const x = runR((i + 0.5) / 14), xn = runR((i + 1.5) / 14);
    const w = max(3.2, (xn - x) * 0.44);
    opening(x + g(0, 0.35, -0.9, 0.9), 0.155, 0.305, w, topR, botR);
    opening(x + g(0, 0.35, -0.9, 0.9), 0.44, 0.605, w * 1.05, topR, botR);
    opening(x + g(0, 0.3, -0.8, 0.8), 0.715, 0.795, w * 0.92, topR, botR);
    ink(x + w * 0.5, lerp(topR(x), botR(x), 0.44), x + w * 0.5, lerp(topR(x), botR(x), 0.415), 0.7, "pen"); // arch head tick
  }
  // the verandah: 15 openings under the awning, with a pen pier standing between each pair
  for (let i = 0; i < 15; i++) {
    const x = runR((i + 0.5) / 15), xn = runR((i + 1.5) / 15);
    const w = max(3.6, (xn - x) * 0.44);
    opening(x + g(0, 0.4, -1, 1), 0.862, 0.985, w, topR, botR);
    const px = x + w + (xn - x - w) * 0.5;
    ink(px, lerp(topR(px), botR(px), 0.852), px, lerp(topR(px), botR(px), 0.998), 1.0, "pen");
  }
  // string courses and the verandah fascia, ruled
  ink(RX0 - 2, topR(RX0) - 1, RX1 + 2, topR(RX1) - 1, 1.3); // main cornice
  ink(RX0, lerp(topR(RX0), botR(RX0), 0.405), RX1, lerp(topR(RX1), botR(RX1), 0.405), 0.85, "pen");
  ink(RX0, lerp(topR(RX0), botR(RX0), 0.635), RX1, lerp(topR(RX1), botR(RX1), 0.635), 0.85, "pen");
  ink(RX0 - 2, lerp(topR(RX0), botR(RX0), 0.815), RX1 + 2, lerp(topR(RX1), botR(RX1), 0.815), 1.2);
  // parapet balustrade — short pen ticks the length of the face
  for (let i = 0; i < 34; i++) {
    const x = runR(i / 34), t = i / 34;
    ink(x, topR(x) - 7.5 + t * 3.4, x, topR(x) - 1, 0.8 - t * 0.22, "pen");
  }

  // 3 — the corner bay: the near mass, nearly frontal, the lit face of the print
  const CTOP = 428, CCOR = 444;
  halfPlate(box(CB0, CCOR, CB1 - CB0, BASE - CCOR), PALETTE[4], 1.4, 2.05, 72);
  plate(box(CB0, 470, CB1 - CB0, 12), PALETTE[1], 1.45, 2.1, 91, 0.3);   // band over the clock storey
  plate(box(CB0, 556, CB1 - CB0, 12), PALETTE[1], 1.45, 2.1, 87, 0.3);   // band at the impost
  plate(box(CB0, 596, CB1 - CB0, 10), PALETTE[1], 1.4, 2.2, 89, 0.3);    // plinth band
  // the clock band — a stone panel, then the NINE clocks
  halfPlate(box(CB0 + 4, 448, CB1 - CB0 - 8, 22), PALETTE[5], 1.25, 1.9, 58);
  ink(CB0 + 2, 447, CB1 - 2, 447, 0.9, "pen");
  ink(CB0 + 2, 470, CB1 - 2, 470, 0.9, "pen");
  brush.noFill();
  for (let i = 0; i < 9; i++) {
    const cx = CB0 + 10 + i * 11.6 + g(0, 0.25, -0.6, 0.6);
    const pts = [];
    for (let k = 0; k <= 14; k++) {
      const a = (k / 14) * Math.PI * 2;
      pts.push([cx + Math.cos(a) * 4.6, 459 + Math.sin(a) * 4.6]);
    }
    brush.set("pen", PALETTE[2], g(0.95, 0.12, 0.7, 1.2));
    brush.polygon(pts);
    ink(cx, 459, cx + g(0, 1.2, -2.2, 2.2), 456, 0.7, "pen"); // the hands, no numerals
  }
  // the ONE broad round arch, its archivolt and impost
  const ARCH = archAt(CX, 538, 42, 43, BASE - 2);
  plate(ARCH, PALETTE[2], 1.5, 1.6, 84, 0.25);
  plate(shift(ARCH, -1.5, 1), PALETTE[2], 1.2, 2.6, 96, 0.3);
  // the glazed fanlight in the head of the arch — the arch is an opening, not a cave
  halfPlate(archAt(CX, 536, 35, 36, 536), PALETTE[3], 1.25, 2.0, 40);
  brush.noFill();
  for (let i = 1; i < 7; i++) {
    const a = Math.PI + (i / 7) * Math.PI;
    brush.set("pen", PALETTE[2], 0.8);
    brush.line(CX, 536, CX + Math.cos(a) * 34, 536 + Math.sin(a) * 35);
  }
  ink(CX - 35, 536, CX + 35, 536, 1.0, "pen");
  brush.noFill();
  brush.set("rotring", PALETTE[2], 1.4);
  brush.polygon(archAt(CX, 538, 47, 48, 542));
  ink(CB0 + 6, 539, CX - 44, 539, 1.0); ink(CX + 44, 539, CB1 - 6, 539, 1.0); // impost
  for (let i = 0; i <= 10; i++) { // voussoirs on the arch head
    const a = Math.PI + (i / 10) * Math.PI;
    ink(CX + Math.cos(a) * 44, 538 + Math.sin(a) * 45, CX + Math.cos(a) * 51, 538 + Math.sin(a) * 52, 0.85, "pen");
  }
  // the two flanking piers of the bay, and their small windows
  slot(CB0 + 8, 490, 7, 26); slot(CB1 - 15, 490, 7, 26);
  slot(CB0 + 9, 556, 6, 20); slot(CB1 - 15, 556, 6, 20);
  // parapet and cornice over the clocks
  plate(box(CB0 - 4, CCOR - 8, CB1 - CB0 + 8, 9), PALETTE[5], 1.25, 1.6, 3, 0.25);
  ink(CB0 - 5, CCOR - 9, CB1 + 5, CCOR - 9, 1.4);
  for (let i = 0; i < 16; i++) ink(CB0 + 2 + i * 6.6, CTOP - 4, CB0 + 2 + i * 6.6, CCOR - 9, 0.75, "pen");
  ink(CB0 - 4, CTOP - 4, CB1 + 4, CTOP - 4, 1.1);

  // 4 — the octagonal drum: three visible faces, ribs at their arrises, a light in each
  const DTOP = 400, DB = 428;
  halfPlate(box(212, DTOP, 24, DB - DTOP), PALETTE[5], 1.25, 1.9, 68);
  halfPlate(box(234, DTOP - 2, 34, DB - DTOP + 2), PALETTE[5], 1.3, 1.8, 74);
  plate(box(266, DTOP, 24, DB - DTOP), PALETTE[5], 1.35, 2.2, 88, 0.3);
  plate(shift(box(266, DTOP, 24, DB - DTOP), 1.5, 1), PALETTE[2], 1.05, 3.4, 92, 0.3);
  ink(212, DTOP, 212, DB, 0.8, "pen"); ink(234, DTOP - 2, 234, DB, 0.8, "pen");
  ink(266, DTOP - 2, 266, DB, 0.8, "pen"); ink(290, DTOP, 290, DB, 0.8, "pen");
  slot(221, DTOP + 6, 5, 15); slot(247, DTOP + 4, 6, 17); slot(275, DTOP + 6, 5, 14);
  ink(208, DB, 294, DB, 1.2);

  // 5 — the copper dome: lit half, shade half, ink over-plate, eight ribs, the gilt finial
  const DR = 44, DRY = 50, SPR = 400;
  halfPlate(domeAt(CX, SPR, DR, DRY, 0, 8), PALETTE[3], 1.35, 2.0, 76);
  plate(domeAt(CX, SPR, DR, DRY, 8, 16), PALETTE[3], 1.5, 2.05, 100, 0.3);
  plate(shift(domeAt(CX, SPR, DR, DRY, 9, 16), 1.5, 1), PALETTE[2], 1.1, 3.2, 104, 0.3);
  plate(domeAt(CX, SPR, DR, DRY, 0, 16), PALETTE[3], 1.15, 3.8, 12, 0.3); // a second dry pass, so the copper reads solid
  brush.noFill();
  for (let i = 1; i < 8; i++) {
    const a = Math.PI + (i / 8) * Math.PI;
    brush.set("pen", PALETTE[2], g(0.8, 0.12, 0.6, 1.0));
    brush.line(CX, SPR - DRY + 1, CX + Math.cos(a) * DR * 0.99, SPR + Math.sin(a) * DRY * 0.99);
  }
  brush.set("rotring", PALETTE[2], 1.1);
  brush.polygon(domeAt(CX, SPR + 1, DR + 1, DRY + 1, 0, 16));
  // the lantern and, above it, the single gilt finial — the accent
  plate(box(CX - 8, SPR - DRY - 14, 16, 15), PALETTE[3], 1.4, 1.8, 90, 0.25);
  ink(CX - 10, SPR - DRY - 14, CX + 10, SPR - DRY - 14, 1.0);
  ink(CX, SPR - DRY - 15, CX, SPR - DRY - 24, 2.4, "charcoal", PALETTE[6]);

  // 6 — the clock tower at the far end: taller than the facade, lower than the dome
  const TTOP = 418, TBOT = botR(TCX);
  halfPlate(box(TX0, TTOP, 34, TBOT - TTOP), PALETTE[4], 1.25, 2.4, 64);
  plate(box(TX0 + 34, TTOP, 16, TBOT - TTOP), PALETTE[4], 1.35, 2.3, 90, 0.3);
  plate(shift(box(TX0 + 34, TTOP, 16, TBOT - TTOP), 1.5, 1), PALETTE[2], 1.05, 3.2, 94, 0.3);
  plate(box(TX0, TTOP + 12, TX1 - TX0, 9), PALETTE[1], 1.4, 2.1, 89, 0.3);
  plate(box(TX0, TTOP + 62, TX1 - TX0, 9), PALETTE[1], 1.4, 2.1, 87, 0.3);
  plate(box(TX0, TTOP + 108, TX1 - TX0, 9), PALETTE[1], 1.4, 2.1, 91, 0.3);
  plate(box(TX0 - 4, TTOP - 7, TX1 - TX0 + 8, 8), PALETTE[5], 1.2, 1.6, 2, 0.25);
  ink(TX0 - 5, TTOP - 8, TX1 + 5, TTOP - 8, 1.2);
  ink(TX0 - 1, TTOP, TX0 - 1, TBOT, 1.0); ink(TX1 + 1, TTOP, TX1 + 1, TBOT, 1.2);
  // the tower's own clock, and its louvres
  brush.noFill();
  const tpts = [];
  for (let k = 0; k <= 14; k++) {
    const a = (k / 14) * Math.PI * 2;
    tpts.push([TCX - 6 + Math.cos(a) * 7.5, TTOP + 38 + Math.sin(a) * 7.5]);
  }
  brush.set("rotring", PALETTE[2], 1.05);
  brush.polygon(tpts);
  slot(TX0 + 8, TTOP + 78, 6, 20); slot(TX0 + 24, TTOP + 78, 6, 20);
  slot(TX0 + 8, TTOP + 126, 5, 16); slot(TX0 + 24, TTOP + 126, 5, 16);
  // its small copper dome and finial
  halfPlate(domeAt(TCX - 3, TTOP - 8, 23, 20, 0, 8), PALETTE[3], 1.3, 1.9, 78);
  plate(domeAt(TCX - 3, TTOP - 8, 23, 20, 8, 16), PALETTE[3], 1.45, 2.0, 98, 0.3);
  ink(TCX - 3, TTOP - 29, TCX - 3, TTOP - 38, 1.6, "charcoal");
  // past the tower the building drops away into shade — never a clean rectangle end
  fadePlate([[TX1, TTOP + 46], [676, TTOP + 58], [676, botR(676)], [TX1, TBOT]], PALETTE[2], 1.0, 4.0, 90, 0.5);

  // 7 — the kerb: one stone lip the width of the print, dissolving into dashes at both ends
  plate([[130, botL(130) + 1], [CB0, BASE], [CB1, BASE], [676, botR(676)], [676, botR(676) + 5], [130, botL(130) + 6]], PALETTE[5], 1.15, 1.6, 0, 0.25);
  ink(126, botL(126) + 6, CB0, BASE + 6, 1.2); ink(CB1, BASE + 6, 672, botR(672) + 5, 1.3);
  for (let i = 0; i < 7; i++) ink(132 + i * 8, botL(132 + i * 8) + 7, 138 + i * 8, botL(138 + i * 8) + 7, 0.9, "2B");

  // 8 — the road: bare paper, ruled only by the four rails converging right
  const rails = [[154, 638, 668, 602], [160, 647, 672, 605], [194, 655, 676, 608], [236, 661, 678, 611]];
  for (let i = 0; i < rails.length; i++) {
    const r = rails[i];
    ink(r[0], r[1], r[2], r[3], g(1.1, 0.15, 0.8, 1.35), "pen");
    ink(r[0] + 5, r[1] + 1.6, r[2] - 6, r[3] + 1.4, g(0.62, 0.1, 0.45, 0.8), "2H", "#9fa8ab");
  }
  // the near rulings break into dashes at the left so the road dissolves into paper
  for (let i = 0; i < 8; i++) {
    const x = 156 + i * 9;
    ink(x, 661 - i * 1.4, x + g(4.5, 1.2, 2, 7), 661 - i * 1.4, 0.8, "2B", "#9fa8ab");
  }

  // 9 — one W-class tram on the near track, its far end smaller: verdigris body, gilt stripe
  const TR = [[378, 618], [526, 608], [526, 632], [378, 650]];
  plate(TR, PALETTE[3], 1.5, 2.0, 84, 0.3);
  halfPlate([[382, 620], [522, 610], [522, 622], [382, 632]], PALETTE[5], 1.15, 1.8, 30); // the cream window band
  for (let i = 0; i < 8; i++) slot(388 + i * 16.6, 621 - i * 1.2, 6.5 - i * 0.25, 9 - i * 0.3);
  plate([[376, 613], [528, 603], [528, 608], [376, 618]], PALETTE[3], 1.3, 1.7, 0, 0.25); // roof
  ink(378, 638, 526, 622, 1.8, "charcoal", PALETTE[6]); // the gilt stripe — the second and last accent
  ink(376, 650, 528, 632, 1.5, "charcoal");
  ink(376, 618, 376, 650, 1.1); ink(528, 604, 528, 632, 0.85);
  ink(400, 649, 400, 654, 1.6, "charcoal"); ink(498, 635, 498, 640, 1.4, "charcoal");

  // 10 — people at the corner crossing: charcoal ticks, nothing more
  const folk = [[196, 654, 11], [209, 651, 10], [250, 647, 9], [292, 643, 9], [322, 640, 8]];
  for (let i = 0; i < folk.length; i++) {
    const x = folk[i][0], fy = folk[i][1], h = folk[i][2];
    ink(x, fy, x + g(0, 0.7, -1.4, 1.4), fy - h, 1.9, "charcoal");
  }

  // 11 — last darks: the crisp arrises of the corner, the deep shade at the foot of the bay
  fadePlate(box(CB0, BASE - 24, CB1 - CB0, 24), PALETTE[2], 0.95, 4.2, 90, 0.78);
  ink(CB0 - 1, CTOP - 4, CB0 - 1, BASE, 1.3);
  ink(CB1 + 1, CTOP - 4, CB1 + 1, BASE, 1.1);
  ink(LX1 - 1, topL(LX1), LX1 - 1, botL(LX1), 0.9, "pen");
  ink(RX0 + 1, topR(RX0), RX0 + 1, botR(RX0), 0.9, "pen");
}