Intervals of Silence

// composition: hand-ruled horizontal bands stacked down the whole field, tight clusters against wide silences,
// the heaviest cluster low and stopped short by a vertical column of bare paper at x ~544 — the focal event, right of centre
// layering: pale washes first, then the rulings top to bottom in rising density, then the column edges and the last darks
const PALETTE = [
  "#f0eae0", // ground — warm paper, the silence itself
  "#c3bcae", // mass — pale band wash
  "#8a887f", // shadow — graphite ruling
  "#3b3c37", // ink — near-black, rationed to the last pass
  "#a9857a", // accent — faint rose, four marks only
];

const PAPER = PALETTE[0];
const CHALK = PALETTE[1];
const GREY = PALETTE[2];
const INK = PALETTE[3];
const ROSE = PALETTE[4];

// the column of reserved paper: bands stop here and pick up again on the far side
const COL_L = 522;
const COL_R = 566;

// one graphite tone: t = 0 is the blackest ruling, t = 1 nearly the paper it sits on
function tone(t) {
  const base = lerpColor(color(INK), color(CHALK), constrain(t, 0, 1));
  if (random() < 0.03) return lerpColor(base, color(ROSE), 0.42);
  return lerpColor(base, color(PAPER), constrain(randomGaussian(0.05, 0.05), 0, 0.2));
}

// pick the pencil — soft ones only for the darks, hard ones for the whispers
function pencil(t) {
  const r = random();
  if (t < 0.28) return r < 0.5 ? "2B" : r < 0.92 ? "HB" : "charcoal";
  if (t < 0.55) return r < 0.55 ? "HB" : "cpencil";
  return r < 0.72 ? "2H" : "HB";
}

// a ruled line: never level, never straight, lighter where the hand lifts at either end.
// graphite darkens by being gone over again, so a dark ruling is the same line walked two or three times
function ruledLine(x0, x1, y, drift, t, w) {
  if (x1 - x0 < 14) return;
  const n = 9;
  const passes = t < 0.15 ? 4 : t < 0.3 ? 3 : t < 0.56 ? 2 : 1;
  for (let k = 0; k < passes; k++) {
    const dy = k === 0 ? 0 : randomGaussian(0, 0.6);
    brush.set(pencil(t), tone(t + k * 0.05), w * (1 - k * 0.1));
    brush.noFill();
    brush.beginShape(0.04);
    for (let i = 0; i <= n; i++) {
      const u = i / n;
      const x = lerp(x0, x1, u);
      const yy = y + dy + drift * u + randomGaussian(0, 0.55) + (noise(x * 0.0035, y * 0.07) - 0.5) * 2.6;
      const p = 0.5 + 0.62 * (1 - abs(u - 0.5) * 2) + random(-0.09, 0.09);
      brush.vertex(x, yy, constrain(p, 0.2, 1.14));
    }
    brush.endShape(false);
  }
}

// the same ruling, but it holds its breath across the column — a few stubborn ones cross faintly
function ruledSpan(x0, x1, y, drift, t, w) {
  if (x0 < COL_L - 6 && x1 > COL_R + 6) {
    if (random() < 0.16) {
      ruledLine(x0, x1, y, drift, min(0.97, t + 0.26), w * 0.7);
      return;
    }
    const gapL = COL_L + randomGaussian(-4, 5);
    const gapR = COL_R + randomGaussian(6, 6);
    ruledLine(x0, gapL, y, drift * ((gapL - x0) / (x1 - x0)), t, w);
    ruledLine(gapR, x1, y + drift * ((gapR - x0) / (x1 - x0)), drift * ((x1 - gapR) / (x1 - x0)), t + random(0, 0.1), w * 0.94);
    return;
  }
  ruledLine(x0, x1, y, drift, t, w);
}

