One Bay Open

// composition: a shoji frame seen square on holds the left two-thirds, its intervals measured by hand
// rather than by rule; the bay on the lower-left third is gone and its paper hangs across the rail below.
// layering: paper ground, a wide light wash, panel glazes, the kumiko, then the void and the flap last.
const PALETTE = [
  "#ece4d3", // ground — winter paper
  "#dcd5c1", // panel — glazed washi
  "#6f6656", // mass — kumiko, old cedar
  "#3c423d", // shadow — the cold side of everything
  "#1e1c18", // ink — the void where the bay was
  "#a9662f", // accent — rust on the torn fibre, rationed
];

// the intervals are the subject: two generous bays, one narrow band, then a wide calm at the foot
const VX = [-18, 116, 244, 348, 526];
const HY = [58, 210, 368, 448, 592, 826];

const TEAR_C = 2; // the bay that is missing
const TEAR_R = 3;

function lightAt(x, y) {
  const n = noise(x * 0.0026 + 9.1, y * 0.0026 + 3.4);
  const fall = 1 - constrain(dist(x, y, 236, 268) / 700, 0, 1) * 0.66;
  return constrain(0.3 + n * 0.95, 0.16, 1.1) * fall;
}

// one glaze of paper light inside a bay, corners never quite square
function glaze(x0, y0, x1, y1, tone, alpha, wobble) {
  brush.noStroke();
  brush.fillBleed(0.3 + random(0, 0.14), "out");
  brush.fillTexture(0.26 + random(0, 0.14), 0.42);
  brush.fill(tone, alpha);
  const mx = (x0 + x1) / 2;
  const my = (y0 + y1) / 2;
  brush.beginShape(0.04);
  brush.vertex(x0 + randomGaussian(0, wobble), y0 + randomGaussian(0, wobble));
  brush.vertex(mx + randomGaussian(0, wobble * 1.6), y0 + randomGaussian(0, wobble));
  brush.vertex(x1 + randomGaussian(0, wobble), y0 + randomGaussian(0, wobble));
  brush.vertex(x1 + randomGaussian(0, wobble * 1.4), my + randomGaussian(0, wobble * 1.6));
  brush.vertex(x1 + randomGaussian(0, wobble), y1 + randomGaussian(0, wobble));
  brush.vertex(mx + randomGaussian(0, wobble * 1.6), y1 + randomGaussian(0, wobble));
  brush.vertex(x0 + randomGaussian(0, wobble), y1 + randomGaussian(0, wobble));
  brush.vertex(x0 + randomGaussian(0, wobble * 1.4), my + randomGaussian(0, wobble * 1.6));
  brush.endShape(true);
}

function vbeam(x, y0, y1, w, alpha, shade, edge) {
  const h = w / 2;
  brush.noStroke();
  brush.fillBleed(0.05, "out");
  brush.fillTexture(0.5, 0.7);
  brush.fill("#6f6656", alpha);
  brush.beginShape(0.03);
  brush.vertex(x - h + randomGaussian(0, 1), y0 + randomGaussian(0, 2.2));
  brush.vertex(x + h + randomGaussian(0, 1), y0 + randomGaussian(0, 2.2));
  brush.vertex(x + h + randomGaussian(0, 1.3), (y0 + y1) / 2);
  brush.vertex(x + h + randomGaussian(0, 1), y1 + randomGaussian(0, 2.2));
  brush.vertex(x - h + randomGaussian(0, 1), y1 + randomGaussian(0, 2.2));
  brush.vertex(x - h + randomGaussian(0, 1.3), (y0 + y1) / 2);
  brush.endShape(true);
  brush.noFill();
  brush.set("2B", edge, 1.2 + random(0, 0.4));
  brush.beginShape(0.04);
  for (let i = 0; i <= 4; i++) brush.vertex(x + h * shade + randomGaussian(0, 0.9), lerp(y0, y1, i / 4));
  brush.endShape(false);
}

