Blocks and River

// composition: a city block plan — hatched footprints packed densest at upper-left, thinning toward a curved river void sweeping through the lower-right; one green park block
// layering: plan-paper tone -> faint street lines -> hatched building footprints (per-block hatch angles) -> park wash + trees -> faint blue river edge lines; the river itself stays untouched paper
const PALETTE = [
  "#ece7d8", // plan paper
  "#2f2c28", // ink footprints
  "#b9b19c", // faint street pencil
  "#77894f", // park green (single block)
  "#7fa8b8", // river edge blue, faint
];

const RIVER = [
  [830, 350], [706, 424], [596, 512], [482, 606], [372, 714], [306, 832],
];

function distToRiver(x, y) {
  let best = 1e9;
  for (let i = 0; i < RIVER.length - 1; i++) {
    const ax = RIVER[i][0], ay = RIVER[i][1];
    const bx = RIVER[i + 1][0], by = RIVER[i + 1][1];
    const ddx = bx - ax, ddy = by - ay;
    const t = constrain(((x - ax) * ddx + (y - ay) * ddy) / (ddx * ddx + ddy * ddy), 0, 1);
    best = min(best, dist(x, y, ax + t * ddx, ay + t * ddy));
  }
  return best;
}

function footprint(x0, y0, x1, y1, ang) {
  const j = () => randomGaussian(0, 2.2);
  brush.hatch(3.2, ang + randomGaussian(0, 3), { rand: 0.12 });
  brush.polygon([
    [x0 + j(), y0 + j()],
    [x1 + j(), y0 + j()],
    [x1 + j(), y1 + j()],
    [x0 + j(), y1 + j()],
  ]);
}

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

function draw() {
  translate(-width / 2, -height / 2);
  background("#ece7d8");

  // plan-paper tone — a warm tint wash so the sheet reads as aged drafting paper
  brush.noStroke();
  brush.fillBleed(0.35, "out");
  brush.fillTexture(0.6, 0.4);
  brush.fill("#e4ddc9", 75);
  brush.rect(20, 20, 760, 760);
  brush.fill("#ddd2b8", 40);
  brush.rect(40, 40, 720, 720);

  // irregular street grid boundaries
  const xs = [56];
  for (let i = 0; i < 9; i++) {
    const nx = xs[xs.length - 1] + random(68, 112);
    if (nx > 758) break;
    xs.push(nx);
  }
  const ys = [62];
  for (let i = 0; i < 9; i++) {
    const ny = ys[ys.length - 1] + random(62, 104);
    if (ny > 752) break;
    ys.push(ny);
  }

  // pencil street lines — only some, hand-ruled
  brush.set("2H", "#a29a82", 0.75);
  for (let i = 1; i < xs.length - 1; i++) {
    if (random() < 0.45) continue;
    brush.line(xs[i] + randomGaussian(0, 1.5), 60, xs[i] + randomGaussian(0, 2.5), 745);
  }
  for (let i = 1; i < ys.length - 1; i++) {
    if (random() < 0.45) continue;
    brush.line(58, ys[i] + randomGaussian(0, 1.5), 748, ys[i] + randomGaussian(0, 2.5));
  }

  // pick the park block: the cell nearest (280, 340)
  let parkCi = -1, parkRi = -1, parkD = 1e9;
  for (let ci = 0; ci < xs.length - 1; ci++) {
    for (let ri = 0; ri < ys.length - 1; ri++) {
      const cx = (xs[ci] + xs[ci + 1]) / 2;
      const cy = (ys[ri] + ys[ri + 1]) / 2;
      const d = dist(cx, cy, 280, 340);
      if (d < parkD && distToRiver(cx, cy) > 110) {
        parkD = d;
        parkCi = ci;
        parkRi = ri;
      }
    }
  }

  // building footprints — hatch angle chosen per block
  brush.set("rotring", "#232019", 0.7);
  brush.hatchStyle("rotring", "#232019", 0.75);
  for (let ci = 0; ci < xs.length - 1; ci++) {
    for (let ri = 0; ri < ys.length - 1; ri++) {
      if (ci === parkCi && ri === parkRi) continue;
      const bx0 = xs[ci] + 8, bx1 = xs[ci + 1] - 8;
      const by0 = ys[ri] + 8, by1 = ys[ri + 1] - 8;
      const cx = (bx0 + bx1) / 2, cy = (by0 + by1) / 2;
      if (distToRiver(cx, cy) < 92) continue; // the river void stays untouched
      // fabric denser at upper-left
      const p = constrain(1.3 - (cx + cy) / 1350, 0.14, 0.95);
      if (random() > p) continue;
      const blockAng = random([0, 30, 45, 60, 90, 120]) + randomGaussian(0, 6);
      // split the block into lots along its long axis
      const n = floor(random(2, 4.6));
      if (bx1 - bx0 > by1 - by0) {
        let lx = bx0;
        for (let k = 0; k < n; k++) {
          const w = (bx1 - bx0) / n + randomGaussian(0, 4);
          const nx = min(lx + w, bx1);
          if (nx - lx > 12 && random() > 0.12) {
            footprint(lx, by0 + random(0, 5), nx - 4, by1 - random(0, 5), blockAng);
          }
          lx = nx + 3;
        }
      } else {
        let ly = by0;
        for (let k = 0; k < n; k++) {
          const h = (by1 - by0) / n + randomGaussian(0, 4);
          const ny = min(ly + h, by1);
          if (ny - ly > 12 && random() > 0.12) {
            footprint(bx0 + random(0, 5), ly, bx1 - random(0, 5), ny - 4, blockAng);
          }
          ly = ny + 3;
        }
      }
    }
  }
  brush.noHatch();

  // the park block — one green wash and a scatter of trees
  if (parkCi >= 0) {
    const px0 = xs[parkCi] + 7, px1 = xs[parkCi + 1] - 7;
    const py0 = ys[parkRi] + 7, py1 = ys[parkRi + 1] - 7;
    brush.noStroke();
    brush.fillBleed(0.45, "out");
    brush.fillTexture(0.6, 0.6);
    brush.fill("#77894f", 150);
    brush.polygon([
      [px0 + randomGaussian(0, 2), py0 + randomGaussian(0, 2)],
      [px1 + randomGaussian(0, 2), py0 + randomGaussian(0, 2)],
      [px1 + randomGaussian(0, 2), py1 + randomGaussian(0, 2)],
      [px0 + randomGaussian(0, 2), py1 + randomGaussian(0, 2)],
    ]);
    for (let k = 0; k < 6; k++) {
      brush.fill("#5c6d3c", 165);
      brush.circle(random(px0 + 10, px1 - 10), random(py0 + 10, py1 - 10), random(4, 7.5), true);
    }
  }

  // river edge lines — clear blue, wobbling along both banks
  brush.set("pen", "#5f8fa2", 1.1);
  for (const side of [-1, 1]) {
    brush.beginShape(0.65);
    for (let i = 0; i < RIVER.length; i++) {
      const a = RIVER[max(i - 1, 0)];
      const b = RIVER[min(i + 1, RIVER.length - 1)];
      const dxr = b[0] - a[0], dyr = b[1] - a[1];
      const m = sqrt(dxr * dxr + dyr * dyr);
      const off = 42 + randomGaussian(0, 4);
      brush.vertex(
        RIVER[i][0] + (-dyr / m) * off * side,
        RIVER[i][1] + (dxr / m) * off * side
      );
    }
    brush.endShape(false);
  }
}