Amsterdam

// viewpoint: the Damrak canal front seen square-on from the opposite quay — thirteen narrow gabled
// fronts standing shoulder to shoulder on one stone lip, the water immediately below, nothing behind.
// four facts: (1) proportion — an Amsterdam canal house is a NARROW plot: 30–48px wide against an
// eave 115–170px above the quay, i.e. 1:3 to 1:4, and neighbours differ by up to 55px of eave so the
// roofline dances; (2) ordering/overlap — party walls are shared, the row is continuous with no gaps
// and no setback, and it stands directly on the quay with the canal at its foot; (3) material — red
// brick with darker shaded fronts, two painted near-black green, one whitewashed in stone, timber
// sash windows set deep so the reveal shows as one lit edge, stone-coped gables, a timber hoist beam
// at every peak; (4) site — a working canal front: quay lip, moored boats, bicycles, a few figures.
// counts: 13 houses (widths 30–48 in a 540px run); gables — 4 step (3–4 real steps), 4 neck (narrow
// neck + pediment), 3 bell (concave-convex), 1 spout, 1 cornice, no two neighbours alike; 13 hoist
// beams; 3–5 storeys per house, 2 to 4 sash bays per storey on a rhythm counted per plot, ground
// floor taller with a door; 4 houses leaning 1–2°; 2 boats, 2 bicycles, 3 figures.
// the row's value range, counted: 4 plain brick fronts, 4 taken deeper under an oxblood over-plate,
// 2 painted near-black green, 2 limewashed to a light sand-brick, 1 whitewashed stone — and no two
// neighbours share a tone, so the range steps across the row rather than pooling at one end.
// layering: paper flecks, quay lip, wall plates (brick half + brick plate, ink over-plate on the
// three shaded fronts, ink-green on two, stone on one), the ink fade darkening every lower storey,
// gable polygons with an ink roof plane on the shade half, rotring roofline, cornices and seams,
// sash slots with a single stone reveal line, hoist beams, then the canal: verdigris fade, dashes,
// broken reflections, boats, and the quay hardware last.
const PALETTE = [
  "#efe6d2", // paper — warm cream sheet
  "#a8452c", // brick — the row's base red
  "#2f3a44", // ink — slate-navy line, sash voids, last darks
  "#5d7f88", // verdigris — the canal
  "#8b3a2f", // oxblood — the darker brick on the shaded fronts
  "#3c4a3a", // ink-green — the two painted-dark houses
  "#d9cfb6", // stone — coping, quay lip, the whitewashed house, window reveals
  "#c9a24a", // gilt — the one warm accent, a single hoist wheel
];

const FOOT = 596; // quay level: every house stands on it, the canal begins at it
const RUN_X0 = 130; // the row runs 130 → 670: 540px, 67% of the sheet

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 — 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 / door opening
const slot = (x, y, w, h) => plate(box(x, y, w, h), PALETTE[2], 0.95, 1.8, 90, 0.2);
// a sash window: the dark void, one thin stone reveal line down its lit side, and — where the front
// carries painted frames — a 1px paper gap holding the slot off the brick. No fat white outline.
const sash = (x, y, w, h, gap) => {
  if (gap) plate(box(x - 0.7, y - 0.7, w + 1.4, h + 1.4), PALETTE[0], 0.65, 2.3, 90, 0.15);
  slot(x, y, w, h);
  ink(x - 0.9, y + 0.6, x - 0.9, y + h - 0.6, 0.7, "pen", PALETTE[6]);
};
// a bicycle wheel: four short pen ticks around a 3px circle — never a drawn disc
const wheelTick = (cx, cy, r, col) => {
  const k = r * 0.72;
  ink(cx - r, cy, cx - k, cy - k, 0.7, "pen", col);
  ink(cx - k, cy - k, cx + k, cy - k, 0.7, "pen", col);
  ink(cx + k, cy - k, cx + r, cy, 0.7, "pen", col);
  ink(cx - r, cy, cx + r, cy, 0.7, "pen", col);
};