function hbeam(y, x0, x1, w, alpha, shade, edge) {
  const h = w / 2;
  brush.noStroke();
  brush.fillBleed(0.05, "out");
  brush.fillTexture(0.5, 0.7);
  brush.fill("#6f6656", alpha);
  brush.beginShape(0.03);
  brush.vertex(x0 + randomGaussian(0, 2.2), y - h + randomGaussian(0, 1));
  brush.vertex((x0 + x1) / 2, y - h + randomGaussian(0, 1.3));
  brush.vertex(x1 + randomGaussian(0, 2.2), y - h + randomGaussian(0, 1));
  brush.vertex(x1 + randomGaussian(0, 2.2), y + h + randomGaussian(0, 1));
  brush.vertex((x0 + x1) / 2, y + h + randomGaussian(0, 1.3));
  brush.vertex(x0 + randomGaussian(0, 2.2), y + h + randomGaussian(0, 1));
  brush.endShape(true);
  brush.noFill();
  brush.set("2B", edge, 1.2 + random(0, 0.4));
  brush.beginShape(0.04);
  for (let i = 0; i <= 4; i++) brush.vertex(lerp(x0, x1, i / 4), y + h * shade + randomGaussian(0, 0.9));
  brush.endShape(false);
}

function joint(x, y, r, a) {
  brush.noStroke();
  brush.fillBleed(0.14, "out");
  brush.fill("#3c423d", a);
  brush.circle(x + randomGaussian(0, 1.4), y + randomGaussian(0, 1.4), r, true);
}

// the void is built the way ink actually goes black: many small pools, one over another
function pooled(cx, cy, sx, sy, n, r0, a0, tone) {
  brush.noStroke();
  brush.fillBleed(0.1, "out");
  brush.fillTexture(0.3, 0.4);
  for (let i = 0; i < n; i++) {
    brush.fill(tone, constrain(a0 + randomGaussian(0, 26), 60, 250));
    brush.circle(cx + randomGaussian(0, sx), cy + randomGaussian(0, sy), r0 + abs(randomGaussian(0, r0 * 0.5)), true);
  }
}

