Ninety-Nine Percent

// composition: an 8x8 field of washed squares set high-left, margins generous; order at 99 percent
// Layered pigment and dry diagonal grain give the grid a pressure field: dark upper-left, pale lower-right, one red disruption.
const PALETTE = [
  "#eeeae0", // paper
  "#9a8c73", // sand
  "#746b58", // umber
  "#44463e", // ink
  "#b6423a", // the violation
];

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

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

  const originX = 128;
  const originY = 108;
  const step = 70;
  const side = 52;

  brush.noStroke();

  // the field, row by row; every square wavers a little, three misbehave
  for (let row = 0; row < 8; row++) {
    for (let col = 0; col < 8; col++) {
      const index = row * 8 + col;

      // the deletion: one square simply missing
      if (index === 27) continue;

      let x = originX + col * step + randomGaussian(0, 2.2);
      let y = originY + row * step + randomGaussian(0, 2.2);
      let tilt = randomGaussian(0, 1.6);
      let size = side * (1 + randomGaussian(0, 0.03));

      // two larger violations of the order
      if (index === 44) tilt = 14;
      if (index === 13) {
        x += 16;
        tilt = -9;
      }

      const tone = random();
      let col1 = "#9a8c73";
      let opacity = 115;
      if (tone < 0.3) {
        col1 = "#746b58";
        opacity = 135;
      } else if (tone < 0.42) {
        col1 = "#44463e";
        opacity = 105;
      }

      // the single warm square, low and off-center
      if (index === 52) {
        col1 = "#b6423a";
        opacity = 190;
      }

      push();
      translate(x, y);
      rotate(tilt);
      brush.noStroke();
      brush.fillBleed(0.22, "out");
      brush.fillTexture(0.55, 0.55);
      brush.fill(col1, opacity);
      brush.rect(0, 0, size, size, "center");
      // a second, smaller pass deepens roughly a third of the squares
      if (random() < 0.36) {
        brush.fillBleed(0.2, "in");
        brush.fill(col1, 70);
        brush.rect(randomGaussian(0, 3), randomGaussian(0, 3), size * 0.82, size * 0.82, "center");
      }
      // Density moves across the entire field, rather than random isolated dark tiles.
      const pressure = constrain(0.88 - row * 0.045 - col * 0.035 + randomGaussian(0, 0.08), 0.18, 0.92);
      brush.noFill();
      brush.noStroke();
      brush.hatchStyle("cpencil", col1, 1.1 + pressure * 0.6);
      brush.hatch(3.2 + (1 - pressure) * 5, 38 + tilt, { rand: 0.24, continuous: false, gradient: 0.5 });
      brush.rect(1, 1, size - 3, size - 4, "center");
      brush.noHatch();
      // The small paper lip remains brightest on the upper-left of each deposit.
      brush.set("cpencil", PALETTE[0], 1.15);
      brush.line(-size * 0.42, -size * 0.44, size * 0.14, -size * 0.43);
      pop();
    }
  }

  // hatching over a scattered few, like pencil second thoughts
  brush.hatchStyle("2H", "#44463e", 0.5);
  brush.hatch(4.5, 47, { rand: 0.12 });
  brush.noFill();
  brush.rect(originX + 2 * step, originY + 1 * step, side, side, "center");
  brush.rect(originX + 6 * step, originY + 4 * step, side, side, "center");
  brush.rect(originX + 1 * step, originY + 6 * step, side, side, "center");
  brush.rect(originX + 5 * step, originY + 7 * step, side, side, "center");
  brush.noHatch();

  // a pencil margin note: one short rule below the field, left-aligned
  brush.set("2H", "#44463e", 0.7);
  brush.line(originX - 26, originY + 8 * step + 22, originX + 96, originY + 8 * step + 20);
}