One Mat Wrong

// composition: an 18-mat tatami tessellation (6x6 units, 2:1 mats) held in one central block x150-606 / y160-616, wide clean paper margins on every side
// layering: pale straw ground wash slightly larger than the block, then per mat: straw wash, fine weave lines along the long axis, dark heri borders on the long edges
// disorder: every mat sits a fraction of a degree off true; exactly one mat — the tea-green one — is laid wrong, rotated and woven across
const PALETTE = [
  "#efe8d6", // paper ground
  "#ddc99a", // straw light
  "#cdb583", // straw mid
  "#bda06a", // straw shadow
  "#879a6a", // tea-green, the one wrong mat
  "#2b2822", // ink borders
];

const U = 76;
const X0 = 150;
const Y0 = 160;
// [col, row, w, h] in grid units — a corner-safe tatami layout, verified to tile 6x6
const MATS = [
  [0, 0, 2, 1], [2, 0, 2, 1], [4, 0, 2, 1],
  [0, 1, 1, 2], [1, 1, 2, 1], [3, 1, 2, 1], [5, 1, 1, 2],
  [1, 2, 2, 1], [3, 2, 2, 1],
  [0, 3, 2, 1], [2, 3, 2, 1], [4, 3, 2, 1],
  [0, 4, 1, 2], [1, 4, 2, 1], [3, 4, 2, 1], [5, 4, 1, 2],
  [1, 5, 2, 1], [3, 5, 2, 1],
];
const WRONG = 8; // the mat at (3,2): tea-green, rotated, weave running the wrong way

function jit(a) {
  return random(-a, a);
}

function drawMat(m, wrong) {
  const px = X0 + m[0] * U;
  const py = Y0 + m[1] * U;
  const w = m[2] * U;
  const h = m[3] * U;
  const horiz = m[2] > m[3];
  const hw = w / 2 - 3.5;
  const hh = h / 2 - 3.5;

  push();
  translate(px + w / 2, py + h / 2);
  rotate(wrong ? 0.075 : randomGaussian(0, 0.006));

  // straw wash
  const tone = wrong ? PALETTE[4] : (random() < 0.45 ? PALETTE[1] : PALETTE[2]);
  brush.noStroke();
  brush.fillBleed(0.22, "out");
  brush.fillTexture(0.6, 0.45);
  brush.fill(tone, (wrong ? 128 : 102) + random(-12, 12));
  brush.beginShape(0.05);
  brush.vertex(-hw + jit(2), -hh + jit(2));
  brush.vertex(hw + jit(2), -hh + jit(2));
  brush.vertex(hw + jit(2), hh + jit(2));
  brush.vertex(-hw + jit(2), hh + jit(2));
  brush.endShape(true);

  // a second, deeper pass on roughly a third of the mats — sun-worn unevenly
  if (!wrong && random() < 0.35) {
    brush.fill(PALETTE[3], 34);
    brush.beginShape(0.05);
    brush.vertex(-hw + 4 + jit(3), -hh + 5 + jit(3));
    brush.vertex(hw - 2 + jit(3), -hh + 6 + jit(3));
    brush.vertex(hw - 3 + jit(3), hh - 3 + jit(3));
    brush.vertex(-hw + 3 + jit(3), hh - 4 + jit(3));
    brush.endShape(true);
  }

  // weave lines run along the long axis — except on the wrong mat
  const lineAlong = wrong ? !horiz : horiz;
  const L = lineAlong ? hw : hh;
  const A = lineAlong ? hh : hw;
  brush.set("2H", wrong ? "#6e7f55" : "#a98f5c", 0.6);
  for (let t = -A + 8; t <= A - 8; t += 5.5) {
    if (random() < 0.13) continue; // a skipped weave line here and there
    const a = -L + random(3, 10);
    const b = L - random(3, 10);
    const wob = random(-0.9, 0.9);
    if (lineAlong) brush.line(a, t + wob, b, t - wob);
    else brush.line(t + wob, a, t - wob, b);
  }

  // heri: dark cloth borders on the two long edges only
  brush.set("pen", PALETTE[5], 1.15);
  if (horiz) {
    brush.line(-hw + 2, -hh + 3 + jit(0.8), hw - 2, -hh + 3 + jit(0.8));
    brush.line(-hw + 2, hh - 3 + jit(0.8), hw - 2, hh - 3 + jit(0.8));
    brush.set("HB", "#6b5f47", 0.7);
    brush.line(-hw + 5, -hh + 8.5 + jit(0.6), hw - 5, -hh + 8.5 + jit(0.6));
    brush.line(-hw + 5, hh - 8.5 + jit(0.6), hw - 5, hh - 8.5 + jit(0.6));
  } else {
    brush.line(-hw + 3 + jit(0.8), -hh + 2, -hw + 3 + jit(0.8), hh - 2);
    brush.line(hw - 3 + jit(0.8), -hh + 2, hw - 3 + jit(0.8), hh - 2);
    brush.set("HB", "#6b5f47", 0.7);
    brush.line(-hw + 8.5 + jit(0.6), -hh + 5, -hw + 8.5 + jit(0.6), hh - 5);
    brush.line(hw - 8.5 + jit(0.6), -hh + 5, hw - 8.5 + jit(0.6), hh - 5);
  }
  pop();
}

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

function draw() {
  translate(-width / 2, -height / 2);
  background(PALETTE[0]);

  // ground wash: the room floor breathing just past the mats
  brush.noStroke();
  brush.fillBleed(0.4, "out");
  brush.fillTexture(0.4, 0.5);
  brush.fill("#e2d4ad", 28);
  brush.beginShape(0.1);
  brush.vertex(X0 - 12 + jit(4), Y0 - 10 + jit(4));
  brush.vertex(X0 + 6 * U + 14 + jit(4), Y0 - 12 + jit(4));
  brush.vertex(X0 + 6 * U + 12 + jit(4), Y0 + 6 * U + 14 + jit(4));
  brush.vertex(X0 - 14 + jit(4), Y0 + 6 * U + 10 + jit(4));
  brush.endShape(true);

  for (let i = 0; i < MATS.length; i++) {
    drawMat(MATS[i], i === WRONG);
  }
}