Venice

// composition: a letterpress vignette of the Molo seen from the lagoon — the Campanile di San Marco
// stands left of the vignette's centre, the Biblioteca Marciana to its left, the Doge's Palace to its
// right, San Marco's domes peeking between; the lagoon a ruled band below. The print sits in the
// lower-middle of the sheet, ~65% of the width; everything above and around it is bare paper.
// layering: paper flecks, the domes behind, the two waterfront blocks as pale half-plates, the
// campanile in brick plates (lit / shade), stone belfry, copper spire, then fine ink for cornices,
// arcades and windows, the lagoon plates and dashes, then the deepest slots and one gilt mark last.
const PALETTE = [
  "#efe6d2", // paper — warm cream sheet
  "#a8452c", // brick — the campanile shaft
  "#2f3a44", // ink — slate-navy line and shadow plate
  "#5d7f88", // lagoon — grey-green water and copper spire
  "#d9cfb6", // stone — Istrian limestone, the pale half-plate
  "#c9a58e", // rose — the palace's pink diaper wall
  "#c9a24a", // gilt — the angel, the one warm accent
];
const BASE = 600; // waterline / building base
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);

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 back plane: San Marco's five domes, only three visible over the palace roof
  const domeAt = (cx, top, r) => {
    const pts = [];
    for (let i = 0; i <= 14; i++) {
      const a = Math.PI + (i / 14) * Math.PI;
      pts.push([cx + Math.cos(a) * r, top + r + Math.sin(a) * r]);
    }
    pts.push([cx + r, top + r + 10], [cx - r, top + r + 10]);
    return pts;
  };
  halfPlate(domeAt(392, 500, 17), PALETTE[3], 1.1, 2.6, 40);
  halfPlate(domeAt(428, 488, 21), PALETTE[3], 1.1, 2.6, 50);
  halfPlate(domeAt(466, 502, 16), PALETTE[3], 1.1, 2.6, 35);
  plate([[428 - 21, 509], [428 + 21, 509], [428 + 21, 519], [428 - 21, 519]], PALETTE[2], 1.0, 3.6, 0, 0.3);
  ink(373, 517, 411, 517, 0.9); ink(405, 509, 451, 509, 1.0); ink(449, 518, 483, 518, 0.9);
  ink(392, 500, 392, 489, 0.9); ink(428, 488, 428, 474, 1.0); ink(466, 502, 466, 493, 0.9);
  // a low roofline of the Procuratie behind the Biblioteca
  ink(150, 522, 296, 522, 0.8, "pen");

  // 2 — left block: the Biblioteca Marciana — a long two-storey arcaded stone facade
  const LX = 150, LW = 148, LTOP = 512;
  halfPlate(box(LX, LTOP, LW, BASE - LTOP), PALETTE[4], 1.3, 2.2, 65);
  fadePlate(box(LX, LTOP + 2, LW, 16), PALETTE[2], 1.0, 3.4, 0, 0.65); // shadow under the cornice
  ink(LX - 4, LTOP, LX + LW + 3, LTOP, 1.3); // cornice
  ink(LX, LTOP + 40, LX + LW, LTOP + 40, 0.9); // string course
  ink(LX, BASE - 30, LX + LW, BASE - 30, 0.9); // arcade impost
  for (let i = 0; i < 11; i++) {
    const x = LX + 7 + i * 13;
    slot(x + g(0, 0.4, -1, 1), LTOP + 46, 6.5, 22); // upper arched windows
    ink(x + 3.5, LTOP + 20, x + 3.5, LTOP + 40, 0.7, "pen"); // the pilaster between
  }
  for (let i = 0; i < 11; i++) {
    const x = LX + 6 + i * 13;
    slot(x + g(0, 0.4, -1, 1), BASE - 27, 8.5, 27); // ground arcade
  }
  for (let i = 0; i < 30; i++) ink(LX + 2 + i * 4.9, LTOP - 6, LX + 2 + i * 4.9, LTOP, 0.75, "pen"); // balustrade
  // a small statue on the balustrade every so often
  for (let i = 0; i < 5; i++) ink(LX + 12 + i * 32, LTOP - 6, LX + 12 + i * 32, LTOP - 13, 1.2, "charcoal");
  // far left: the Giardini's low wall and a tree mass
  halfPlate(box(112, 552, 38, BASE - 552), PALETTE[4], 1.1, 2.4, 70);
  ink(110, 552, 152, 552, 1.0);
  for (let i = 0; i < 3; i++) slot(118 + i * 11, 562, 5, 12);
  const tree = [];
  for (let i = 0; i < 12; i++) {
    const a = (i / 12) * Math.PI * 2;
    const rr = 22 * (0.7 + noise(i * 0.9 + 3) * 0.6);
    tree.push([132 + Math.cos(a) * rr, 536 + Math.sin(a) * rr * 0.8]);
  }
  halfPlate(tree, PALETTE[3], 1.3, 2.4, 30);
  plate(shift(tree.slice(4, 10).concat([[132, 536]]), 2, 2), PALETTE[2], 1.2, 3.4, 40, 0.35);

  // 3 — the Campanile — the brick shaft, lit face left, shade face right
  const CX = 300, CW = 34, SHAFT_TOP = 432;
  const litFace = box(CX, SHAFT_TOP, 20, BASE - SHAFT_TOP);
  const shadeFace = box(CX + 20, SHAFT_TOP, CW - 20, BASE - SHAFT_TOP);
  halfPlate(litFace, PALETTE[1], 1.35, 2.2, 78);
  plate(litFace, PALETTE[1], 1.2, 3.8, 90, 0.3); // a thin second pass so the brick reads warm and solid
  plate(shadeFace, PALETTE[1], 1.5, 2.2, 90, 0.3);
  plate(shift(shadeFace, 1.5, 1), PALETTE[2], 1.15, 3.0, 92, 0.3); // ink over the shade face
  // pilaster strips (lesenes) — the vertical ribs on the lit face, and the tiny slit windows
  ink(CX + 6.5, SHAFT_TOP + 4, CX + 6.5, BASE - 2, 0.7, "pen");
  ink(CX + 13.5, SHAFT_TOP + 4, CX + 13.5, BASE - 2, 0.7, "pen");
  for (let i = 0; i < 6; i++) slot(CX + 9, SHAFT_TOP + 14 + i * 26, 2.4, 7);
  // the belfry: white stone arcade, four arches per face, on a stone ring
  const BELF_Y = 400, BELF_H = 32;
  plate(box(CX - 3, BELF_Y + BELF_H, CW + 6, 4), PALETTE[2], 1.1, 1.6, 0, 0.2); // the ring
  halfPlate(box(CX - 2, BELF_Y, 22, BELF_H), PALETTE[4], 1.2, 2.0, 70);
  halfPlate(box(CX + 20, BELF_Y, CW - 18, BELF_H), PALETTE[4], 1.2, 2.0, 70);
  fadePlate(box(CX + 21, BELF_Y + 1, CW - 18, BELF_H), PALETTE[2], 1.0, 3.2, 90, 0.5);
  for (let i = 0; i < 4; i++) slot(CX + 1 + i * 5.4, BELF_Y + 6, 3.6, 20);
  for (let i = 0; i < 2; i++) slot(CX + 22 + i * 6, BELF_Y + 7, 3.2, 19);
  // the attic (dado) — brick again with the pale relief panel; stone cornices above and below
  const ATT_Y = 376;
  plate(box(CX - 2, ATT_Y, 22, BELF_Y - ATT_Y), PALETTE[1], 1.4, 2.2, 90, 0.3);
  plate(box(CX + 20, ATT_Y, CW - 18, BELF_Y - ATT_Y), PALETTE[2], 1.3, 2.2, 90, 0.3);
  halfPlate(box(CX + 4, ATT_Y + 5, 12, 13), PALETTE[4], 1.0, 1.8, 60); // the lion relief
  ink(CX - 4, BELF_Y, CX + CW + 4, BELF_Y, 1.4); // belfry cornice
  ink(CX - 4, ATT_Y, CX + CW + 4, ATT_Y, 1.4); // attic cornice
  // the spire: a copper-green pyramid, lit and shade halves, the gilt angel on top
  const APEX = [CX + CW / 2, 312];
  halfPlate([[CX - 3, ATT_Y], [APEX[0], ATT_Y], APEX], PALETTE[3], 1.2, 2.0, 75);
  plate([[APEX[0], ATT_Y], [CX + CW + 3, ATT_Y], APEX], PALETTE[3], 1.4, 2.0, 100, 0.3);
  plate([[APEX[0] + 1, ATT_Y + 1], [CX + CW + 4, ATT_Y + 1], [APEX[0] + 1, 313]], PALETTE[2], 1.0, 3.4, 105, 0.3);
  ink(CX - 3, ATT_Y, APEX[0], APEX[1], 0.9);
  ink(CX + CW + 3, ATT_Y, APEX[0], APEX[1], 0.9);
  // the angel — a small gilt mark, the only warm accent
  ink(APEX[0], APEX[1] - 1, APEX[0], APEX[1] - 11, 2.4, "charcoal", PALETTE[6]);
  ink(APEX[0] - 4, APEX[1] - 7, APEX[0] + 4, APEX[1] - 7, 1.7, "charcoal", PALETTE[6]);

  // 4 — right block: the Doge's Palace — a tall diapered upper wall over the loggia and arcade
  const PX = 346, PW = 312, PTOP = 524;
  halfPlate(box(PX, PTOP, PW, BASE - PTOP), PALETTE[4], 1.3, 2.3, 62);
  halfPlate(box(PX, PTOP + 4, PW, 34), PALETTE[5], 1.2, 2.4, 45); // the rose diaper wall
  fadePlate(box(PX, PTOP + 1, PW, 10), PALETTE[2], 0.9, 3.4, 0, 0.65); // eave shadow
  ink(PX - 3, PTOP, PX + PW + 3, PTOP, 1.3); // eave
  ink(PX, PTOP + 40, PX + PW, PTOP + 40, 1.0); // loggia balustrade line
  ink(PX, BASE - 24, PX + PW, BASE - 24, 0.9); // arcade impost
  for (let i = 0; i < 52; i++) ink(PX + 2 + i * 6, PTOP - 6, PX + 2 + i * 6, PTOP, 0.75, "pen"); // merlons
  // upper wall: seven large gothic windows, unevenly spaced as they are, one balcony window taller
  const winX = [PX + 30, PX + 74, PX + 118, PX + 150, PX + 196, PX + 240, PX + 280];
  for (let i = 0; i < winX.length; i++) slot(winX[i], PTOP + 12, 7, i === 3 ? 24 : 18);
  // the loggia — a dense run of narrow pointed openings with quatrefoils above
  for (let i = 0; i < 48; i++) {
    const x = PX + 3 + i * 6.45;
    slot(x + g(0, 0.3, -0.8, 0.8), PTOP + 46, 3.4, 26);
  }
  for (let i = 0; i < 24; i++) ink(PX + 6 + i * 12.9, PTOP + 43, PX + 6 + i * 12.9, PTOP + 45, 1.6, "charcoal");
  // the ground arcade — wide pointed arches, half as many
  for (let i = 0; i < 24; i++) {
    const x = PX + 3 + i * 12.9;
    slot(x + g(0, 0.4, -1, 1), BASE - 22, 8, 22);
  }
  // the palace's far end turning away into shade
  plate(box(PX + PW, PTOP + 2, 10, BASE - PTOP - 2), PALETTE[2], 1.0, 3.4, 90, 0.3);
  // the quay — a thin stone lip along the whole Molo, two small figures on it
  plate(box(108, BASE - 1, 566, 4), PALETTE[4], 1.1, 1.6, 0, 0.2);
  ink(106, BASE + 3, 676, BASE + 3, 1.3);
  ink(232, BASE - 1, 232, BASE - 8, 1.6, "charcoal"); ink(236, BASE - 1, 236, BASE - 7, 1.4, "charcoal");
  ink(521, BASE - 1, 521, BASE - 8, 1.6, "charcoal");

  // 5 — the lagoon: a ruled plate that thins downward, broken dashes, the reflection, the bricole
  fadePlate([[92, BASE + 5], [690, BASE + 5], [704, BASE + 40], [78, BASE + 40]], PALETTE[3], 1.2, 3.8, 0, 0.75);
  brush.hatchStyle("cpencil", PALETTE[3], 1.3);
  brush.noStroke(); brush.noFill();
  brush.hatch(4.2, 0, { rand: 0.12, continuous: false, gradient: 0.5 });
  brush.polygon([[120, BASE + 5], [670, BASE + 5], [676, BASE + 26], [114, BASE + 26]]);
  brush.noHatch();
  for (let i = 0; i < 54; i++) {
    const y = BASE + 7 + i * 1.5 + g(0, 0.5, -1, 1);
    const x0 = 70 + random(0, 420);
    const len = constrain(randomGaussian(130, 70), 18, 400);
    if (x0 + len > 740) continue;
    ink(x0, y, x0 + len, y, g(1.25, 0.3, 0.7, 1.9), random() < 0.65 ? "2B" : "cpencil", random() < 0.8 ? PALETTE[3] : PALETTE[2]);
  }
  for (let i = 0; i < 16; i++) {
    const y = BASE + 6 + i * 2.6;
    ink(CX + g(2, 2, -2, 6), y, CX + CW - g(2, 2, -2, 6), y, g(1.2, 0.25, 0.7, 1.7), "2B", PALETTE[1]);
  }
  const posts = [[124, 11], [176, 9], [262, 10], [452, 8], [560, 11], [636, 9], [668, 7]];
  for (let i = 0; i < posts.length; i++) {
    const x = posts[i][0], h = posts[i][1];
    ink(x, BASE + 4, x + g(0, 0.7, -1.4, 1.4), BASE + 4 - h, 1.7, "charcoal");
  }
  // a single gondola low on the right, black, its ferro a nick of ink
  ink(590, BASE + 22, 626, BASE + 22, 2.6, "charcoal");
  ink(626, BASE + 22, 631, BASE + 17, 1.4, "charcoal");
  ink(588, BASE + 22, 585, BASE + 18, 1.2, "charcoal");

  // 6 — last darks: crisp ends on the two stone masses, the deep shadow at the foot of the campanile
  ink(LX, LTOP, LX, BASE, 1.0); ink(LX + LW, LTOP, LX + LW, BASE, 0.9);
  ink(PX, PTOP, PX, BASE, 0.9); ink(PX + PW + 10, PTOP + 2, PX + PW + 10, BASE, 1.1);
  fadePlate(box(CX - 1, BASE - 34, CW + 2, 34), PALETTE[2], 1.1, 3.0, 90, 0.7);
  ink(CX - 1, SHAFT_TOP, CX - 1, BASE, 1.1);
  ink(CX + CW + 1, SHAFT_TOP, CX + CW + 1, BASE, 1.4);
}