One Window Open

// composition: a dusk facade filling the left two-thirds, a strip of darkening sky on the right; most
// windows asleep, six lit warm and clustered low, one of them swung open into the evening air.
// layering: umber facade washes over the slate ground, dark panes, then each lit window built from
// three concentric warm passes so the light blooms instead of sitting flat.
const PALETTE = [
  "#1c2433", // ground: deep slate-blue dusk
  "#47372a", // facade umber
  "#131a26", // dark window glass
  "#e8b04c", // lamp gold
  "#f6c96a", // lamp core
  "#6b5340", // cornice line
];

function wrect(x, y, w, h, col, op, cur) {
  const j = () => randomGaussian(0, 1.7);
  brush.fill(col, op);
  brush.beginShape(cur);
  brush.vertex(x + j(), y + j());
  brush.vertex(x + w + j(), y + j());
  brush.vertex(x + w + j(), y + h + j());
  brush.vertex(x + j(), y + h + j());
  brush.endShape(true);
}

function glowBlob(cx, cy, r, col, op) {
  brush.fill(col, op);
  brush.beginShape(0.8);
  for (let i = 0; i < 8; i++) {
    const a = i * 45;
    const rr = r * (1 + randomGaussian(0, 0.12));
    brush.vertex(cx + cos(a) * rr, cy + sin(a) * rr);
  }
  brush.endShape(true);
}

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

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

  brush.noStroke();
  brush.fillBleed(0.32, "out");
  brush.fillTexture(0.5, 0.55);

  // dusk sky, right strip — the last of the light draining out low
  glowBlob(672, 240, 150, "#33415c", 70);
  glowBlob(700, 500, 140, "#3a4a66", 60);
  glowBlob(668, 644, 100, "#6d564a", 42);

  // facade slab, two passes, ragged parapet
  brush.fill("#47372a", 92);
  brush.beginShape(0.25);
  brush.vertex(50, 804);
  brush.vertex(54, 97);
  brush.vertex(148, 91);
  brush.vertex(262, 95);
  brush.vertex(384, 88);
  brush.vertex(474, 94);
  brush.vertex(541, 90);
  brush.vertex(545, 804);
  brush.endShape(true);
  brush.fill("#3d2f23", 55);
  brush.beginShape(0.25);
  brush.vertex(58, 804);
  brush.vertex(63, 300);
  brush.vertex(538, 312);
  brush.vertex(534, 804);
  brush.endShape(true);

  // the sleeping windows — jittered, some floors missing one entirely
  const colX = [96, 184, 272, 360, 448];
  const wW = 54;
  const wH = 42;
  const lit = [[0, 6], [1, 5], [1, 7], [2, 6], [0, 7], [2, 7]];
  const isLit = (c, r) => lit.some((p) => p[0] === c && p[1] === r);
  for (let c = 0; c < 5; c++) {
    for (let r = 0; r < 8; r++) {
      if (isLit(c, r)) continue; // painted later, in light
      if (random() < 0.12) continue; // some floors keep no window at all
      const x = colX[c] + randomGaussian(0, 2.5);
      const y = 130 + r * 72 + randomGaussian(0, 2.5);
      const cold = random() < 0.22;
      wrect(x, y, wW, wH + random(-4, 4), cold ? "#243450" : "#131a26", cold ? 95 : 120 + random(0, 45), 0.3);
    }
  }

  // cornice and two faint floor lines
  brush.set("2B", "#6b5340", 0.9);
  brush.line(56, 105, 540, 99);
  brush.set("2B", "#5a452f", 0.6);
  brush.line(60, 342, 536, 338);
  brush.line(60, 558, 538, 554);
  // facade edge against the sky
  brush.set("charcoal", "#0e131c", 1.6);
  brush.line(543, 92, 546, 800);
  brush.noStroke();

  // six lit windows, clustered low — glow, pane, core
  for (const p of lit) {
    const x = colX[p[0]] + randomGaussian(0, 2);
    const y = 130 + p[1] * 72 + randomGaussian(0, 2);
    const cxm = x + wW / 2;
    const cym = y + wH / 2;
    glowBlob(cxm, cym, 55, "#d99a3f", 60);
    wrect(x - 2, y - 2, wW + 4, wH + 4, "#e8b04c", 165, 0.35);
    wrect(x + 8, y + 7, wW - 18, wH - 15, "#f6c96a", 215, 0.4);
    brush.set("2B", "#120f0c", 1.0);
    brush.line(x - 3, y + wH + 5, x + wW + 4, y + wH + 6);
    brush.noStroke();
  }

  // the open one: its casement swung out into the dusk
  const ox = colX[1];
  const oy = 130 + 5 * 72;
  brush.fill("#f0d7a0", 175);
  brush.beginShape(0.3);
  brush.vertex(ox + wW - 2, oy + 3);
  brush.vertex(ox + wW + 27, oy - 9);
  brush.vertex(ox + wW + 31, oy + wH - 15);
  brush.vertex(ox + wW - 1, oy + wH - 2);
  brush.endShape(true);
  glowBlob(ox + wW + 16, oy + 14, 26, "#d99a3f", 45);
}