Dragged Until Grain

// composition: one dry brush dragged from the upper-left third to the lower-right corner — dense
//   where it first bites at (255, 255), spent and scattered into loose grain long before the corner
// layering: two pale dust stains, a smoky halo under the head, then every bristle track laid
//   head-to-tail, then the hand-set darks of the first contact and the last stray grains
// nothing here is wet: apart from a little dust in the ground, the mark exists only where the
//   paper's tooth stood high enough to take ink, and the bare triangles either side are half the picture
const PALETTE = [
  "#e3e0d7", // paper — cool pale stone, untouched over most of the sheet
  "#a09a8c", // drift — the palest grain, barely pigment at all
  "#585247", // mass — the body of the mark where the load still holds
  "#211e1a", // shadow — near-black, only where the brush truly bites
  "#3c4a55", // accent — the last cold wetness left in the heel, three touches only
];

const HEAD = [150, 156];
const TAIL = [822, 820];
const SAG = 36; // the arm sags a little through the middle of the drag

// the bristle map of one broken brush: [position across the bundle, share of the load it carries]
// clumped and gappy, the way a brush is after it has been used badly for years
const HAIRS = [
  [-0.98, 0.3], [-0.91, 0.42], [-0.86, 0.36], [-0.78, 0.55], [-0.74, 0.48],
  [-0.63, 0.86], [-0.58, 0.74], [-0.49, 1.04], [-0.44, 0.72], [-0.36, 0.98],
  [-0.27, 1.12], [-0.22, 0.86], [-0.13, 1.06], [-0.06, 1.18], [0.02, 0.94],
  [0.09, 1.14], [0.17, 0.83], [0.24, 1.02], [0.33, 0.9], [0.41, 1.08],
  [0.48, 0.7], [0.57, 0.82], [0.66, 0.5], [0.73, 0.56], [0.82, 0.34], [0.94, 0.28],
  [-0.32, 0.79], [-0.17, 1.09], [0.05, 0.87], [0.29, 1.11], [0.53, 0.78], [-0.68, 0.62],
];

function spine(t) {
  const dx = TAIL[0] - HEAD[0];
  const dy = TAIL[1] - HEAD[1];
  const m = Math.hypot(dx, dy);
  const sag = Math.sin(Math.PI * pow(constrain(t, 0, 1), 0.85)) * SAG;
  return [lerp(HEAD[0], TAIL[0], t) - (dy / m) * sag, lerp(HEAD[1], TAIL[1], t) + (dx / m) * sag];
}

// local frame of the drag: where it is, where it points, and which way is across
function frame(t) {
  const a = spine(t - 0.006);
  const b = spine(t + 0.006);
  const dx = b[0] - a[0];
  const dy = b[1] - a[1];
  const m = Math.hypot(dx, dy) || 1;
  const p = spine(t);
  return { x: p[0], y: p[1], tx: dx / m, ty: dy / m, nx: -dy / m, ny: dx / m };
}

// the bundle splays as it dries — the hairs stop being a brush and become separate hairs
function splay(t) {
  return 22 + 58 * pow(t, 1.35);
}

// what is left in the brush: everything at the first touch, nothing by the last sixth
function load(t) {
  return constrain(1.04 - pow(constrain(t, 0, 1.2) / 0.84, 1.05), 0, 1);
}

// the hand skips as it drags, so the bundle lifts and lands in long slow pulses — staggered
// across the brush, because one side of it leaves the paper before the other
function skip(t, u0) {
  return constrain(0.34 + 1.5 * noise(t * 7.4 + 61.3, u0 * 1.15 + 3.7), 0.18, 1.34);
}

// the tooth of the paper, stretched so the high points are the ones that read
function tooth(x, y) {
  const coarse = noise(x * 0.078, y * 0.078);
  const fine = noise(x * 0.27 + 40.5, y * 0.27 + 12.7);
  const g = map(coarse * 0.62 + fine * 0.38, 0.33, 0.67, 0, 1);
  return constrain(g + randomGaussian(0, 0.085), 0, 1);
}

// ink drawn from the palette by how much load is left, then faded toward the paper
function inkAt(L) {
  const r = random();
  let base;
  if (L > 0.55) base = r < 0.76 ? "#211e1a" : "#585247";
  else if (L > 0.28) base = r < 0.6 ? "#585247" : r < 0.96 ? "#211e1a" : "#a09a8c";
  else base = r < 0.68 ? "#a09a8c" : "#585247";
  const fade = constrain(randomGaussian(0.34 - L * 0.3, 0.1), 0, 0.74);
  return lerpColor(color(base), color("#e3e0d7"), fade);
}

