One Breath Unclosed

// composition: one ink ring sits on the upper-left thirds crossing, its join left open at the top right so the gap opens onto bare paper; four faint drips hang below it and the whole right-hand half stays empty
// layering: a pale ochre halo of damp paper first, an iron-red bloom where the brush first landed, then dilute ink bands widening and thinning around the sweep, dark core strokes, dry-brush tail, pale hair-splits, drips and a last near-black weight at the wet start
// the width profile is the whole painting: wet and heavy at the landing, starved over the top, swelling again at the base, then run dry until the brush leaves the paper
const PALETTE = [
  "#e9e3d6", // ground — warm sized paper
  "#c2b6a0", // wash — damp halo, and dry paper showing through the ink
  "#6f665c", // dilute — drips and the outermost bleed
  "#38322c", // mid ink — the body of the stroke
  "#1b1815", // sumi — the darks, laid last
  "#8c4a32", // iron red — accent, only at the landing
];

const CX = 254;
const CY = 258;
const RX = 206;
const RY = 185;
const TILT = -0.2;
const A0 = -70 * (Math.PI / 180);
const SWEEP = -330 * (Math.PI / 180);
// wet -> starved -> swelling -> dry, sampled at ten points along the breath
const WIDTHS = [30, 46, 30, 19, 18, 28, 44, 48, 21, 5];

function ringPoint(t) {
  const a = A0 + SWEEP * t;
  const wob = noise(t * 2.7 + 4.1, 11.3) - 0.5;
  const k = 1 + wob * 0.07 + Math.sin(t * 6.4) * 0.012;
  const ex = Math.cos(a) * RX * k;
  const ey = Math.sin(a) * RY * k;
  const c = Math.cos(TILT);
  const s = Math.sin(TILT);
  const dx = (noise(t * 1.6, 2.2) - 0.5) * 11;
  const dy = (noise(t * 1.5, 7.8) - 0.5) * 11;
  return [CX + ex * c - ey * s + dx, CY + ex * s + ey * c + dy];
}

function ringWidth(t) {
  const f = constrain(t, 0, 1) * (WIDTHS.length - 1);
  const i = floor(f);
  const j = min(i + 1, WIDTHS.length - 1);
  const base = lerp(WIDTHS[i], WIDTHS[j], f - i);
  return base * (0.86 + noise(t * 11 + 19, 5.5) * 0.3);
}

function ringNormal(t) {
  const q = ringPoint(t + 0.005);
  const r = ringPoint(t - 0.005);
  let nx = -(q[1] - r[1]);
  let ny = q[0] - r[0];
  const m = Math.hypot(nx, ny) || 1;
  return [nx / m, ny / m];
}

// every pass has to die away at both ends or it leaves a squared-off cap
function taper(u, cap) {
  const e = Math.min(1, Math.min(u, 1 - u) / cap);
  return 0.16 + 0.84 * (e * e * (3 - 2 * e));
}

// one wet pass of the brush over part of the sweep, drawn as a band that
// follows the width profile — several of these overlapping make the pigment pool
function inkBand(t0, t1, col, op, grow, bleed, tex, cap) {
  brush.noStroke();
  brush.fillBleed(bleed, "out");
  brush.fillTexture(tex, tex * 0.9);
  brush.fill(col, op);
  const n = 24;
  const inner = [];
  brush.beginShape(0);
  for (let i = 0; i <= n; i++) {
    const u = i / n;
    const t = t0 + (t1 - t0) * u;
    const p = ringPoint(t);
    const nv = ringNormal(t);
    const h = ringWidth(t) * grow * taper(u, cap) * 0.5;
    brush.vertex(p[0] + nv[0] * h, p[1] + nv[1] * h);
    inner.push([p[0] - nv[0] * h, p[1] - nv[1] * h]);
  }
  for (let i = inner.length - 1; i >= 0; i--) brush.vertex(inner[i][0], inner[i][1]);
  brush.endShape(true);
}

// a single hair of the brush: a line tracking the sweep, offset off the centre
function inkStroke(t0, t1, off, name, col, w, curv) {
  brush.noFill();
  brush.set(name, col, w);
  brush.beginShape(curv);
  const n = 15;
  for (let i = 0; i <= n; i++) {
    const t = t0 + (t1 - t0) * (i / n);
    const p = ringPoint(t);
    const nv = ringNormal(t);
    const d = off * ringWidth(t) * 0.5 + randomGaussian(0, 1.1);
    brush.vertex(p[0] + nv[0] * d, p[1] + nv[1] * d);
  }
  brush.endShape(false);
}