// a stack of rulings that agree roughly and disagree in detail — the interval
function bandCluster(yTop, n, gap, x0, x1, t0, spread, drift, w) {
  let y = yTop;
  for (let i = 0; i < n; i++) {
    const t = constrain(randomGaussian(t0, spread), 0.03, 0.97);
    const a = x0 + randomGaussian(0, 16);
    const b = x1 + randomGaussian(0, 20);
    ruledSpan(a, b, y, drift + randomGaussian(0, 1.6), t, w * (0.84 + random(0, 0.36)));
    y += gap * (1 + randomGaussian(0, 0.14));
  }
}

// a pale field laid under the rulings, edges left to bleed
function bandWash(x0, x1, y, h, col, alpha) {
  brush.noStroke();
  brush.fillBleed(0.55, "out");
  brush.fillTexture(0.5, 0.4);
  brush.fill(col, alpha);
  brush.beginShape(0.06);
  for (let i = 0; i <= 5; i++) brush.vertex(lerp(x0, x1, i / 5), y + randomGaussian(0, 5.5));
  for (let i = 5; i >= 0; i--) brush.vertex(lerp(x0, x1, i / 5), y + h + randomGaussian(0, 6.5));
  brush.endShape(true);
}

// a ruling down the length of the column
function vRule(x, yTop, yBot, lean, t, w) {
  const n = 8;
  brush.set(pencil(t), tone(t), w);
  brush.noFill();
  brush.beginShape(0.04);
  for (let i = 0; i <= n; i++) {
    const u = i / n;
    const yy = lerp(yTop, yBot, u);
    const xx = x + lean * u + randomGaussian(0, 0.7) + (noise(yy * 0.004, x * 0.06) - 0.5) * 2.4;
    const p = 0.44 + 0.58 * (1 - abs(u - 0.5) * 2) + random(-0.09, 0.09);
    brush.vertex(xx, yy, constrain(p, 0.2, 1.1));
  }
  brush.endShape(false);
}

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

