The Same Jug Again

// composition: one stoneware jug stands just left of the right thirds line, a squat tin
// keeping its distance, and the long shadow runs out of the jug's foot to the lower-left corner.
// layering: dust air and table plane first, then the shadow, then the two masses, ink edges last.
// the upper-left quarter stays bare paper — the interval is as much the subject as the jug.
const PALETTE = [
  "#e9e3d6", // ground — dust-coloured paper
  "#cbc0ab", // table plane
  "#a2947f", // mass — the jug's clay
  "#736a5c", // shadow
  "#413b33", // ink, the last darks
  "#b0714f", // faded terracotta accent, rationed
];
const GROUND = PALETTE[0];
const TABLE = PALETTE[1];
const MASS = PALETTE[2];
const SHADE = PALETTE[3];
const INK = PALETTE[4];
const ACCENT = PALETTE[5];

// jug profile: [y, half-width], lip down to foot. cx sits at 506, just left of the 533 thirds line.
const JUG_CX = 506;
const JUG = [
  [332, 40],
  [346, 33],
  [364, 31],
  [388, 54],
  [418, 74],
  [450, 89],
  [482, 94],
  [516, 90],
  [550, 78],
  [582, 63],
  [602, 53],
  [612, 50],
];

// the shadow's spine, jug foot to lower-left corner, with its half-widths.
// it leaves the foot narrow and spreads as it travels, the way a long cast
// shadow loses its edge.
const SHADOW_SPINE = [
  [498, 620],
  [418, 654],
  [322, 696],
  [218, 732],
  [112, 770],
  [-30, 816],
];
const SHADOW_W = [28, 44, 62, 76, 90, 104];

const TIN = { x0: 306, x1: 396, top: 486, base: 604 };

// a soft breathing pool of pigment. tex low = the colour stays as colour;
// tex high = it breaks up into dust.
function wash(x, y, r, col, op, bleed, tex) {
  brush.noStroke();
  brush.fillBleed(bleed, "out");
  brush.fillTexture(tex, 0.5);
  brush.fill(col, op);
  brush.circle(x, y, r, true);
}

function fillShape(pts, col, op, bleed, curv, tex) {
  brush.noStroke();
  brush.fillBleed(bleed, "out");
  brush.fillTexture(tex, 0.55);
  brush.fill(col, op);
  brush.beginShape(curv);
  for (let i = 0; i < pts.length; i++) brush.vertex(pts[i][0], pts[i][1]);
  brush.endShape(true);
}

// the jug's half-width at height y
function jugHalf(y) {
  if (y <= JUG[0][0]) return JUG[0][1];
  for (let i = 0; i < JUG.length - 1; i++) {
    if (y <= JUG[i + 1][0]) {
      const f = (y - JUG[i][0]) / (JUG[i + 1][0] - JUG[i][0]);
      return lerp(JUG[i][1], JUG[i + 1][1], f);
    }
  }
  return JUG[JUG.length - 1][1];
}

// x at horizontal fraction a (0 = left contour, 1 = right) for height y
function jugX(a, y) {
  const hw = jugHalf(y);
  return JUG_CX - hw + 2 * hw * a;
}

// a vertical band of the jug as a closed polygon. `wander` lets the two long
// boundaries meander up and down the form instead of ruling themselves straight —
// without it the overlapping passes butt into hard verticals and the pot comes out
// faceted like a paper lantern.
function jugBand(a, b, jit, wander, ph) {
  const pts = [];
  for (let i = 0; i < JUG.length; i++) {
    const y = JUG[i][0];
    const fa = constrain(a + (noise(y * 0.014, ph) - 0.5) * wander, 0, 1);
    pts.push([jugX(fa, y) + randomGaussian(0, jit), y + randomGaussian(0, jit)]);
  }
  for (let i = JUG.length - 1; i >= 0; i--) {
    const y = JUG[i][0];
    const fb = constrain(b + (noise(y * 0.014, ph + 8.7) - 0.5) * wander, 0, 1);
    pts.push([jugX(fb, y) + randomGaussian(0, jit), y + randomGaussian(0, jit)]);
  }
  return pts;
}