// where the brush runs out of ink: tangent flecks, thinning as it lifts
function dryTail(t0, t1, count) {
  brush.set("2H", "#38322c", 0.7);
  for (let i = 0; i < count; i++) {
    const u = i / count;
    const t = t0 + (t1 - t0) * u + random(-0.004, 0.004);
    const p = ringPoint(t);
    const q = ringPoint(t + 0.008);
    const nv = ringNormal(t);
    const off = randomGaussian(0, ringWidth(t) * 0.16);
    const dir = (Math.atan2(q[1] - p[1], q[0] - p[0]) * 180) / Math.PI;
    const len = Math.max(2.5, randomGaussian(13 - 10 * u, 2.6));
    brush.strokeWeight(Math.max(0.28, randomGaussian(0.75 - 0.4 * u, 0.16)));
    brush.flowLine(p[0] + nv[0] * off, p[1] + nv[1] * off, len, dir);
  }
}

// a run of thinned ink leaving the wet base of the ring and stalling:
// a bead where it left the stroke, a thread, a pool where it stopped
function drip(x0, y0, len, sway, dotR) {
  brush.noStroke();
  brush.fillBleed(0.42, "out");
  brush.fillTexture(0.14, 0.22);
  brush.fill("#38322c", 128 + random(-14, 18));
  brush.circle(x0 + random(-1.2, 1.2), y0 + 3, dotR * 1.05, true);

  brush.noFill();
  brush.set("pen", "#38322c", Math.max(0.75, randomGaussian(1.3, 0.34)));
  brush.beginShape(0.6);
  const n = 4;
  for (let i = 0; i <= n; i++) {
    const t = i / n;
    brush.vertex(x0 + sway * t * t + randomGaussian(0, 1.5), y0 + len * t);
  }
  brush.endShape(false);

  const ex = x0 + sway + random(-1.4, 1.4);
  const ey = y0 + len;
  brush.noStroke();
  brush.fillBleed(0.5, "out");
  brush.fill("#6f665c", 58 + random(-10, 14));
  brush.circle(ex + random(-1, 1), ey + 1, dotR * 1.8, true);
  brush.fillTexture(0.1, 0.2);
  brush.fill("#38322c", 150 + random(-16, 20));
  brush.circle(ex, ey, dotR, true);
}

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

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

  // damp paper: one broad halo around the ring, bleeding off the left edge
  brush.noStroke();
  brush.fillBleed(0.72, "out");
  brush.fillTexture(0.32, 0.35);
  brush.fill("#c2b6a0", 15);
  brush.circle(232, 250, 262, true);
  brush.fill("#c2b6a0", 11);
  brush.circle(122, 306, 176, true);
  brush.fill("#c2b6a0", 9);
  brush.circle(318, 176, 148, true);

  // where the brush first touched down the size in the paper flushes warm —
  // kept small enough that the black lands almost on top of it
  const land = ringPoint(0.02);
  const lnv = ringNormal(0.03);
  brush.fillBleed(0.5, "out");
  brush.fill("#8c4a32", 52);
  brush.circle(land[0] - 4, land[1] + 4, 19, true);
  brush.fill("#8c4a32", 34);
  brush.circle(land[0] - 22, land[1] + 12, 11, true);

  // dilute pass — water carrying ink outside the stroke, widest at the swellings
  inkBand(0.0, 0.32, "#6f665c", 70, 1.34, 0.62, 0.3, 0.3);
  inkBand(0.28, 0.62, "#6f665c", 52, 1.1, 0.55, 0.3, 0.34);
  inkBand(0.55, 0.85, "#6f665c", 74, 1.32, 0.64, 0.3, 0.3);
  inkBand(0.8, 0.99, "#6f665c", 34, 0.82, 0.5, 0.3, 0.3);

  // mid ink — the body of the stroke, several passes so the pigment pools
  inkBand(0.01, 0.3, "#38322c", 152, 1.06, 0.4, 0.28, 0.24);
  inkBand(0.03, 0.24, "#38322c", 134, 0.9, 0.32, 0.36, 0.2);
  inkBand(0.26, 0.5, "#38322c", 130, 0.9, 0.34, 0.32, 0.3);
  inkBand(0.46, 0.66, "#38322c", 136, 0.96, 0.36, 0.3, 0.26);
  inkBand(0.59, 0.84, "#38322c", 158, 1.08, 0.42, 0.28, 0.24);
  inkBand(0.62, 0.8, "#38322c", 132, 0.9, 0.32, 0.36, 0.2);
  inkBand(0.79, 0.93, "#38322c", 84, 0.66, 0.3, 0.34, 0.3);

  // the darks, kept inside the band so a rim of dilute ink still shows;
  // the last two are near-solid — the wettest ink has no grain at all
  inkBand(0.05, 0.22, "#1b1815", 176, 0.72, 0.24, 0.3, 0.24);
  inkBand(0.62, 0.79, "#1b1815", 170, 0.7, 0.26, 0.3, 0.24);
  inkBand(0.3, 0.46, "#1b1815", 96, 0.44, 0.22, 0.3, 0.34);
  inkBand(0.85, 0.94, "#1b1815", 70, 0.34, 0.2, 0.32, 0.34);
  inkBand(0.06, 0.19, "#1b1815", 168, 0.5, 0.16, 0.08, 0.38);
  inkBand(0.65, 0.77, "#1b1815", 162, 0.48, 0.16, 0.08, 0.38);

  // core strokes: hairs of the brush, each riding a different part of the width;
  // thin and hesitant where the ink has run out over the top
  inkStroke(0.02, 0.34, -0.22, "charcoal", "#1b1815", 3.8, 0.45);
  inkStroke(0.05, 0.31, 0.3, "charcoal", "#38322c", 2.6, 0.45);
  inkStroke(0.32, 0.56, 0.0, "charcoal", "#1b1815", 1.5, 0.5);
  inkStroke(0.35, 0.53, -0.34, "2B", "#38322c", 1.0, 0.5);
  inkStroke(0.54, 0.8, 0.16, "charcoal", "#1b1815", 3.6, 0.45);
  inkStroke(0.58, 0.77, -0.3, "charcoal", "#38322c", 2.3, 0.45);
  inkStroke(0.78, 0.9, 0.0, "charcoal", "#38322c", 1.2, 0.5);

  // the tail: the brush is dry now, and then it is off the paper
  dryTail(0.87, 1.0, 18);

  // hair-splits: dry paper showing through where the brush hairs parted
  inkStroke(0.06, 0.29, -0.04, "2H", "#c2b6a0", 1.1, 0.5);
  inkStroke(0.64, 0.8, 0.12, "2H", "#c2b6a0", 1.2, 0.5);
  inkStroke(0.67, 0.76, -0.26, "2H", "#e9e3d6", 0.8, 0.5);
  inkStroke(0.4, 0.52, 0.2, "2H", "#c2b6a0", 0.6, 0.5);

  // a few faint drips, each leaving the wet edge where it found it —
  // uneven in spacing and in how far the ink got before it stopped
  drip(178, 406, 116, 10, 3.5);
  drip(213, 423, 52, -4, 2.4);
  drip(269, 449, 98, 7, 4.4);
  drip(338, 450, 33, -3, 2.0);
  drip(397, 418, 21, 2, 1.7);

  // last weights: the pooled landing, the swell at the base, one red fleck
  brush.noStroke();
  brush.fillBleed(0.4, "out");
  brush.fillTexture(0.45, 0.5);
  const a = ringPoint(0.05);
  const b = ringPoint(0.11);
  const c = ringPoint(0.71);
  brush.fill("#1b1815", 186);
  brush.circle(a[0], a[1] + 2, 15, true);
  brush.fill("#1b1815", 164);
  brush.circle(b[0] + 2, b[1] + 3, 11, true);
  brush.fill("#1b1815", 158);
  brush.circle(c[0], c[1] - 2, 13, true);

  // the same warmth once more, a fleck at the outer edge of the base swelling
  const cnv = ringNormal(0.72);
  brush.fillBleed(0.45, "out");
  brush.fill("#8c4a32", 104);
  brush.circle(c[0] + cnv[0] * 21, c[1] + cnv[1] * 21 + 3, 4.6, true);
  brush.fill("#8c4a32", 116);
  brush.circle(land[0] + lnv[0] * 13 - 2, land[1] + lnv[1] * 13 + 9, 2.8, true);
}