function draw() {
  translate(-width / 2, -height / 2);
  background(PAPER);

  // --- pale air where the bands will gather; the top strip keeps its silence
  bandWash(-30, 830, 238, 132, CHALK, 40);
  bandWash(46, 812, 396, 124, CHALK, 34);
  bandWash(-20, 668, 482, 118, GREY, 40);
  bandWash(96, 830, 596, 88, CHALK, 30);
  bandWash(180, 760, 706, 58, CHALK, 20);
  brush.noStroke();
  brush.fillBleed(0.7, "out");
  brush.fill(CHALK, 20);
  brush.circle(258, 168, 176, true);
  brush.fill(GREY, 16);
  brush.circle(340, 520, 150, true);
  brush.fill(ROSE, 13);
  brush.circle(636, 556, 158, true);

  // --- the bands, top to bottom: two whispers, then gathering, then the weight, then a long exhale
  bandCluster(86, 2, 16, 128, 676, 0.68, 0.06, 2.0, 0.9);
  bandCluster(158, 3, 12, 58, 512, 0.62, 0.07, -2.4, 0.95);

  bandCluster(246, 7, 8.6, 34, 762, 0.48, 0.1, 1.3, 1.1);
  bandCluster(310, 8, 7.4, 88, 838, 0.4, 0.11, -1.0, 1.2);
  bandCluster(374, 3, 11.5, 286, 812, 0.54, 0.08, 2.6, 1.0);

  bandCluster(408, 4, 14.5, -34, 392, 0.58, 0.08, -2.0, 1.0);
  bandCluster(444, 6, 10.2, 196, 786, 0.42, 0.1, 1.6, 1.15);

  bandCluster(492, 8, 8.6, 66, 794, 0.2, 0.09, -1.4, 1.25);
  bandCluster(562, 6, 9.6, 128, 712, 0.29, 0.1, 2.1, 1.15);
  bandCluster(604, 4, 11.8, 306, 690, 0.44, 0.09, -1.7, 1.05);

  bandCluster(676, 5, 12.6, 42, 466, 0.5, 0.09, -1.8, 1.0);
  bandCluster(730, 3, 14, 298, 826, 0.58, 0.07, 1.1, 0.95);

  // --- the column: bare paper drawn back over whatever crossed it, then ruled down both edges
  brush.noStroke();
  brush.fillBleed(0.3, "out");
  brush.fillTexture(0.6, 0.5);
  brush.fill(PAPER, 186);
  brush.beginShape(0.05);
  brush.vertex(528, 214);
  brush.vertex(570, 220);
  brush.vertex(562, 448);
  brush.vertex(556, 654);
  brush.vertex(518, 648);
  brush.vertex(524, 440);
  brush.endShape(true);
  brush.fill(PAPER, 150);
  brush.beginShape(0.05);
  brush.vertex(526, 236);
  brush.vertex(558, 242);
  brush.vertex(552, 520);
  brush.vertex(521, 514);
  brush.endShape(true);
  brush.fill(PAPER, 132);
  brush.beginShape(0.06);
  brush.vertex(532, 462);
  brush.vertex(568, 468);
  brush.vertex(558, 668);
  brush.vertex(526, 662);
  brush.endShape(true);
  brush.fill(CHALK, 22);
  brush.circle(544, 296, 30, true);
  brush.circle(548, 590, 26, true);

  vRule(524, 206, 656, -3.8, 0.12, 2.0);
  vRule(529, 228, 612, -2.6, 0.42, 1.0);
  vRule(568, 232, 664, -5.2, 0.24, 1.35);
  vRule(558, 262, 458, -1.8, 0.58, 0.85);
  vRule(562, 486, 646, -3.0, 0.5, 0.9);

  // --- the darks land last, and they stop where the column stands
  ruledLine(82, 516, 498, -1.5, 0.06, 1.5);
  ruledLine(574, 792, 496, 2.0, 0.1, 1.3);
  ruledLine(98, 519, 514, 1.1, 0.04, 1.65);
  ruledLine(578, 800, 517, -1.3, 0.12, 1.25);
  ruledLine(126, 514, 531, -2.1, 0.07, 1.45);
  ruledLine(580, 762, 535, 1.7, 0.16, 1.1);
  ruledLine(150, 510, 552, 1.4, 0.12, 1.3);
  ruledLine(586, 708, 558, -1.9, 0.22, 1.0);
  ruledLine(174, 508, 574, -1.2, 0.18, 1.1);
  ruledLine(112, 512, 507, -0.9, 0.05, 1.6);
  ruledLine(576, 776, 509, 1.4, 0.09, 1.35);
  ruledLine(196, 506, 543, 0.8, 0.1, 1.4);

  // two darker rulings high up, so the eye has somewhere to travel back to
  ruledLine(108, 520, 318, -2.2, 0.15, 1.45);
  ruledLine(576, 828, 324, 1.5, 0.24, 1.15);
  ruledLine(198, 502, 258, 1.8, 0.28, 1.05);
  ruledLine(142, 518, 331, 1.2, 0.13, 1.3);
  ruledLine(602, 806, 470, -1.6, 0.19, 1.15);

  // short ticks — the hand testing the pencil out at the margins
  brush.set("2B", tone(0.1), 1.35);
  brush.noFill();
  brush.line(54, 482, 92, 485);
  brush.line(52, 505, 84, 502);

  // and the rose, rationed: two rulings and a breath
  brush.set("cpencil", lerpColor(color(ROSE), color(PAPER), 0.12), 1.1);
  brush.beginShape(0.04);
  brush.vertex(172, 632);
  brush.vertex(318, 634.5);
  brush.vertex(462, 631);
  brush.vertex(514, 633);
  brush.endShape(false);
  brush.set("2H", lerpColor(color(ROSE), color(PAPER), 0.3), 0.95);
  brush.beginShape(0.04);
  brush.vertex(592, 702);
  brush.vertex(714, 705);
  brush.vertex(806, 702.5);
  brush.endShape(false);
  brush.set("HB", lerpColor(color(ROSE), color(PAPER), 0.22), 1.0);
  brush.beginShape(0.04);
  brush.vertex(236, 462);
  brush.vertex(390, 464);
  brush.vertex(514, 461);
  brush.endShape(false);
  brush.noStroke();
  brush.fillBleed(0.6, "out");
  brush.fill(ROSE, 44);
  brush.circle(206, 546, 12, true);
}