function brushFor(L) {
  if (L > 0.6) return random() < 0.55 ? "charcoal" : "2B";
  if (L > 0.28) return random() < 0.58 ? "2B" : "cpencil";
  return random() < 0.5 ? "spray" : "2H";
}

// one hair, sampled the whole length of the drag; the tooth decides where it actually touched
function track(u0, strength) {
  // the brush is not flat, so not every hair lands at the same moment
  const born = abs(randomGaussian(0, 0.032));
  for (let s = 0; s <= 62; s++) {
    const t = (s / 62) * 1.02;
    if (t < born) continue;
    const L = load(t) * strength * skip(t, u0);
    if (L <= 0.04) continue;
    const f = frame(t);
    // each hair wanders at its own rate, so no two tracks stay parallel for long
    const wander = (noise(u0 * 4.1 + 9.3, t * (1.8 + abs(u0) * 2.4)) - 0.5) * 0.9;
    const u = u0 * (1 + 0.82 * t) + wander * (0.7 + t);
    const d = u * splay(t) + randomGaussian(0, 2.6);
    const x = f.x + f.nx * d;
    const y = f.y + f.ny * d;
    if (tooth(x, y) < 1 - L * 0.96) continue;
    const len = constrain(randomGaussian(2.6 + 19 * pow(L, 1.3), 3.6), 1.1, 30);
    const w = constrain(randomGaussian(0.45 + 1.85 * pow(L, 0.85), 0.22), 0.3, 2.35);
    const a = randomGaussian(0, 0.1);
    const dx = f.tx * Math.cos(a) - f.ty * Math.sin(a);
    const dy = f.tx * Math.sin(a) + f.ty * Math.cos(a);
    brush.noFill();
    brush.set(brushFor(L), inkAt(L), w);
    brush.line(x - dx * len * 0.5, y - dy * len * 0.5, x + dx * len * 0.5, y + dy * len * 0.5);
  }
}