// one stroke following the pot's curve at fraction a, from y0 to y1
function claystroke(a, y0, y1, col, w) {
  brush.noFill();
  brush.set("cpencil", col, w);
  brush.beginShape(0.35);
  const steps = 5;
  for (let k = 0; k <= steps; k++) {
    const y = lerp(y0, y1, k / steps);
    brush.vertex(jugX(a, y) + randomGaussian(0, 1.8), y);
  }
  brush.endShape(false);
}

// walk the spine: [x, y, halfWidth] at parameter t
function onSpine(t) {
  const u = constrain(t, 0, 0.999) * (SHADOW_SPINE.length - 1);
  const i = floor(u);
  const f = u - i;
  const a = SHADOW_SPINE[i];
  const b = SHADOW_SPINE[i + 1];
  return [lerp(a[0], b[0], f), lerp(a[1], b[1], f), lerp(SHADOW_W[i], SHADOW_W[i + 1], f)];
}

// unit tangent and unit normal of the spine at t
function spineFrame(t) {
  const q = onSpine(min(t + 0.05, 1));
  const r = onSpine(max(t - 0.05, 0));
  const m = Math.hypot(q[0] - r[0], q[1] - r[1]) || 1;
  return [(q[0] - r[0]) / m, (q[1] - r[1]) / m];
}

// one pass of the cast shadow. the two long edges are sampled independently and
// wander hard, so no pass repeats another's contour and the mass never rules
// itself into a parallel-sided ribbon.
function shadowShape(grow, tEnd, wob) {
  const up = [];
  const dn = [];
  const n = 7;
  for (let k = 0; k <= n; k++) {
    const t = (k / n) * tEnd;
    const p = onSpine(t);
    const [tx, ty] = spineFrame(t);
    const nx = -ty;
    const ny = tx;
    const slide = randomGaussian(0, 5.5);
    const cx = p[0] + tx * slide;
    const cy = p[1] + ty * slide;
    // a pass that stops inside the picture must come to a point, or its blunt
    // cross-cut stacks up with the others into visible stair steps
    const taper = tEnd < 0.96 ? 1 - Math.pow(k / n, 2.6) * 0.84 : 1;
    const wd =
      p[2] * grow * taper * (0.62 + noise(k * 0.79, grow * 7.3) * 0.82) + randomGaussian(0, wob);
    const wu =
      p[2] * grow * taper * (0.5 + noise(k * 0.67 + 31, grow * 3.1) * 0.9) + randomGaussian(0, wob);
    up.push([cx - nx * wu + randomGaussian(0, 3), cy - ny * wu + randomGaussian(0, 3)]);
    dn.push([cx + nx * wd + randomGaussian(0, 3), cy + ny * wd + randomGaussian(0, 3)]);
  }
  for (let i = dn.length - 1; i >= 0; i--) up.push(dn[i]);
  return up;
}

// grain laid inside the shadow's width. the angle is knocked off the spine's
// tangent so the marks read as tooth in the cloth, not as a parallel comb.
function grainRun(t, len, col, w) {
  const p = onSpine(t);
  const [tx, ty] = spineFrame(t);
  const off = constrain(randomGaussian(0, p[2] * 0.4), -p[2] * 0.62, p[2] * 0.62);
  const x = p[0] - ty * off;
  const y = p[1] + tx * off;
  const skew = randomGaussian(0, 0.34);
  const dx = tx * Math.cos(skew) - ty * Math.sin(skew);
  const dy = tx * Math.sin(skew) + ty * Math.cos(skew);
  brush.noFill();
  brush.set("cpencil", col, w);
  brush.line(x - dx * len * 0.5, y - dy * len * 0.5, x + dx * len * 0.5, y + dy * len * 0.5);
}

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

