Dropped Threads

// composition: a woven cloth occupying the upper two-thirds, frayed along its bottom edge; margins bare
// layering: linen ground wash, weft rows, warp columns with over-under gaps, dropped threads, two loose threads last
const PALETTE = [
  "#f0ead9", // paper
  "#3b4a6b", // indigo warp
  "#ddd2b6", // undyed weft
  "#9c4a3c", // one madder thread
];

const CLOTH = { x0: 150, x1: 650, y0: 96, yBottom: 470 };
const STEP = 24;

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

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

  // linen ground wash under the cloth
  brush.noStroke();
  brush.fillBleed(0.35, "out");
  brush.fillTexture(0.55, 0.5);
  brush.fill("#ddd2b6", 60);
  brush.rect(400, 284, 520, 400, "center");

  const cols = Math.floor((CLOTH.x1 - CLOTH.x0) / STEP);
  const rows = Math.floor((CLOTH.yBottom - CLOTH.y0) / STEP);

  // choose which threads are missing (the damage)
  const droppedCols = [4, 11, 16];
  const droppedRows = [6, 12];

  // one madder weft thread
  const madderRow = 9;

  // weft: horizontal segments, skipping alternate intersections (under the warp)
  for (let r = 0; r <= rows; r++) {
    if (droppedRows.includes(r) && random() < 0.7) continue;
    const y = CLOTH.y0 + r * STEP + randomGaussian(0, 1.4);
    const fray = r >= rows - 1;
    const col = r === madderRow ? "#9c4a3c" : "#ddd2b6";
    brush.set("marker", col, r === madderRow ? 2.2 : 2.8);
    for (let c = 0; c < cols; c += 2) {
      const x = CLOTH.x0 + c * STEP + (r % 2) * STEP;
      if (x + STEP > CLOTH.x1) continue;
      const sag = fray ? randomGaussian(6, 4) : 0;
      brush.line(
        x + randomGaussian(0, 1),
        y + sag,
        x + STEP - randomGaussian(2, 1),
        y + sag + randomGaussian(0, 1.2),
      );
    }
  }

  // warp: vertical segments filling the opposite intersections
  for (let c = 0; c <= cols; c++) {
    if (droppedCols.includes(c)) {
      // a dropped warp leaves a pale scar: one thin ghost line
      brush.set("2H", "#3b4a6b", 0.5);
      const gx = CLOTH.x0 + c * STEP;
      brush.line(gx, CLOTH.y0, gx + randomGaussian(0, 2), CLOTH.y0 + rows * STEP * random(0.3, 0.7));
      continue;
    }
    const x = CLOTH.x0 + c * STEP + randomGaussian(0, 1.4);
    brush.set("marker", "#3b4a6b", 2.6);
    for (let r = 0; r < rows; r += 2) {
      const y = CLOTH.y0 + r * STEP + (c % 2) * STEP;
      if (y + STEP > CLOTH.yBottom) continue;
      brush.line(
        x + randomGaussian(0, 1),
        y + randomGaussian(0, 1),
        x + randomGaussian(0, 1.2),
        y + STEP - randomGaussian(2, 1),
      );
    }
  }

  // frayed bottom: short warp ends escaping the last row
  brush.set("2B", "#3b4a6b", 1.2);
  brush.line(198, 470, 194, 512);
  brush.line(294, 470, 297, 534);
  brush.line(390, 470, 384, 505);
  brush.line(486, 470, 490, 548);
  brush.line(558, 470, 554, 500);

  // two loose threads drifting below the cloth
  brush.set("2B", "#3b4a6b", 1.3);
  brush.beginShape(0.7);
  brush.vertex(342, 470);
  brush.vertex(322, 560);
  brush.vertex(366, 636);
  brush.vertex(330, 706);
  brush.endShape(false);
  brush.set("2B", "#9c4a3c", 1.1);
  brush.beginShape(0.7);
  brush.vertex(214, 312); // the madder thread escapes mid-cloth
  brush.vertex(128, 340);
  brush.vertex(96, 420);
  brush.endShape(false);
}