// a hair that keeps going after the others have quit — it breaks up too, only later and alone
function loneHair(u, t0, t1, name, weight, tone) {
  brush.noFill();
  for (let s = 0; s <= 24; s++) {
    const t = lerp(t0, t1, s / 24);
    const g = 1 - s / 24; // this one hair's own dwindling load
    const f = frame(t);
    const d = u * splay(t) + randomGaussian(0, 2.4);
    const x = f.x + f.nx * d;
    const y = f.y + f.ny * d;
    if (tooth(x, y) < 0.5 - g * 0.44) continue;
    const len = constrain(randomGaussian(4 + 13 * g, 3), 1.2, 21);
    const spent = lerpColor(color(tone), color("#e3e0d7"), constrain(0.72 - g * 0.72, 0, 0.74));
    brush.set(name, spent, weight * constrain(g * 0.9 + 0.24, 0.22, 1.15));
    brush.line(x, y, x + f.tx * len, y + f.ty * len);
  }
}

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

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

  // ---- dust in the paper: a smoky halo under the head, thinning along the drag
  brush.noStroke();
  brush.fillBleed(0.62, "out");
  brush.fillTexture(0.38, 0.4);
  brush.fill("#585247", 17);
  brush.circle(248, 246, 196, true);
  brush.fill("#211e1a", 13);
  brush.circle(192, 198, 132, true);
  brush.fill("#585247", 10);
  brush.circle(398, 392, 154, true);
  brush.fill("#a09a8c", 8);
  brush.circle(552, 548, 128, true);
  // and two stains far from the mark, so the bare paper is not a flat field
  brush.fill("#a09a8c", 9);
  brush.circle(626, 202, 178, true);
  brush.fill("#585247", 7);
  brush.circle(184, 660, 142, true);

  // three cold touches where the last real wetness sat in the heel — the only colour in the piece,
  // laid under the ink so it shows between the tracks rather than on top of them
  brush.fillBleed(0.44, "out");
  brush.fillTexture(0.6, 0.55);
  brush.fill("#3c4a55", 104);
  brush.circle(204, 226, 22, true);
  brush.fill("#3c4a55", 76);
  brush.circle(168, 188, 14, true);
  brush.fill("#3c4a55", 52);
  brush.circle(250, 272, 10, true);

  // ---- the drag itself: every hair in the bundle, from the first bite to wherever it quit
  for (const h of HAIRS) track(h[0], h[1]);

  // ---- the first contact, hand-set: seven marks that exist only in the first eighth,
  //      where the brush was still a brush and not yet a handful of wire
  brush.noFill();
  brush.set("charcoal", "#211e1a", 1.9);
  brush.line(158, 178, 236, 246);
  brush.set("charcoal", "#211e1a", 1.7);
  brush.line(178, 148, 268, 224);
  brush.set("charcoal", "#211e1a", 1.8);
  brush.line(140, 206, 214, 276);
  brush.set("2B", "#585247", 1.5);
  brush.line(196, 132, 262, 190);
  brush.set("charcoal", "#211e1a", 1.6);
  brush.line(124, 232, 186, 292);
  brush.set("2B", "#585247", 1.3);
  brush.line(212, 258, 296, 322);
  brush.set("2B", "#211e1a", 1.15);
  brush.line(168, 262, 244, 318);

  // the blunt landing: two ragged marks across the bundle where the brush first met the paper
  brush.set("charcoal", "#211e1a", 1.8);
  brush.beginShape(0.5);
  brush.vertex(122, 194);
  brush.vertex(152, 166);
  brush.vertex(188, 142);
  brush.endShape(false);
  brush.set("2B", "#585247", 1.15);
  brush.beginShape(0.5);
  brush.vertex(146, 232);
  brush.vertex(178, 214);
  brush.vertex(202, 186);
  brush.endShape(false);

  // ---- the loose grain of the failure zone: pigment thrown off the splitting hairs,
  //      wider than the bundle and thinning to nothing well short of the corner
  for (let g = 0; g < 220; g++) {
    const t = constrain(randomGaussian(0.55, 0.15), 0.24, 0.88);
    const f = frame(t);
    const d = randomGaussian(0, splay(t) * 0.78);
    const x = f.x + f.nx * d;
    const y = f.y + f.ny * d;
    const L = load(t) * skip(t, d / 60) * constrain(randomGaussian(0.92, 0.25), 0.2, 1.4);
    if (tooth(x, y) < 1 - L * 0.88) continue;
    const len = constrain(randomGaussian(4.5 + 9 * L, 3), 0.9, 17);
    brush.noFill();
    brush.set(random() < 0.6 ? "spray" : "cpencil", inkAt(L * 0.72), constrain(randomGaussian(0.82, 0.28), 0.3, 1.5));
    brush.line(x, y, x + f.tx * len, y + f.ty * len);
  }

  // ---- four hairs that outlive the rest, scratching on after the mark itself has gone
  loneHair(-0.42, 0.4, 0.66, "2B", 1.5, "#211e1a");
  loneHair(0.16, 0.44, 0.74, "charcoal", 1.25, "#211e1a");
  loneHair(0.63, 0.36, 0.57, "2B", 1.05, "#585247");
  loneHair(-0.78, 0.32, 0.5, "cpencil", 1.3, "#585247");

  // ---- the last grains, placed one at a time; after these the paper simply wins
  brush.noStroke();
  brush.fillBleed(0.18, "out");
  brush.fill("#211e1a", 148);
  brush.circle(654, 668, 2.4, true);
  brush.fill("#585247", 122);
  brush.circle(682, 646, 1.9, true);
  brush.fill("#211e1a", 132);
  brush.circle(668, 712, 2.1, true);
  brush.fill("#a09a8c", 108);
  brush.circle(706, 690, 1.6, true);
  brush.fill("#585247", 116);
  brush.circle(724, 726, 1.8, true);
  brush.fill("#211e1a", 96);
  brush.circle(742, 704, 1.4, true);
  brush.fill("#a09a8c", 88);
  brush.circle(758, 748, 1.3, true);
  brush.fill("#585247", 74);
  brush.circle(716, 762, 1.2, true);
  brush.fill("#211e1a", 82);
  brush.circle(776, 730, 1.1, true);
  brush.fill("#a09a8c", 62);
  brush.circle(788, 768, 1.0, true);

  // the hardest darks last of all, holding the head down against so much empty paper
  brush.noFill();
  brush.set("charcoal", "#211e1a", 2.6);
  brush.beginShape(0.4);
  brush.vertex(132, 190);
  brush.vertex(186, 232);
  brush.vertex(238, 280);
  brush.endShape(false);
  brush.set("charcoal", "#211e1a", 2.3);
  brush.beginShape(0.4);
  brush.vertex(170, 144);
  brush.vertex(228, 194);
  brush.vertex(276, 246);
  brush.endShape(false);
  brush.set("charcoal", "#211e1a", 2.0);
  brush.beginShape(0.4);
  brush.vertex(148, 244);
  brush.vertex(204, 292);
  brush.vertex(248, 336);
  brush.endShape(false);
  brush.set("2B", "#211e1a", 1.5);
  brush.line(252, 296, 318, 352);
  brush.line(288, 268, 344, 318);
  brush.line(224, 322, 282, 372);
  brush.line(306, 348, 358, 396);
}