// --- gable silhouettes: closed polygons running [x0, ey] → up over the apex → [x1, ey] ---
// trapgevel: 3–4 real right-angled steps a side, rising to a small coped top block with a pediment
const stepGable = (x0, x1, ey, h, n) => {
  const cx = (x0 + x1) / 2, tw = (x1 - x0) * 0.22;
  const pts = [[x0, ey]];
  for (let i = 1; i <= n; i++) {
    const y = ey - (h * 0.82 * i) / n;
    const xa = lerp(x0, cx - tw, (i - 1) / n), xb = lerp(x0, cx - tw, i / n);
    pts.push([xa, y + g(0, 0.5, -1, 1)], [xb + g(0, 0.5, -1, 1), y]);
  }
  pts.push([cx - tw, ey - h * 0.82], [cx, ey - h], [cx + tw, ey - h * 0.82]);
  for (let i = n; i >= 1; i--) {
    const y = ey - (h * 0.82 * i) / n;
    const xa = lerp(x1, cx + tw, i / n), xb = lerp(x1, cx + tw, (i - 1) / n);
    pts.push([xa + g(0, 0.5, -1, 1), y], [xb, y + g(0, 0.5, -1, 1)]);
  }
  pts.push([x1, ey]);
  return pts;
};
// halsgevel: full width to the shoulder, then a NARROW neck straight up to a small pediment
const neckGable = (x0, x1, ey, h) => {
  const cx = (x0 + x1) / 2, hw = (x1 - x0) / 2, nw = hw * 0.36;
  return [
    [x0, ey], [x0, ey - h * 0.24], [cx - hw * 0.9, ey - h * 0.3],
    [cx - nw * 1.5, ey - h * 0.33], [cx - nw, ey - h * 0.42],
    [cx - nw, ey - h * 0.8], [cx - nw * 1.22, ey - h * 0.8], [cx, ey - h], [cx + nw * 1.22, ey - h * 0.8], [cx + nw, ey - h * 0.8],
    [cx + nw, ey - h * 0.42], [cx + nw * 1.5, ey - h * 0.33],
    [cx + hw * 0.9, ey - h * 0.3], [x1, ey - h * 0.24], [x1, ey],
  ];
};
// klokgevel: the sides curve IN (concave) off the shoulder, then flatten OUT (convex) to a flat cap
const bellGable = (x0, x1, ey, h) => {
  const cx = (x0 + x1) / 2, hw = (x1 - x0) / 2;
  const prof = [[0, 1], [0.1, 1.0], [0.24, 0.9], [0.4, 0.72], [0.56, 0.6], [0.72, 0.53], [0.86, 0.5]];
  const pts = [];
  for (let i = 0; i < prof.length; i++) pts.push([cx - hw * prof[i][1], ey - h * prof[i][0] + g(0, 0.6, -1.2, 1.2)]);
  pts.push([cx - hw * 0.5, ey - h * 0.93], [cx - hw * 0.26, ey - h], [cx + hw * 0.26, ey - h], [cx + hw * 0.5, ey - h * 0.93]);
  for (let i = prof.length - 1; i >= 0; i--) pts.push([cx + hw * prof[i][1], ey - h * prof[i][0] + g(0, 0.6, -1.2, 1.2)]);
  return pts;
};
// tuitgevel: a plain raked gable ending in a narrow chimney-like spout
const spoutGable = (x0, x1, ey, h) => {
  const cx = (x0 + x1) / 2;
  return [
    [x0, ey], [x0, ey - h * 0.12], [cx - 3.2, ey - h * 0.82], [cx - 3.2, ey - h],
    [cx + 3.2, ey - h], [cx + 3.2, ey - h * 0.82], [x1, ey - h * 0.12], [x1, ey],
  ];
};
// lijstgevel: no gable at all — a horizontal cornice with a shallow crown over it
const corniceGable = (x0, x1, ey, h) => [
  [x0 - 2, ey], [x0 - 2, ey - h * 0.55], [x0 + 3, ey - h], [x1 - 3, ey - h], [x1 + 2, ey - h * 0.55], [x1 + 2, ey],
];
const gablePts = (kind, x0, x1, ey, h, n) =>
  kind === 0 ? stepGable(x0, x1, ey, h, n)
    : kind === 1 ? neckGable(x0, x1, ey, h)
      : kind === 2 ? bellGable(x0, x1, ey, h)
        : kind === 3 ? spoutGable(x0, x1, ey, h)
          : corniceGable(x0, x1, ey, h);

