Mumbai

// composition: a letterpress vignette of the Gateway of India seen from the harbour, three-quarter
// from the right: the front face turns and its right flank runs back into shade, the Taj Mahal
// Palace's red dome and roofline small behind on the left, ferries crowding the plinth steps.
// The arch sits right of the print's own centre; the hotel and the left-hand boats balance it.
// four facts I will not break:
//   1 proportion — 26 m to the top of the dome; the dome is 15 m across and SHALLOW (rise about a
//     third of its span), sitting behind the parapet, not a drum. The great arch is POINTED, a
//     two-centre arch whose crown reaches ~15 m — more than half the monument's height — and its
//     opening is under half the central block, so the piers either side are heavy stone.
//   2 ordering — the monument stands at the water's edge on Apollo Bunder; the Taj Mahal Palace is
//     SET BACK behind it and to the left, its right end cut off by the Gateway's left hall. Boats
//     are in front of the plinth, never behind it.
//   3 material — yellow Kharodi basalt: a grey-leaning ochre, never gold. Lit faces are sand
//     half-plates, the turning flank a sand plate with an open ink over-plate misregistered 1.5px.
//     The halls carry pierced jali lattice, so those panels are drawn as grids, not as solids.
//   4 site — harbour, no sky. The plinth steps straight down into the water; the water is ruled
//     verdigris that thins into bare paper.
// counts drawn: 1 great pointed arch · 2 lower halls, 1 arched opening each · 4 corner turrets
//   (3 visible, the fourth hidden) with domed finials · 1 shallow central dome with 7 ribs ·
//   7 jali panels · 4 plinth steps · 6 bollards · 7 boats · 8 visitors · 5 pigeons ·
//   the Taj: 1 red dome, 1 corner cupola, 5 storeys of windows.
// layering: paper flecks, the Taj behind, the shaded right flank and the rear turret, the dome, the
//   front face and the two halls, the corner turrets standing proud of it, the arch voids and
//   jalis, cornices, plinth and steps, the harbour, boats and figures, then the last darks and one
//   gilt finial.
const PALETTE = [
  "#efe6d2", // paper — warm cream sheet
  "#ccb185", // basalt — yellow Kharodi stone, greyed ochre
  "#2f3a44", // ink — slate-navy line and shadow plate
  "#5d7f88", // harbour — verdigris water and distant stone
  "#d9cfb6", // stone — the pale plate: steps, jali panels, cabins
  "#a8452c", // brick — the Taj's red dome
  "#c9a24a", // gilt — the dome finial, the one warm accent
];
const BASE = 582; // plinth top / where the monument meets the steps
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 / opening slot
const slot = (x, y, w, h) => plate(box(x, y, w, h), PALETTE[2], 1.1, 1.5, 90, 0.2);

