Escapement, Begun

// composition: the finished escape wheel right of center, its barely-begun partner overlapping from
// the upper-left; compass construction stays visible under the ink. layering: graphite circles and
// radial ticks first, then a brass wash on the finished wheel only, then firm pen teeth, spokes and
// hub over the top — the drawing shows its own scaffolding.
const PALETTE = [
  "#ece7d8", // ground: drafting paper
  "#8b857a", // graphite construction
  "#26241f", // pen ink
  "#b9913f", // accent: brass wash
];

const GRAPHITE = "#8b857a";
const INK = "#26241f";

const GX = 486;
const GY = 452;
const GR = 150;
const HX = 310;
const HY = 244;
const HR = 116;

function handCircle(cx, cy, r, wob) {
  brush.beginShape(0.9);
  for (let i = 0; i <= 14; i++) {
    const a = i * (360 / 14) + random(-2, 2);
    const rr = r * (1 + randomGaussian(0, wob));
    brush.vertex(cx + cos(a) * rr, cy + sin(a) * rr);
  }
  brush.endShape(true);
}

function construction(cx, cy, r, nTicks) {
  brush.noFill();
  brush.set("2H", GRAPHITE, 0.85);
  handCircle(cx, cy, r, 0.008);
  handCircle(cx, cy, r * 0.9, 0.01);
  brush.set("2H", GRAPHITE, 0.6);
  handCircle(cx, cy, r * 1.12, 0.012);
  // center cross
  brush.line(cx - 14, cy + random(-1, 1), cx + 14, cy + random(-1, 1));
  brush.line(cx + random(-1, 1), cy - 14, cx + random(-1, 1), cy + 14);
  // radial ticks
  for (let i = 0; i < nTicks; i++) {
    const a = i * (360 / nTicks) + random(-1.2, 1.2);
    brush.set("2H", GRAPHITE, random(0.45, 0.7));
    brush.line(
      cx + cos(a) * r * 0.86, cy + sin(a) * r * 0.86,
      cx + cos(a) * r * 1.16, cy + sin(a) * r * 1.16
    );
  }
}

function toothRing(cx, cy, r, i0, i1, nTeeth) {
  for (let i = i0; i < i1; i++) {
    const a = i * (360 / nTeeth) + random(-0.8, 0.8);
    brush.vertex(cx + cos(a) * r * 1.12, cy + sin(a) * r * 1.12);
    brush.vertex(cx + cos(a + 12.5) * r * 0.9, cy + sin(a + 12.5) * r * 0.9);
    brush.vertex(cx + cos(a + 18.8) * r * 0.9, cy + sin(a + 18.8) * r * 0.9);
  }
}

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

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

  // the line of centers, extended past both wheels
  const dx = GX - HX;
  const dy = GY - HY;
  const m = sqrt(dx * dx + dy * dy);
  const ux = dx / m;
  const uy = dy / m;
  brush.noFill();
  brush.set("2H", GRAPHITE, 0.7);
  brush.line(HX - ux * 190, HY - uy * 190, GX + ux * 220, GY + uy * 220);

  construction(HX, HY, HR, 15);
  construction(GX, GY, GR, 18);

  // brass wash inside the finished wheel only
  brush.noStroke();
  brush.fillBleed(0.4, "out");
  brush.fillTexture(0.55, 0.6);
  brush.fill("#b9913f", 58);
  handCircle(GX + 4, GY + 3, GR * 0.9, 0.02);
  brush.fill("#b9913f", 40);
  handCircle(GX - 3, GY + 6, GR * 0.82, 0.03);
  brush.fill("#a07a30", 46);
  handCircle(GX + 2, GY - 2, GR * 0.3, 0.04);

  // the finished wheel: a full ring of pen saw-teeth on the construction circles
  brush.noFill();
  brush.set("rotring", INK, 0.9);
  brush.beginShape(0.25);
  toothRing(GX, GY, GR, 0, 18, 18);
  brush.endShape(true);

  // rim, hub and five spokes in pen
  brush.set("rotring", INK, 0.8);
  handCircle(GX, GY, GR * 0.86, 0.006);
  brush.set("rotring", INK, 0.9);
  handCircle(GX, GY, 30, 0.02);
  brush.set("rotring", INK, 0.7);
  handCircle(GX, GY, 9, 0.05);
  for (let k = 0; k < 5; k++) {
    const b = k * 72 + 12 + random(-2, 2);
    for (const off of [-4, 4]) {
      brush.set("rotring", INK, 0.75);
      brush.line(
        GX + cos(b + off) * 32, GY + sin(b + off) * 32,
        GX + cos(b + off * 0.4) * GR * 0.85, GY + sin(b + off * 0.4) * GR * 0.85
      );
    }
  }

  // the partner, only begun: five pen teeth on the arc facing its mate, then nothing
  brush.noFill();
  brush.set("rotring", INK, 0.85);
  brush.beginShape(0.25);
  toothRing(HX, HY, HR, 1, 6, 18);
  brush.endShape(false);
  // two more teeth only guessed at in graphite
  brush.set("2H", GRAPHITE, 0.8);
  brush.beginShape(0.25);
  toothRing(HX, HY, HR, 6, 8, 18);
  brush.endShape(false);
  // a short pen rim arc under the begun teeth
  brush.set("rotring", INK, 0.7);
  brush.beginShape(0.6);
  for (let i = 0; i <= 6; i++) {
    const a = lerp(16, 128, i / 6);
    brush.vertex(HX + cos(a) * HR * 0.86, HY + sin(a) * HR * 0.86);
  }
  brush.endShape(false);
  // its center, marked but uncommitted
  brush.set("rotring", INK, 0.8);
  brush.line(HX - 6, HY, HX + 6, HY + random(-1, 1));
  brush.line(HX, HY - 6, HX + random(-1, 1), HY + 6);
}