// the row, plot by plot. w, eaveH above the quay, gable kind (0 step 1 neck 2 bell 3 spout 4 cornice),
// gable height, step count, tone, lean in px at the eave.
// tone: 0 plain brick, 1 deep oxblood over-plate, 2 painted ink-green, 3 whitewashed stone,
// 4 limewashed sand-brick (a stone body with an open brick over-plate — lighter than plain brick).
const W = [44, 38, 47, 32, 42, 36, 48, 34, 45, 39, 46, 43, 46];
const EH = [148, 126, 163, 118, 141, 132, 170, 115, 152, 128, 158, 136, 145];
const KIND = [0, 2, 1, 0, 3, 1, 0, 2, 1, 4, 0, 2, 1];
const GH = [30, 27, 32, 27, 22, 30, 32, 25, 31, 12, 29, 28, 30];
const STEPS = [4, 0, 0, 3, 0, 0, 4, 0, 0, 0, 3, 0, 0];
const TONE = [1, 0, 2, 4, 0, 1, 0, 1, 4, 3, 0, 2, 1];
const LEAN = [0, 5, 0, 0, -4, 0, 0, 6, 0, 0, 0, -3.5, 0];
// the window rhythm is counted per plot, not derived from the width: bays a storey, the pier
// fraction that sets how tight they sit, and the sash aspect. No two fronts stamp the same block.
const BAYS = [3, 2, 3, 2, 3, 2, 4, 2, 3, 3, 3, 2, 3];
const PIER = [0.155, 0.185, 0.145, 0.19, 0.16, 0.175, 0.12, 0.2, 0.15, 0.135, 0.165, 0.21, 0.14];
const ASP = [2.2, 2.45, 2.1, 2.35, 2.25, 2.5, 2.0, 2.4, 2.15, 2.3, 2.2, 2.05, 2.35];
const FRAMED = [9, 11]; // the fronts whose sashes carry painted frames — a 1px paper gap
// each front's own ink, used for its plate cap and for the dashes that reflect it in the canal
const toneCol = (t) => (t === 1 ? PALETTE[4] : t === 2 ? PALETTE[5] : t === 3 || t === 4 ? PALETTE[6] : PALETTE[1]);

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[6]);
  }

  // 1 — set out the plots: party walls shared exactly, so the run is continuous
  const edge = [RUN_X0];
  for (let i = 0; i < W.length; i++) edge.push(edge[i] + W[i]);
  const row = [];
  for (let i = 0; i < W.length; i++) {
    const lean = LEAN[i] / EH[i]; // shear: x shifts by lean px per px of height above the quay
    row.push({
      i, x0: edge[i], x1: edge[i + 1], w: W[i], ey: FOOT - EH[i], eh: EH[i],
      kind: KIND[i], gh: GH[i], steps: STEPS[i], tone: TONE[i], lean,
      sx: (x, y) => x + (FOOT - y) * lean,
      warp: (pts) => pts.map((p) => [p[0] + (FOOT - p[1]) * lean, p[1]]),
      cols: BAYS[i], pier: PIER[i], asp: ASP[i],
      upper: constrain(Math.round((EH[i] - 46) / 34), 2, 4),
      framed: FRAMED.indexOf(i) >= 0,
    });
  }
  const RX0 = row[0].x0, RX1 = row[row.length - 1].x1;

  // 2 — the quay lip the whole row stands on
  plate(box(RX0 - 8, FOOT, RX1 - RX0 + 16, 3), PALETTE[6], 1.15, 1.5, 0, 0.2);
  ink(RX0 - 10, FOOT + 3.6, RX1 + 10, FOOT + 3.6, 1.4);

  // 3 — the fronts: wall plates, the lower-storey fade, gable, roofline, sashes, hoist beam
  for (const h of row) {
    const wall = h.warp(box(h.x0, h.ey, h.w, h.eh));
    const litW = h.w * 0.6;
    const lit = h.warp(box(h.x0, h.ey, litW, h.eh));
    const shade = h.warp(box(h.x0 + litW, h.ey, h.w - litW, h.eh));
    const ang = g(74, 5, 62, 84);

    if (h.tone === 3) {
      // the whitewashed front — stone plate, kept the palest thing in the row
      plate(wall, PALETTE[6], 1.4, 2.0, ang, 0.3);
      plate(shift(shade, 1.4, 1), PALETTE[2], 1.0, 3.6, ang + 16, 0.28);
    } else if (h.tone === 2) {
      // painted near-black green — a full plate, never a half-tone
      plate(wall, PALETTE[5], 1.45, 2.0, ang, 0.3);
      plate(shift(wall, 1.3, 1), PALETTE[2], 1.15, 3.2, ang + 18, 0.3);
    } else if (h.tone === 4) {
      // limewashed sand-brick — a stone body with the brick showing through in open stripes,
      // so the front sits a clear step lighter than its plain-brick neighbours
      plate(wall, PALETTE[6], 1.4, 2.1, ang - 8, 0.3);
      plate(shift(wall, 1, 0.6), PALETTE[1], 1.15, 4.3, ang + 22, 0.3);
      plate(shift(shade, 1.4, 1), PALETTE[4], 1.0, 4.8, ang + 32, 0.28);
    } else if (h.tone === 1) {
      // taken deeper: a brick body under a dense oxblood over-plate, ink turning the shade half.
      // These are the darkest reds in the row and they carry its weight.
      halfPlate(lit, PALETTE[1], 1.3, 2.3, ang + 6);
      plate(shade, PALETTE[1], 1.5, 2.2, ang - 4, 0.3);
      plate(shift(wall, 1, 0.6), PALETTE[4], 1.5, 1.9, ang + 16, 0.3); // near-solid oxblood: the depth is the colour, not ink
      plate(shift(shade, 1.5, 1), PALETTE[2], 1.05, 3.6, ang + 28, 0.28); // ink only where the front turns
    } else {
      // plain brick: lit half-plate, then a brick plate over the whole front — the row's base red
      halfPlate(lit, PALETTE[1], 1.35, 2.2, ang + 6);
      plate(shade, PALETTE[1], 1.5, 2.2, ang - 4, 0.3);
      plate(wall, PALETTE[1], 1.15, 4.6, 90, 0.3);
      plate(shift(shade, 1.5, 1), PALETTE[4], 1.05, 4.4, ang + 26, 0.28); // oxblood turning the right-hand jamb
    }

    // the lower storeys are darker than the upper — an ink fade rising off the quay
    fadePlate(h.warp(box(h.x0, FOOT - 58, h.w, 58)), PALETTE[2], 0.9, 5.4, 0, 0.7);
    fadePlate(h.warp(box(h.x0, h.ey + 1, h.w, 9)), PALETTE[2], 0.95, 3.4, 0, 0.6); // shadow under the eave

    // the gable, then the roof plane behind it as an ink plate on the shade half
    const cap = h.warp(gablePts(h.kind, h.x0, h.x1, h.ey, h.gh, h.steps));
    plate(cap, toneCol(h.tone), 1.4, 2.1, 88, 0.3);
    if (h.tone === 4) plate(shift(cap, 1, 0.6), PALETTE[1], 1.1, 4.3, 70, 0.3); // the brick through the limewash
    let apex = 0;
    for (let p = 0; p < cap.length; p++) if (cap[p][1] <= cap[apex][1]) apex = p;
    const roof = cap.slice(apex).concat([[h.sx((h.x0 + h.x1) / 2, h.ey), h.ey]]);
    plate(shift(roof, 1.2, 0.8), PALETTE[2], 1.0, 4.4, 96, 0.28);

    // rotring on the roofline ONLY — the crisp silhouette that makes the gable kind legible
    brush.noFill();
    brush.set("rotring", PALETTE[2], 1.4);
    brush.beginShape(h.kind === 2 ? 0.28 : 0);
    for (let p = 0; p < cap.length; p++) brush.vertex(cap[p][0] + g(0, 0.22, -0.5, 0.5), cap[p][1] + g(0, 0.2, -0.45, 0.45));
    brush.endShape(false);
    ink(h.sx(h.x0 - 2, h.ey), h.ey, h.sx(h.x1 + 2, h.ey), h.ey, 1.2); // the eave cornice

    // the hoist beam — a 4px charcoal tick at the peak, one gilt wheel in the whole row
    const ax = h.sx((h.x0 + h.x1) / 2, h.ey - h.gh), ay = h.ey - h.gh;
    ink(ax, ay + 0.5, ax + g(0, 0.4, -0.8, 0.8), ay - 4, 1.6, "charcoal");
    ink(ax - 1.6, ay - 3.6, ax + 1.6, ay - 3.6, 0.9, "charcoal");
    if (h.i === 6) ink(ax + 1.2, ay - 3.6, ax + 2.8, ay - 3.6, 1.5, "charcoal", PALETTE[7]);

    // 4 — the sashes: tall 1:1.8 voids, 2 or 3 a storey, ground floor taller with a door
    const pier = h.w * h.pier;
    const ww = constrain((h.w - (h.cols + 1) * pier) / h.cols, 5.0, 8.5);
    const wh = ww * h.asp;
    const gTop = FOOT - 34; // the taller ground storey
    const head = 13 + (h.i % 3) * 2.5; // how far the top storey sits under the eave — varies by plot
    for (let r = 0; r < h.upper; r++) {
      const y = lerp(h.ey + head, gTop - wh - 8, h.upper === 1 ? 0 : r / (h.upper - 1));
      const wr = wh * (r === h.upper - 1 ? 1 : 1 - r * 0.06); // upper storeys shorten, as they do
      for (let c = 0; c < h.cols; c++) {
        const bx = lerp(h.x0 + pier + ww / 2, h.x1 - pier - ww / 2, h.cols === 1 ? 0 : c / (h.cols - 1));
        sash(h.sx(bx + g(0, 0.35, -0.8, 0.8), y) - ww / 2, y, ww, wr, h.framed);
      }
    }
    // ground storey: a door on one jamb, shop lights beside it
    const dw = ww * 1.25, dh = 25;
    const dSide = h.i % 3 === 0 ? h.x0 + pier : h.x1 - pier - dw;
    slot(h.sx(dSide, FOOT - dh) , FOOT - dh, dw, dh);
    ink(h.sx(dSide - 0.9, FOOT - dh), FOOT - dh, h.sx(dSide - 0.9, FOOT - 1), FOOT - 1, 0.7, "pen", PALETTE[6]);
    for (let c = 0; c < h.cols - 1; c++) {
      const bx = h.i % 3 === 0 ? dSide + dw + pier + c * (ww + pier) : h.x0 + pier + c * (ww + pier);
      if (bx + ww > h.x1 - 2) continue;
      sash(h.sx(bx, FOOT - 20), FOOT - 20, ww, 17, h.framed);
    }
  }

  // 5 — the seams between plots: the shared party walls, ruled once each
  for (let i = 1; i < row.length; i++) {
    const b = row[i], top = Math.min(row[i - 1].ey, b.ey) - 3;
    ink(b.sx(b.x0, FOOT), FOOT, b.sx(b.x0, top), top, 0.8, "2B", PALETTE[2]);
  }

  // 6 — the canal: a verdigris fade a little wider than the row, opening downward, then dashes
  // spread far enough below it that the water thins into bare paper with no edge to stop on
  fadePlate([[110, FOOT + 4], [690, FOOT + 4], [704, FOOT + 42], [96, FOOT + 42]], PALETTE[3], 1.1, 3.8, 0, 0.75);
  for (let i = 0; i < 54; i++) {
    const t = i / 54; // how far down the water we are: everything thins with t
    const y = FOOT + 6 + i * 1.5 + g(0, 0.6, -1.2, 1.2);
    if (random() < t * 0.62) continue; // the dashes break up and let go of the paper
    const x0 = 126 + random(0, 340) + t * 40;
    const len = constrain(randomGaussian(160 - t * 80, 70), 16, 380);
    if (x0 + len > 674) continue;
    ink(x0, y, x0 + len, y, g(1.35 - t * 0.65, 0.28, 0.55, 1.9),
      random() < 0.62 ? "2B" : "cpencil", random() < 0.78 ? PALETTE[3] : PALETTE[2]);
  }

  // 7 — the row reflected: under each front a short column of broken dashes in that front's own
  // ink — brick under the brick houses, green and ink under the dark ones — never a mirror
  for (const h of row) {
    const rx = (h.x0 + h.x1) / 2;
    const col = toneCol(h.tone);
    for (let i = 0; i < 9; i++) {
      const t = i / 9;
      const y = FOOT + 6 + i * 2.7 + g(0, 0.55, -1.1, 1.1);
      if (random() < 0.1 + t * 0.45) continue;
      const half = h.w * (0.34 - t * 0.16);
      ink(rx + g(-half, 3, -h.w * 0.46, -1.5), y, rx + g(half, 3, 1.5, h.w * 0.46), y,
        g(1.75 - t * 0.95, 0.22, 0.55, 2.0), "2B", i < 2 ? PALETTE[2] : col);
    }
  }

  // 8 — two moored boats: a charcoal dash with a nick for the bow
  ink(212, FOOT + 31, 258, FOOT + 31, 2.6, "charcoal");
  ink(258, FOOT + 31, 263, FOOT + 26.5, 1.4, "charcoal");
  ink(211, FOOT + 31, 207, FOOT + 27.5, 1.2, "charcoal");
  ink(496, FOOT + 37, 548, FOOT + 37, 2.6, "charcoal");
  ink(548, FOOT + 37, 553, FOOT + 32.5, 1.4, "charcoal");
  ink(495, FOOT + 37, 491, FOOT + 33, 1.2, "charcoal");

  // 9 — quay hardware, last and small: two bicycles as pen ticks, three figures as charcoal ticks
  const bikes = [[286, FOOT - 4], [520, FOOT - 4]];
  for (let i = 0; i < bikes.length; i++) {
    const bx = bikes[i][0], by = bikes[i][1];
    wheelTick(bx - 6, by, 3, PALETTE[6]);
    wheelTick(bx + 6, by, 3, PALETTE[6]);
    ink(bx - 6, by - 3, bx + 4, by - 8, 0.7, "pen", PALETTE[6]);
    ink(bx + 4, by - 8, bx + 6, by - 3, 0.7, "pen", PALETTE[6]);
    ink(bx - 1, by - 5.5, bx + 5, by - 8.5, 0.7, "pen", PALETTE[6]);
  }
  const folk = [[178, 8.4], [392, 7.6], [604, 9]];
  for (let i = 0; i < folk.length; i++) {
    const x = folk[i][0], hh = folk[i][1];
    ink(x, FOOT - 1, x + g(0, 0.5, -1, 1), FOOT - 1 - hh, g(1.55, 0.12, 1.4, 1.7), "charcoal");
  }
}