// a two-centre POINTED arch: radius R struck from centres offset ±d from the axis, so the two
// arcs meet at a point. rise > rx or the arch is round — which the Gateway's is not.
const archPts = (cx, rx, ySpring, rise, yFoot, n) => {
  const d = (rise * rise - rx * rx) / (2 * rx);
  const R = rx + d;
  const pts = [[cx - rx, yFoot]];
  for (let i = 0; i <= n; i++) {
    const x = cx - rx + (rx * i) / n;
    const dx = x - (cx + d);
    pts.push([x, ySpring - Math.sqrt(Math.max(0, R * R - dx * dx))]);
  }
  for (let i = 1; i <= n; i++) {
    const x = cx + (rx * i) / n;
    const dx = x - (cx - d);
    pts.push([x, ySpring - Math.sqrt(Math.max(0, R * R - dx * dx))]);
  }
  pts.push([cx + rx, yFoot]);
  return pts;
};
// rule the curve of an arch as a chain of short ink segments
const archLine = (pts, w, name, col) => {
  for (let i = 2; i < pts.length - 1; i++) {
    ink(pts[i - 1][0], pts[i - 1][1], pts[i][0], pts[i][1], w, name, col);
  }
};
// a shallow saucer dome sitting on a parapet: apex at `top`, springing at top + ry
const saucer = (cx, top, rx, ry) => {
  const pts = [];
  for (let i = 0; i <= 18; i++) {
    const a = Math.PI + (i / 18) * Math.PI;
    pts.push([cx + Math.cos(a) * rx, top + ry + Math.sin(a) * ry]);
  }
  pts.push([cx + rx, top + ry + 5], [cx - rx, top + ry + 5]);
  return pts;
};
// pierced stone: a fine cross-hatched pen grid inside a panel
const jali = (x, y, w, h, s, col, wt) => {
  const nx = Math.max(2, Math.round(w / s));
  const ny = Math.max(2, Math.round(h / s));
  for (let i = 1; i < nx; i++) {
    const px = x + (i * w) / nx;
    ink(px, y + 0.6, px + g(0, 0.3, -0.7, 0.7), y + h - 0.6, wt, "pen", col);
  }
  for (let j = 1; j < ny; j++) {
    const py = y + (j * h) / ny;
    ink(x + 0.6, py, x + w - 0.6, py + g(0, 0.3, -0.7, 0.7), wt, "pen", col);
  }
};

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" : "#c8bca0");
  }

  // 1 — the back plane: the Taj Mahal Palace, set back to the left, pale with distance, its right
  //     end cut off by the Gateway's left hall. Only its dome carries colour.
  const TX = 172, TR = 298, TTOP = 486;
  halfPlate(box(TX, TTOP, TR - TX, BASE - TTOP), PALETTE[4], 1.15, 2.6, 66);
  halfPlate(box(TX + 2, TTOP + 4, TR - TX - 4, BASE - TTOP - 4), PALETTE[1], 1.0, 3.6, 30);
  halfPlate(box(TX, TTOP + 5, TR - TX, BASE - TTOP - 5), PALETTE[3], 0.85, 4.4, 40); // distance, not colour
  fadePlate(box(TX, TTOP + 1, TR - TX, 10), PALETTE[2], 0.85, 3.6, 0, 0.6);
  ink(TX - 4, TTOP, TR, TTOP, 1.1);
  ink(TX, TTOP + 47, TR, TTOP + 47, 0.7, "pen"); // one string course, no more
  // five storeys of small arched windows — the hotel's counted fabric, kept small so it stays far
  for (let s = 0; s < 4; s++) {
    const y = TTOP + 12 + s * 22;
    for (let i = 0; i < 6; i++) {
      const x = TX + 10 + i * 19;
      if (x > TR - 9) continue;
      plate(box(x + g(0, 0.35, -0.9, 0.9), y, 2.8, 8), PALETTE[2], 1.0, 2.0, 90, 0.25);
    }
  }
  // the red Florentine dome — the hotel's one unmistakable mark
  const TDX = 230, TDTOP = 446;
  halfPlate(saucer(TDX, TDTOP, 27, 36), PALETTE[5], 1.25, 2.1, 58);
  plate(shift(saucer(TDX, TDTOP, 27, 36).slice(11, 19), 1.5, 1), PALETTE[2], 0.95, 3.6, 62, 0.3);
  for (let i = 0; i < 5; i++) {
    const a = Math.PI + ((i + 1) / 6) * Math.PI;
    ink(TDX, TDTOP + 3, TDX + Math.cos(a) * 26, TDTOP + 36 + Math.sin(a) * 35, 0.65, "pen");
  }
  ink(TDX - 28, TDTOP + 36, TDX + 28, TDTOP + 36, 1.0);
  ink(TDX, TDTOP + 1, TDX, TDTOP - 9, 1.5, "charcoal");
  // one corner cupola on the hotel's roofline, at its far end
  halfPlate(saucer(182, 468, 8, 17), PALETTE[5], 1.05, 2.1, 50);
  ink(182, 467, 182, 459, 1.3, "charcoal");
  // the low roofline of the Bunder sheds beyond — one ruled line, nothing more
  ink(152, 540, 172, 540, 0.8, "pen");

  // 2 — the Gateway's right flank, turning away from us and running back into shade
  const FL = 292, FR = 584, RB = 650; // front-left, front-right (the near corner), back-right
  const flank = [[FR, 454], [RB, 468], [RB, 574], [FR, BASE]];
  plate(flank, PALETTE[1], 1.35, 2.9, 96, 0.3);
  plate(shift(flank, 1.5, 1), PALETTE[2], 1.05, 4.0, 100, 0.3); // open stripes: shade, not mud
  fadePlate([[FR, 454], [RB, 468], [RB, 482], [FR, 470]], PALETTE[2], 0.9, 3.4, 0, 0.6);
  for (let i = 0; i < 3; i++) slot(FR + 14 + i * 19, 500 + i * 4, 4.5, 18); // slit windows on the flank
  ink(FR, 454, RB, 468, 1.2);
  ink(RB, 468, RB, 574, 1.0);
  // the rear turret peeking over the flank — the fourth corner, half-seen
  const RTX = 628;
  halfPlate(box(RTX - 14, 382, 28, 78), PALETTE[1], 1.15, 2.4, 82);
  plate(box(RTX + 3, 382, 11, 78), PALETTE[2], 1.0, 3.4, 92, 0.3);
  halfPlate(saucer(RTX, 362, 14, 20), PALETTE[1], 1.25, 1.9, 66);
  plate(shift(saucer(RTX, 362, 14, 20).slice(11, 19), 1, 1), PALETTE[2], 1.0, 3.4, 70, 0.3);
  ink(RTX, 361, RTX, 352, 1.2, "charcoal");
  ink(RTX - 16, 382, RTX + 16, 382, 1.1);
  ink(RTX - 14, 396, RTX + 14, 396, 0.75, "pen");
  for (let i = 0; i < 2; i++) slot(RTX - 3, 412 + i * 26, 3.0, 10);
  ink(RTX - 14, 382, RTX - 14, 466, 0.9);

  // 3 — the shallow central dome, 15 m across, rising behind the parapet: lit left, shaded right
  const DX = 444, DTOP = 344, DRX = 60, DRY = 44;
  const dome = saucer(DX, DTOP, DRX, DRY);
  halfPlate(dome, PALETTE[1], 1.35, 2.1, 72);
  plate(dome.slice(11, 19).concat([[DX + 8, DTOP + DRY]]), PALETTE[1], 1.45, 2.2, 104, 0.3);
  plate(shift(dome.slice(12, 19).concat([[DX + 18, DTOP + DRY]]), 1.5, 1), PALETTE[2], 1.1, 3.2, 108, 0.3);
  for (let i = 0; i < 7; i++) {
    const a = Math.PI + ((i + 1) / 8) * Math.PI;
    ink(DX, DTOP + 3, DX + Math.cos(a) * (DRX - 2), DTOP + DRY + Math.sin(a) * (DRY - 2), 0.7, "pen");
  }
  ink(DX - DRX - 3, DTOP + DRY, DX + DRX + 3, DTOP + DRY, 1.3); // the dome's stone ring

  // 4 — the front face: the central block, and the two lower halls flanking it
  const CBL = 348, CBR = 528, PAR = 388;
  const WPL = 456, WPR = 452; // the halls' parapets — the right one nearer, so it sits lower
  halfPlate(box(CBL, PAR, CBR - CBL, BASE - PAR), PALETTE[1], 1.35, 2.2, 76);
  plate(box(CBL, PAR, CBR - CBL, BASE - PAR), PALETTE[1], 1.2, 3.8, 88, 0.3); // second pass — warm and solid
  fadePlate(box(CBL, PAR + 2, CBR - CBL, 15), PALETTE[2], 1.0, 3.4, 0, 0.65); // shadow under the chhajja
  halfPlate(box(FL, WPL, CBL - FL, BASE - WPL), PALETTE[1], 1.3, 2.4, 70);
  halfPlate(box(CBR, WPR, FR - CBR, BASE - WPR), PALETTE[1], 1.35, 2.3, 68);
  plate(box(FR - 13, WPR + 2, 13, BASE - WPR - 2), PALETTE[1], 1.2, 3.4, 92, 0.3); // the near end turning
  fadePlate(box(FL, WPL + 1, CBL - FL, 10), PALETTE[2], 0.85, 3.6, 0, 0.6);
  fadePlate(box(CBR, WPR + 1, FR - CBR, 10), PALETTE[2], 0.85, 3.6, 0, 0.6);
  ink(FL - 4, WPL, CBL + 2, WPL, 1.3);
  ink(CBR - 2, WPR, FR + 3, WPR, 1.3);
  ink(CBL - 5, PAR, CBR + 5, PAR, 1.4); // the central chhajja
  ink(CBL - 5, PAR + 20, CBR + 5, PAR + 20, 0.8, "pen"); // the string course under it
  for (let i = 0; i < 29; i++) {
    const x = CBL + 3 + i * 6.15;
    ink(x, PAR - 7 + g(0, 0.4, -1, 1), x, PAR, 0.75, "pen");
  }
  for (let i = 0; i < 9; i++) ink(FL + 4 + i * 6.2, WPL - 5, FL + 4 + i * 6.2, WPL, 0.75, "pen");
  for (let i = 0; i < 9; i++) ink(CBR + 4 + i * 6.2, WPR - 5, CBR + 4 + i * 6.2, WPR, 0.75, "pen");

  // 5 — the four corner turrets: piers standing proud of the block, each capped by a small dome
  const turretAt = (cx, lean) => {
    halfPlate(box(cx - 12, 374, 24, BASE - 374), PALETTE[1], 1.3, 2.2, 80);
    plate(box(cx + 3, 374, 9, BASE - 374), PALETTE[1], 1.35, 2.6, 92, 0.3);
    plate(shift(box(cx + 6, 375, 6, BASE - 375), 1.5, 1), PALETTE[2], 1.0, 3.4, 94, 0.3);
    halfPlate(saucer(cx, 356, 12, 18), PALETTE[1], 1.3, 1.9, 64);
    plate(shift(saucer(cx, 356, 12, 18).slice(11, 19), 1, 1), PALETTE[2], 1.0, 3.4, 68, 0.3);
    ink(cx - 14, 374, cx + 14, 374, 1.2); // the cornice ring under the cap
    ink(cx - 12, 390, cx + 12, 390, 0.8, "pen");
    ink(cx - 12, 374, cx - 12, BASE, 1.0);
    ink(cx + 12, 374, cx + 12, BASE, 1.1);
    ink(cx + lean, 355, cx + lean, 346, 1.25, "charcoal"); // the finial
    for (let i = 0; i < 4; i++) slot(cx - 2.5, 410 + i * 36, 3.2, 11); // slit lights up the shaft
  };
  turretAt(CBL, 0);
  turretAt(CBR, 0.5);

  // 6 — the openings: one great POINTED arch, two hall arches, and the jali screens
  const GA = archPts(446, 40, 512, 72, BASE, 13);
  plate(GA, PALETTE[2], 1.5, 1.5, 90, 0.2);
  plate(GA, PALETTE[2], 1.3, 2.2, 22, 0.25); // a second pass so the hole is deep enough to walk through
  halfPlate(box(408, 468, 6, BASE - 468), PALETTE[4], 1.0, 2.4, 74); // the left inner reveal, seen from the right
  halfPlate(box(420, 556, 46, BASE - 556), PALETTE[3], 1.0, 3.0, 8); // daylight through the far side
  archLine(GA, 1.2);
  ink(406, 512, 406, BASE, 1.1); // the jambs
  ink(486, 512, 486, BASE, 1.1);
  ink(400, 512, 412, 512, 0.9, "pen"); // the imposts
  ink(480, 512, 492, 512, 0.9, "pen");
  // the two lower halls, each with its own arched opening: a jali screen over a dark hall
  const LA = archPts(318, 17, 528, 34, BASE, 9);
  plate(LA, PALETTE[2], 1.3, 2.0, 88, 0.25);
  jali(304, 500, 28, 24, 4.0, PALETTE[4], 0.8);
  archLine(LA, 1.0);
  const RA = archPts(552, 19, 524, 36, BASE, 9);
  plate(RA, PALETTE[2], 1.3, 2.0, 92, 0.25);
  jali(536, 496, 32, 24, 4.2, PALETTE[4], 0.8);
  archLine(RA, 1.0);
  // pierced stone: two tympana over the halls, two spandrels beside the great arch, one band above it
  const panel = (x, y, w, h, s) => {
    halfPlate(box(x, y, w, h), PALETTE[4], 1.15, 2.0, 58);
    jali(x, y, w, h, s, PALETTE[2], 0.75);
    ink(x - 1, y, x + w + 1, y, 0.8, "pen");
    ink(x - 1, y + h, x + w + 1, y + h, 0.8, "pen");
  };
  panel(300, 462, 40, 22, 3.5);
  panel(532, 458, 40, 22, 3.6);
  panel(364, 454, 32, 52, 3.6);
  panel(496, 454, 32, 52, 3.6);
  panel(358, 396, 176, 20, 4.4);
  // rosettes over the arch crown — small dark ticks, the last of the carved fabric
  for (let i = 0; i < 5; i++) ink(414 + i * 16, 428 + (i % 2) * 3, 417 + i * 16, 430 + (i % 2) * 3, 1.7, "charcoal");

  // 7 — the plinth: the quay to the left, four steps down to the water, and the bollards
  plate(box(158, BASE, 138, 7), PALETTE[4], 1.35, 1.4, 0, 0.2);
  fadePlate(box(158, BASE + 7, 138, 12), PALETTE[2], 1.0, 3.4, 0, 0.7);
  ink(152, BASE + 7, 296, BASE + 7, 1.2);
  const steps = [[288, 664, 0], [296, 656, 5], [304, 648, 10], [312, 640, 15]];
  for (let i = 0; i < steps.length; i++) {
    const s = steps[i];
    plate(box(s[0], BASE + s[2], s[1] - s[0], 5), PALETTE[4], 1.4, 1.35, 0, 0.2);
    ink(s[0] - 2, BASE + s[2] + 5, s[1] + 2, BASE + s[2] + 5, i === 3 ? 1.4 : 1.0, "rotring");
  }
  const bollards = [316, 356, 402, 466, 524, 572];
  for (let i = 0; i < bollards.length; i++) {
    ink(bollards[i], BASE, bollards[i] + g(0, 0.5, -1, 1), BASE - 6, 2.6, "charcoal");
  }

  // 8 — the harbour: a verdigris plate that thins downward, ruled dashes, the monument's reflection
  fadePlate([[152, BASE + 26], [664, BASE + 26], [672, BASE + 50], [146, BASE + 50]], PALETTE[3], 1.15, 4.0, 0, 0.8);
  brush.noStroke(); brush.noFill();
  brush.hatchStyle("cpencil", PALETTE[3], 1.15);
  brush.hatch(4.8, 0, { rand: 0.14, continuous: false, gradient: 0.62 });
  brush.polygon([[196, BASE + 26], [640, BASE + 26], [648, BASE + 42], [188, BASE + 42]]);
  brush.noHatch();
  for (let i = 0; i < 44; i++) {
    const y = BASE + 25 + i * 1.22 + g(0, 0.6, -1.2, 1.2);
    const x0 = 148 + random(0, 360);
    const len = constrain(randomGaussian(104, 70), 14, 340);
    if (x0 + len > 694) continue;
    ink(x0, y, x0 + len, y, g(1.1, 0.28, 0.6, 1.7), random() < 0.65 ? "2B" : "cpencil",
      random() < 0.78 ? PALETTE[3] : PALETTE[2]);
  }
  for (let i = 0; i < 14; i++) {
    const y = BASE + 26 + i * 1.7;
    ink(372 + g(3, 3, -3, 9), y, 524 - g(3, 3, -3, 9), y, g(1.15, 0.25, 0.7, 1.6), "2B", PALETTE[1]);
  }

  // 9 — the traffic: seven ferries and launches crowded on the steps, visitors, pigeons
  const boats = [[182, 626, 34, 12], [246, 610, 22, 8], [310, 636, 30, 11], [376, 614, 25, 9],
    [450, 632, 33, 12], [532, 608, 24, 9], [596, 624, 27, 10]];
  for (let i = 0; i < boats.length; i++) {
    const bx = boats[i][0], by = boats[i][1], bw = boats[i][2], ch = boats[i][3];
    ink(bx, by, bx + bw, by + g(0, 0.5, -1.2, 1.2), g(2.8, 0.3, 2.3, 3.3), "charcoal"); // the hull
    ink(bx + bw, by, bx + bw + 4, by - 4, 1.5, "charcoal"); // the bow nick
    ink(bx - 2, by, bx + 1, by - 3, 1.2, "charcoal");
    ink(bx + bw * 0.24, by - 4, bx + bw * 0.74, by - 4, g(2.0, 0.2, 1.6, 2.4), "charcoal", PALETTE[4]); // the cabin
    if (i % 3 === 0) ink(bx + bw * 0.5, by - 6, bx + bw * 0.5 + g(0, 0.6, -1.2, 1.2), by - ch - 5, 1.3, "charcoal");
  }
  const folk = [250, 288, 336, 372, 420, 458, 502, 550];
  for (let i = 0; i < folk.length; i++) {
    const h = g(8.6, 0.9, 7, 10.2);
    ink(folk[i], BASE - 1, folk[i] + g(0, 0.6, -1.2, 1.2), BASE - 1 - h, g(1.8, 0.15, 1.5, 2.1), "charcoal");
  }
  const birds = [[336, 380], [388, 364], [572, 376], [282, 574], [418, 576]];
  for (let i = 0; i < birds.length; i++) {
    ink(birds[i][0], birds[i][1], birds[i][0] + 2.6, birds[i][1] + g(0, 0.7, -1.4, 1.4), 1.1, "pen");
  }

  // 10 — last darks: the crisp ends of the masses, the shadow at the foot, one gilt finial
  ink(FL, WPL, FL, BASE, 1.1);
  ink(FR, 454, FR, BASE, 1.4); // the near corner — the crispest edge in the print
  ink(TX, TTOP, TX, BASE, 0.9);
  fadePlate(box(FL - 2, BASE - 15, FR - FL + 4, 15), PALETTE[2], 0.9, 4.2, 90, 0.8);
  ink(DX, DTOP + 1, DX, DTOP - 11, 2.1, "charcoal", PALETTE[6]);
  ink(DX - 3, DTOP - 7, DX + 3, DTOP - 7, 1.5, "charcoal", PALETTE[6]);
}