function draw() {
  translate(-width / 2, -height / 2);
  background(GROUND);

  // --- the wall: one low breath of dust behind the jug, held to the right half so
  // the whole upper-left stays bare paper. the emptiness above the table is the
  // other half of the subject.
  wash(688, 424, 196, TABLE, 62, 0.4, 0.55);
  wash(770, 306, 138, TABLE, 34, 0.44, 0.6);

  // --- the table plane: one broad slab whose far edge is the only horizontal in
  // the picture. a polygon, not a row of circles — circles at this bleed come out
  // as cauliflower and the plane has to stay a plane.
  fillShape(
    [
      [-30, 566],
      [140, 552],
      [318, 556],
      [468, 549],
      [612, 554],
      [768, 550],
      [836, 560],
      [836, 838],
      [-30, 838],
    ],
    TABLE,
    132,
    0.26,
    0.08,
    0.4,
  );
  // a narrow darker strip banked against the far edge — the tonal step is what makes
  // the edge an edge, so the broken lines below have something to sit on
  fillShape(
    [
      [-30, 570],
      [180, 556],
      [400, 559],
      [620, 555],
      [836, 562],
      [836, 596],
      [-30, 604],
    ],
    SHADE,
    64,
    0.36,
    0.1,
    0.5,
  );
  // unevenness in the cloth, warmer where it comes forward on the right
  wash(660, 660, 178, TABLE, 96, 0.34, 0.4);
  wash(768, 742, 140, MASS, 74, 0.38, 0.44);
  wash(560, 782, 156, TABLE, 62, 0.4, 0.46);

  // the table's far edge — three broken passes, the left end fading into paper.
  // noFill() first: the washes above leave a fill queued, and p5.brush would fill
  // these open polylines too — the short middle pass collapses to an empty polygon
  // and its scatter() then indexes modulo zero. That was the crash.
  brush.noFill();
  brush.field("hand");
  brush.set("cpencil", SHADE, 1.6);
  brush.beginShape(0.4);
  brush.vertex(196, 545);
  brush.vertex(244, 546);
  brush.vertex(292, 548);
  brush.endShape(false);
  brush.set("cpencil", SHADE, 2.0);
  brush.beginShape(0.4);
  brush.vertex(402, 550);
  brush.vertex(434, 551);
  brush.vertex(466, 551);
  brush.endShape(false);
  brush.set("cpencil", SHADE, 2.4);
  brush.beginShape(0.4);
  brush.vertex(614, 553);
  brush.vertex(724, 555);
  brush.vertex(808, 558);
  brush.endShape(false);
  brush.set("2H", MASS, 1.3);
  brush.line(308, 556, 396, 559);
  brush.line(648, 562, 794, 565);
  brush.noField();

  // --- the shadow, back to front: broad and pale at the far end, tightening and
  // darkening back toward the foot it belongs to
  fillShape(shadowShape(1.22, 1.0, 9), SHADE, 104, 0.38, 0.36, 0.48);
  fillShape(shadowShape(0.94, 0.78, 8), SHADE, 146, 0.3, 0.34, 0.4);
  fillShape(shadowShape(0.82, 0.56, 6), SHADE, 188, 0.2, 0.32, 0.28);
  fillShape(shadowShape(0.66, 0.34, 5), SHADE, 208, 0.14, 0.3, 0.22);
  fillShape(shadowShape(0.52, 0.18, 4), INK, 176, 0.12, 0.28, 0.2);
  fillShape(shadowShape(0.4, 0.08, 3), INK, 205, 0.09, 0.26, 0.18);

  // grain drawn along its run, spread the whole length and kept short — three long
  // parallel streaks read as scribble, a scatter of short ones reads as cloth
  brush.noField();
  for (let i = 0; i < 26; i++) {
    const t = constrain((i + randomGaussian(0, 0.4)) / 26, 0.03, 0.95);
    const len = max(16, randomGaussian(44 - t * 16, 12));
    const col = t < 0.3 && i % 4 === 0 ? INK : SHADE;
    grainRun(t, len, col, max(0.9, randomGaussian(1.9 - t * 0.8, 0.4)));
  }

  // pigment settling down the run — high bleed so these read as damp patches in
  // the cloth and never as discs. the fill passes above carry the value.
  wash(452, 634, 34, INK, 96, 0.5, 0.5);
  wash(372, 664, 30, SHADE, 104, 0.52, 0.52);
  wash(268, 712, 30, SHADE, 82, 0.54, 0.54);
  wash(154, 760, 28, SHADE, 62, 0.56, 0.56);

  // the tin's own shadow, feeding into the long one
  fillShape(
    [
      [310, 600],
      [246, 626],
      [190, 656],
      [232, 670],
      [312, 640],
      [364, 610],
    ],
    SHADE,
    148,
    0.3,
    0.34,
    0.36,
  );
  wash(290, 616, 26, INK, 126, 0.26, 0.3);

  // --- the squat tin, behind and to the left: nothing but a held interval
  fillShape(
    [
      [TIN.x0 + randomGaussian(0, 2), TIN.top + 8],
      [TIN.x0 + 9, TIN.base],
      [TIN.x1 - 5, TIN.base + 2],
      [TIN.x1 + randomGaussian(0, 2), TIN.top + 5],
      [TIN.x0 + 46, TIN.top - 5],
    ],
    MASS,
    228,
    0.08,
    0.16,
    0.14,
  );
  // the lip, read as a shallow ellipse rather than a ruled diagonal
  fillShape(
    [
      [TIN.x0 - 1, TIN.top + 7],
      [TIN.x0 + 22, TIN.top - 3],
      [TIN.x0 + 48, TIN.top - 6],
      [TIN.x1 + 1, TIN.top + 4],
      [TIN.x0 + 46, TIN.top + 12],
      [TIN.x0 + 19, TIN.top + 13],
    ],
    SHADE,
    190,
    0.1,
    0.5,
    0.18,
  );
  // the tin's own turn: a shaded third on the left, then a narrower core, so the
  // thing reads as a cylinder rather than a card standing on edge
  fillShape(
    [
      [TIN.x0 + 2, TIN.top + 13],
      [TIN.x0 + 12, TIN.base - 1],
      [TIN.x0 + 40, TIN.base - 4],
      [TIN.x0 + 32, TIN.top + 9],
    ],
    SHADE,
    196,
    0.2,
    0.14,
    0.28,
  );
  fillShape(
    [
      [TIN.x0 + 1, TIN.top + 14],
      [TIN.x0 + 10, TIN.base - 2],
      [TIN.x0 + 22, TIN.base - 3],
      [TIN.x0 + 14, TIN.top + 11],
    ],
    INK,
    112,
    0.26,
    0.14,
    0.34,
  );
  wash(TIN.x1 - 24, TIN.top + 60, 22, GROUND, 96, 0.44, 0.44);
  brush.field("hand");
  brush.noFill();
  brush.set("charcoal", INK, 1.4);
  brush.beginShape(0.22);
  brush.vertex(TIN.x0 + 4, TIN.base - 6);
  brush.vertex(TIN.x0, TIN.top + 22);
  brush.vertex(TIN.x0 - 1, TIN.top + 9);
  brush.endShape(false);
  brush.set("2B", SHADE, 1.1);
  brush.line(TIN.x1 - 3, TIN.top + 16, TIN.x1 - 7, TIN.base - 8);
  // the far rim of the lip, so the tin opens instead of ending in a flat card edge
  brush.set("2B", INK, 1.2);
  brush.beginShape(0.7);
  brush.vertex(TIN.x0 - 1, TIN.top + 7);
  brush.vertex(TIN.x0 + 24, TIN.top - 4);
  brush.vertex(TIN.x1 + 1, TIN.top + 4);
  brush.endShape(false);
  brush.set("2B", INK, 1.4);
  brush.beginShape(0.6);
  brush.vertex(TIN.x0 + 8, TIN.base - 2);
  brush.vertex(TIN.x0 + 46, TIN.base + 3);
  brush.vertex(TIN.x1 - 8, TIN.base);
  brush.endShape(false);
  brush.noField();

  // --- the jug. light comes from the upper right, so the lit flank stays near-paper.
  // the mass is built as overlapping full-height passes and then turned with soft
  // washes, never as flat vertical panels butted edge to edge.
  // four overlapping passes of the same silhouette so pigment actually accumulates
  // into clay instead of staying a stain — low bleed and low texture on the core.
  fillShape(jugBand(0.0, 1.0, 2.2, 0, 0), MASS, 238, 0.06, 0.34, 0.12);
  fillShape(jugBand(0.0, 1.0, 3.0, 0.05, 2.1), MASS, 190, 0.12, 0.34, 0.22);
  fillShape(jugBand(0.04, 0.96, 3.2, 0.14, 5.4), TABLE, 148, 0.22, 0.34, 0.3);
  fillShape(jugBand(0.0, 0.48, 2.2, 0.3, 9.2), SHADE, 196, 0.28, 0.3, 0.32);
  fillShape(jugBand(0.0, 0.24, 1.6, 0.22, 13.6), SHADE, 190, 0.32, 0.28, 0.36);
  fillShape(jugBand(0.0, 0.11, 1.2, 0.12, 17.8), INK, 138, 0.32, 0.26, 0.38);
  // a loose pass straddling where the shaded band ends, to feather out the one
  // boundary that still wants to run straight down the widest part of the belly
  fillShape(jugBand(0.34, 0.64, 3.6, 0.46, 23.5), MASS, 104, 0.44, 0.32, 0.5);

  // the turn into light: enough to lift the right flank, never enough to bleach it
  // back past the paper — the lit side is still clay, only less of it
  wash(JUG_CX + 56, 434, 34, GROUND, 122, 0.4, 0.4);
  wash(JUG_CX + 62, 492, 30, GROUND, 108, 0.42, 0.42);
  wash(JUG_CX + 44, 546, 24, GROUND, 88, 0.44, 0.44);
  wash(JUG_CX + 20, 372, 18, GROUND, 104, 0.4, 0.4);

  // modelled with strokes down the belly: dense on the shaded left, thinning as the
  // form turns. fewer and lighter than the shaded flank wants — the wash carries the
  // value, the strokes only say which way the clay goes.
  brush.field("hand");
  claystroke(0.09, 398, 604, SHADE, 2.2);
  claystroke(0.15, 388, 594, SHADE, 1.8);
  claystroke(0.22, 410, 574, SHADE, 1.5);
  claystroke(0.12, 432, 566, INK, 1.6);
  claystroke(0.31, 448, 546, MASS, 1.3);
  claystroke(0.42, 472, 526, MASS, 1.1);
  claystroke(0.56, 492, 508, MASS, 0.9);
  claystroke(0.93, 430, 560, SHADE, 1.2);
  for (let i = 0; i < 5; i++) {
    const a = constrain(randomGaussian(0.2, 0.11), 0.06, 0.44);
    const y0 = constrain(randomGaussian(426, 52), 380, 510);
    const y1 = constrain(y0 + randomGaussian(126, 40), 468, 600);
    claystroke(a, y0, y1, i % 3 === 0 ? INK : SHADE, max(0.9, randomGaussian(1.5, 0.4)));
  }
  brush.noField();

  // the handle: off the neck, out into the light, back down onto the belly.
  // drawn as a thrown line, not a slab — two thin passes with a gap of paper between.
  brush.noFill();
  brush.set("2B", SHADE, 2.0);
  brush.beginShape(0.55);
  brush.vertex(JUG_CX + 30, 364);
  brush.vertex(JUG_CX + 84, 380);
  brush.vertex(JUG_CX + 114, 426);
  brush.vertex(JUG_CX + 106, 474);
  brush.vertex(JUG_CX + 82, 500);
  brush.endShape(false);
  brush.set("2B", INK, 1.5);
  brush.beginShape(0.55);
  brush.vertex(JUG_CX + 36, 371);
  brush.vertex(JUG_CX + 78, 390);
  brush.vertex(JUG_CX + 100, 428);
  brush.vertex(JUG_CX + 94, 468);
  brush.vertex(JUG_CX + 76, 496);
  brush.endShape(false);
  // the lower return landing on the belly, and the upper root gripping the neck
  brush.set("2B", INK, 1.7);
  brush.line(JUG_CX + 78, 498, JUG_CX + 64, 506);
  brush.line(JUG_CX + 31, 363, JUG_CX + 42, 372);
  brush.set("cpencil", SHADE, 1.3);
  brush.line(JUG_CX + 88, 404, JUG_CX + 76, 396);
  brush.line(JUG_CX + 96, 452, JUG_CX + 86, 446);

  // --- last darks: the contour, drawn broken so the lit side breathes
  brush.field("hand");
  brush.set("charcoal", INK, 1.6);
  brush.beginShape(0.42);
  brush.vertex(JUG_CX - 40, 334);
  brush.vertex(JUG_CX - 32, 364);
  brush.vertex(JUG_CX - 53, 389);
  brush.vertex(JUG_CX - 74, 419);
  brush.vertex(JUG_CX - 88, 451);
  brush.vertex(JUG_CX - 94, 484);
  brush.vertex(JUG_CX - 88, 518);
  brush.vertex(JUG_CX - 76, 552);
  brush.vertex(JUG_CX - 58, 600);
  brush.vertex(JUG_CX - 50, 612);
  brush.endShape(false);
  // a fine pass over the same run: charcoal at this scale lays down beads, and the
  // pencil is what ties them back into a drawn line
  brush.set("2B", INK, 1.0);
  brush.beginShape(0.42);
  brush.vertex(JUG_CX - 39, 336);
  brush.vertex(JUG_CX - 31, 365);
  brush.vertex(JUG_CX - 52, 390);
  brush.vertex(JUG_CX - 73, 420);
  brush.vertex(JUG_CX - 87, 452);
  brush.vertex(JUG_CX - 93, 485);
  brush.vertex(JUG_CX - 87, 519);
  brush.vertex(JUG_CX - 75, 553);
  brush.vertex(JUG_CX - 57, 601);
  brush.endShape(false);
  brush.set("2B", INK, 1.3);
  brush.beginShape(0.42);
  brush.vertex(JUG_CX - 89, 456);
  brush.vertex(JUG_CX - 95, 488);
  brush.vertex(JUG_CX - 89, 520);
  brush.endShape(false);
  // the lit contour: present, but broken and lighter, so the light side breathes
  brush.set("2B", SHADE, 1.5);
  brush.beginShape(0.42);
  brush.vertex(JUG_CX + 39, 336);
  brush.vertex(JUG_CX + 32, 363);
  brush.vertex(JUG_CX + 52, 387);
  brush.vertex(JUG_CX + 73, 417);
  brush.vertex(JUG_CX + 87, 448);
  brush.endShape(false);
  brush.set("2B", INK, 1.3);
  brush.beginShape(0.42);
  brush.vertex(JUG_CX + 91, 496);
  brush.vertex(JUG_CX + 85, 528);
  brush.vertex(JUG_CX + 72, 560);
  brush.vertex(JUG_CX + 56, 602);
  brush.vertex(JUG_CX + 50, 612);
  brush.endShape(false);
  brush.noField();

  // the rim, read almost edge-on, and two ticks down the neck
  brush.set("2B", INK, 1.7);
  brush.beginShape(0.85);
  brush.vertex(JUG_CX - 40, 333);
  brush.vertex(JUG_CX - 8, 325);
  brush.vertex(JUG_CX + 39, 335);
  brush.vertex(JUG_CX + 2, 344);
  brush.endShape(true);
  brush.set("2H", SHADE, 1.2);
  brush.line(JUG_CX - 30, 354, JUG_CX + 28, 357);
  brush.line(JUG_CX - 29, 371, JUG_CX + 27, 374);

  // the foot: the darkest note in the picture, where clay meets table
  wash(JUG_CX - 26, 608, 20, INK, 215, 0.16, 0.24);
  wash(JUG_CX + 16, 610, 16, INK, 190, 0.18, 0.26);
  wash(JUG_CX - 4, 614, 13, INK, 170, 0.2, 0.28);
  brush.noFill();
  brush.set("charcoal", INK, 1.8);
  brush.beginShape(0.5);
  brush.vertex(JUG_CX - 54, 606);
  brush.vertex(JUG_CX - 14, 616);
  brush.vertex(JUG_CX + 30, 614);
  brush.vertex(JUG_CX + 52, 604);
  brush.endShape(false);

  // the one warm note: old glaze breathing through on the lit shoulder. rationed and
  // dissolved — at any real opacity this stops being fired clay and becomes a decal.
  wash(JUG_CX + 44, 414, 34, ACCENT, 86, 0.46, 0.56);
  wash(JUG_CX + 62, 468, 25, ACCENT, 70, 0.48, 0.58);
  wash(JUG_CX + 26, 378, 17, ACCENT, 58, 0.46, 0.56);
  wash(TIN.x1 - 22, TIN.top + 30, 13, ACCENT, 46, 0.48, 0.58);

  // two marks in the cloth far out on the empty table, so the right does not go dead
  brush.noFill();
  brush.set("2H", MASS, 1.2);
  brush.line(698, 654, 754, 657);
  brush.set("2H", SHADE, 0.9);
  brush.flowLine(686, 726, 40, 174);
}