function setup() {
  createCanvas(800, 800, WEBGL);
  brush.scaleBrushes(2.4);
  noLoop();
}

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

  // ---- the light, laid down first and wide ----
  brush.noStroke();
  brush.fillBleed(0.34, "out");
  brush.fillTexture(0.26, 0.4);
  brush.fill("#dcd5c1", 24);
  brush.circle(244, 254, 178, true);
  brush.fill("#dcd5c1", 18);
  brush.circle(142, 508, 152, true);
  brush.fill("#3c423d", 16);
  brush.circle(158, 738, 148, true);
  brush.fill("#6f6656", 14);
  brush.circle(430, 706, 132, true);
  // the spill into the empty right third — almost nothing, but not nothing
  brush.fill("#dcd5c1", 14);
  brush.circle(614, 300, 124, true);
  brush.fill("#dcd5c1", 10);
  brush.circle(672, 574, 106, true);

  // ---- panel glazes, bay by bay; a few keep the bare paper ----
  for (let c = 0; c < 4; c++) {
    for (let r = 0; r < 5; r++) {
      if (c === TEAR_C && r === TEAR_R) continue;
      if (random() < 0.16) continue;
      const x0 = VX[c] + 9;
      const x1 = VX[c + 1] - 9;
      const y0 = HY[r] + 9;
      const y1 = HY[r + 1] - 9;
      const l = lightAt((x0 + x1) / 2, (y0 + y1) / 2);
      const dim = random() < 0.3;
      const tone = dim ? "#6f6656" : random() < 0.72 ? "#dcd5c1" : "#ece4d3";
      const a = dim ? 22 + randomGaussian(0, 6) : 48 + l * 66 + randomGaussian(0, 10);
      glaze(x0, y0, x1, y1, tone, constrain(a, 12, 140), 2.6);
      if (random() < 0.38) {
        glaze(x0 + random(4, 16), y0 + random(4, 18), x1 - random(4, 16), y1 - random(4, 18),
          random() < 0.65 ? "#dcd5c1" : "#6f6656",
          constrain(26 + l * 30 + randomGaussian(0, 8), 10, 80), 3.4);
      }
    }
  }

  // ---- the kumiko, each member set down by hand ----
  vbeam(-6, 44, 832, 24, 208, 1, "#3c423d");
  vbeam(116, 50, 832, 10, 196, 1, "#3c423d");
  vbeam(244, 46, 832, 11, 214, 1, "#1e1c18");
  vbeam(348, 52, 832, 9, 184, -1, "#3c423d");
  vbeam(526, 40, 832, 19, 220, 1, "#1e1c18");

  hbeam(58, -26, 536, 21, 216, 1, "#1e1c18");
  hbeam(210, -26, 534, 10, 192, 1, "#3c423d");
  hbeam(368, -26, 532, 9, 186, -1, "#3c423d");
  hbeam(448, -26, 535, 12, 210, 1, "#1e1c18");
  hbeam(592, -26, 533, 10, 198, 1, "#3c423d");

  // the joints, where the members cross and the shadow doubles
  joint(116, 210, 7, 104);
  joint(244, 448, 9, 138);
  joint(348, 592, 7, 92);
  joint(116, 592, 6, 78);
  joint(244, 210, 7, 86);
  joint(348, 368, 5, 68);

  // a few broken highlights along the lit edges — the wood is not one flat tone
  brush.noFill();
  brush.set("cpencil", "#ece4d3", 0.8);
  brush.line(110, 236, 110, 330);
  brush.line(238, 476, 238, 540);
  brush.line(-16, 380, -16, 512);
  brush.line(34, 48, 186, 47);
  brush.line(292, 204, 402, 203);
  brush.set("cpencil", "#3c423d", 0.7);
  brush.line(354, 640, 354, 730);
  brush.line(452, 456, 528, 455);

  // ---- the event: the bay is gone, and what stands behind it does not give light back ----
  brush.noStroke();
  brush.fillBleed(0.4, "out");
  brush.fillTexture(0.28, 0.42);
  brush.fill("#3c423d", 122);
  brush.circle(298, 496, 54, true);
  brush.fill("#3c423d", 104);
  brush.circle(302, 556, 44, true);

  pooled(288, 486, 26, 20, 22, 13, 190, "#1e1c18");
  pooled(306, 552, 24, 22, 20, 12, 196, "#1e1c18");
  pooled(324, 512, 14, 26, 12, 10, 210, "#1e1c18");

  brush.fillBleed(0.12, "out");
  brush.fillTexture(0.34, 0.46);
  brush.fill("#1e1c18", 220);
  brush.beginShape(0.14);
  brush.vertex(250, 454);
  brush.vertex(298, 448);
  brush.vertex(340, 455);
  brush.vertex(346, 500);
  brush.vertex(336, 542);
  brush.vertex(347, 580);
  brush.vertex(318, 594);
  brush.vertex(286, 584);
  brush.vertex(258, 592);
  brush.vertex(246, 548);
  brush.vertex(252, 500);
  brush.endShape(true);
  brush.fill("#1e1c18", 200);
  brush.beginShape(0.18);
  brush.vertex(266, 466);
  brush.vertex(324, 472);
  brush.vertex(334, 540);
  brush.vertex(300, 574);
  brush.vertex(262, 546);
  brush.endShape(true);

  // ---- the flap, hinged at the upper corner and hanging across the rail below ----
  brush.fillBleed(0.5, "out");
  brush.fillTexture(0.26, 0.42);
  brush.fill("#3c423d", 148); // the shadow it throws down-left onto the next bay
  brush.beginShape(0.2);
  brush.vertex(238, 536);
  brush.vertex(288, 596);
  brush.vertex(280, 664);
  brush.vertex(240, 716);
  brush.vertex(196, 704);
  brush.vertex(186, 630);
  brush.endShape(true);

  brush.fillBleed(0.1, "out");
  brush.fillTexture(0.5, 0.6);
  brush.fill("#ece4d3", 236);
  brush.beginShape(0.16);
  brush.vertex(256, 460);
  brush.vertex(300, 486);
  brush.vertex(330, 514);
  brush.vertex(326, 556);
  brush.vertex(334, 590);
  brush.vertex(318, 626);
  brush.vertex(296, 668);
  brush.vertex(268, 692);
  brush.vertex(232, 700);
  brush.vertex(208, 684);
  brush.vertex(204, 634);
  brush.vertex(216, 596);
  brush.vertex(228, 552);
  brush.vertex(240, 504);
  brush.vertex(248, 474);
  brush.endShape(true);
  brush.fill("#dcd5c1", 168);
  brush.beginShape(0.16);
  brush.vertex(262, 486);
  brush.vertex(302, 520);
  brush.vertex(300, 570);
  brush.vertex(288, 620);
  brush.vertex(256, 664);
  brush.vertex(226, 672);
  brush.vertex(230, 606);
  brush.vertex(244, 540);
  brush.endShape(true);
  // the curl — the back of the sheet, turned away from the light
  brush.fill("#6f6656", 118);
  brush.beginShape(0.26);
  brush.vertex(330, 590);
  brush.vertex(314, 628);
  brush.vertex(292, 666);
  brush.vertex(266, 690);
  brush.vertex(282, 646);
  brush.vertex(304, 600);
  brush.endShape(true);
  // the fold running down from the hinge
  brush.fill("#6f6656", 86);
  brush.beginShape(0.22);
  brush.vertex(254, 476);
  brush.vertex(266, 528);
  brush.vertex(254, 596);
  brush.vertex(236, 652);
  brush.vertex(228, 598);
  brush.vertex(240, 528);
  brush.endShape(true);

  // ---- the darkest marks land last: the torn contour, the fibre, the highlight on the edge ----
  brush.noFill();
  brush.set("rotring", "#1e1c18", 1.1);
  brush.beginShape(0.3);
  brush.vertex(255, 458);
  brush.vertex(281, 470);
  brush.vertex(301, 485);
  brush.vertex(331, 513);
  brush.endShape(false);
  brush.set("rotring", "#3c423d", 0.85);
  brush.beginShape(0.3);
  brush.vertex(332, 516);
  brush.vertex(326, 556);
  brush.vertex(335, 590);
  brush.vertex(318, 627);
  brush.endShape(false);
  brush.line(297, 670, 268, 693);
  brush.line(232, 701, 207, 684);
  brush.set("cpencil", "#ece4d3", 0.9);
  brush.line(259, 466, 296, 490);
  brush.set("pen", "#a9662f", 0.65);
  brush.line(268, 462, 276, 450);
  brush.line(300, 483, 310, 470);
  brush.line(322, 506, 334, 496);
  brush.line(247, 676, 240, 690);
  brush.set("pen", "#1e1c18", 0.6);
  brush.line(288, 476, 294, 462);
  brush.line(313, 496, 322, 484);
  brush.line(216, 596, 205, 588);

  // ---- the frame's shadow, leaning into the empty right third ----
  brush.noStroke();
  brush.fillBleed(0.44, "out");
  brush.fillTexture(0.22, 0.4);
  brush.fill("#3c423d", 18);
  brush.circle(556, 268, 34, true);
  brush.fill("#3c423d", 15);
  brush.circle(562, 380, 38, true);
  brush.fill("#3c423d", 19);
  brush.circle(558, 496, 32, true);
  brush.fill("#3c423d", 14);
  brush.circle(566, 612, 36, true);
  brush.fill("#3c423d", 12);
  brush.circle(560, 722, 30, true);
  brush.fill("#3c423d", 9);
  brush.circle(612, 548, 48, true);

  // three specks of dust in the open paper, and one broken line where the wall turns
  brush.fillBleed(0.16, "out");
  brush.fill("#a9662f", 138);
  brush.circle(664, 152, 3.4, true);
  brush.fill("#1e1c18", 112);
  brush.circle(722, 470, 2.6, true);
  brush.fill("#6f6656", 116);
  brush.circle(606, 700, 3.9, true);
  brush.noFill();
  brush.set("2H", "#6f6656", 0.7);
  brush.line(552, 756, 698, 764);
  brush.line(730, 767, 808, 772);
}