Load Path

// composition: a steel boom climbs from off the lower-left edge to off the upper-right; the members
// that carry the load are drawn heaviest, and everything above the top chord is left as bare sky.
// layering: pale steel haze and ballast washes, hatched gusset plates, then ties and struts weighted
// by the force they take, with the iron darks, the red-oxide plate and the rivets struck last.
const PALETTE = [
  "#e9e4d9", // paper — the empty sky
  "#8f9498", // pale steel, haze and idle members
  "#4a5257", // steel, the working mass
  "#20262a", // iron, the load path
  "#b23a24", // red oxide, the accent
];

// the boom: bottom chord from A to Z, both ends running off the paper
const A = [-52, 748];
const Z = [856, 206];
const NX = 0.5125; // unit normal to the boom, pointing downhill
const NY = 0.8586;

// panel points, deliberately uneven — a truss is repetitive, a drawing of one need not be
const TS = [0, 0.085, 0.185, 0.275, 0.375, 0.47, 0.58, 0.685, 0.795, 0.895, 1];
// depth follows the bending moment: deep over the support, shallow at the tip
const DEPTH = [150, 147, 141, 134, 127, 118, 108, 99, 91, 83, 74];

let B = null; // bottom chord nodes
let T = null; // top chord nodes

function buildNodes() {
  B = [];
  T = [];
  for (let i = 0; i < TS.length; i++) {
    const t = TS[i];
    const bx = A[0] + (Z[0] - A[0]) * t + randomGaussian(0, 2.4);
    const by = A[1] + (Z[1] - A[1]) * t + randomGaussian(0, 2.4);
    const d = DEPTH[i] + randomGaussian(0, 3.2);
    B.push([bx, by]);
    T.push([bx - NX * d + randomGaussian(0, 2), by - NY * d + randomGaussian(0, 2)]);
  }
}

// a point measured along the boom, offset perpendicular — positive is below the bottom chord
function onBoom(t, off) {
  return [
    A[0] + (Z[0] - A[0]) * t + NX * off,
    A[1] + (Z[1] - A[1]) * t + NY * off,
  ];
}

// a long soft stroke lying parallel to the boom: the tone under the load
function tone(t0, t1, off0, off1, col, w) {
  const p = onBoom(t0, off0 + randomGaussian(0, 3));
  const q = onBoom(t1, off1 + randomGaussian(0, 3));
  brush.set("spray", col, w);
  brush.line(p[0], p[1], q[0], q[1]);
}

// force in, colour out — the harder a member works, the darker and blacker its mark
function inkFor(f) {
  if (f > 0.72) return random() < 0.84 ? "#20262a" : "#4a5257";
  if (f > 0.42) return random() < 0.68 ? "#4a5257" : "#20262a";
  if (f > 0.18) return random() < 0.76 ? "#4a5257" : "#8f9498";
  return "#8f9498";
}

function brushFor(f) {
  if (f > 0.72) return random() < 0.55 ? "charcoal" : "2B";
  if (f > 0.42) return random() < 0.8 ? "2B" : "charcoal";
  if (f > 0.18) return random() < 0.5 ? "HB" : "2B";
  return random() < 0.6 ? "2H" : "pen";
}

// tension member: one axis, redrawn as many times as the load it carries, overshooting the node
function tie(a, b, f) {
  const passes = f > 0.8 ? 4 : f > 0.55 ? 3 : f > 0.25 ? 2 : 1;
  const ang = atan2(b[1] - a[1], b[0] - a[0]);
  const px = -sin(ang);
  const py = cos(ang);
  const over = 3 + 10 * f;
  for (let k = 0; k < passes; k++) {
    const s = randomGaussian(0, 0.65 + 1.7 * f);
    const e0 = over * random(0.15, 1);
    const e1 = over * random(0.15, 1);
    brush.set(brushFor(f), inkFor(f), max(0.32, 0.42 + 2.15 * f + randomGaussian(0, 0.14)));
    brush.line(
      a[0] - cos(ang) * e0 + px * s + randomGaussian(0, 1.2),
      a[1] - sin(ang) * e0 + py * s + randomGaussian(0, 1.2),
      b[0] + cos(ang) * e1 + px * s + randomGaussian(0, 1.2),
      b[1] + sin(ang) * e1 + py * s + randomGaussian(0, 1.2)
    );
  }
}

// compression member: a built-up box section — two flanges with lacing zigzagged between them
function strut(a, b, f) {
  if (f < 0.24) {
    tie(a, b, f);
    return;
  }
  const ang = atan2(b[1] - a[1], b[0] - a[0]);
  const px = -sin(ang);
  const py = cos(ang);
  const half = 1.8 + 6.2 * f;
  const flange = f * 0.72;
  for (const side of [-1, 1]) {
    const passes = f > 0.7 ? 2 : 1;
    for (let k = 0; k < passes; k++) {
      const s = half * side + randomGaussian(0, 0.8);
      brush.set(brushFor(flange), inkFor(flange), max(0.3, 0.4 + 1.5 * f + randomGaussian(0, 0.12)));
      brush.line(
        a[0] + px * s + randomGaussian(0, 1.4),
        a[1] + py * s + randomGaussian(0, 1.4),
        b[0] + px * s + randomGaussian(0, 1.4),
        b[1] + py * s + randomGaussian(0, 1.4)
      );
    }
  }
  const n = 3 + floor(f * 5);
  brush.set("2H", "#4a5257", 0.55 + 0.5 * f);
  for (let i = 0; i < n; i++) {
    const u0 = 0.06 + (i / n) * 0.88;
    const u1 = u0 + 0.88 / n;
    const s0 = half * (i % 2 === 0 ? -1 : 1) * 0.86;
    const s1 = half * (i % 2 === 0 ? 1 : -1) * 0.86;
    brush.line(
      lerp(a[0], b[0], u0) + px * s0,
      lerp(a[1], b[1], u0) + py * s0,
      lerp(a[0], b[0], u1) + px * s1 + randomGaussian(0, 1.1),
      lerp(a[1], b[1], u1) + py * s1 + randomGaussian(0, 1.1)
    );
  }
}

// a member considered and not used: the alternate path, ghosted
function ghost(a, b) {
  brush.set("2H", "#8f9498", 0.38 + random(0, 0.16));
  brush.line(
    a[0] + randomGaussian(0, 2), a[1] + randomGaussian(0, 2),
    b[0] + randomGaussian(0, 2), b[1] + randomGaussian(0, 2)
  );
}

function rivets(p, r, n, col) {
  brush.noStroke();
  brush.fillBleed(0.2, "out");
  for (let i = 0; i < n; i++) {
    const a = randomGaussian(i * (360 / n), 12);
    const rr = r * (0.58 + random(0, 0.24));
    brush.fill(col, 165 + random(-30, 55));
    brush.circle(p[0] + cos(a) * rr, p[1] + sin(a) * rr, 1.5 + random(0, 1.3), true);
  }
}

// the plate that gathers the members at a node, hatched like a section
function gusset(p, r, f, red) {
  const pts = [];
  const a0 = random(0, 60);
  for (let i = 0; i < 6; i++) {
    const a = a0 + i * 60 + randomGaussian(0, 8);
    const rr = r * (1 + randomGaussian(0, 0.1));
    pts.push([p[0] + cos(a) * rr, p[1] + sin(a) * rr]);
  }
  brush.noStroke();
  brush.noHatch();
  brush.fillBleed(0.3, "out");
  brush.fillTexture(0.6, 0.6);
  brush.fill(red ? "#b23a24" : "#4a5257", red ? 158 : 104 + random(0, 30));
  brush.polygon(pts);
  brush.noFill();
  brush.hatchStyle("2H", red ? "#20262a" : "#20262a", red ? 1.15 : 0.95);
  brush.hatch(2.7 + random(0, 1.4), a0 + 38 + randomGaussian(0, 6), { rand: 0.1, continuous: false });
  brush.polygon(pts);
  brush.noHatch();
  brush.set("HB", red ? "#20262a" : "#20262a", 0.7 + 0.9 * f);
  brush.beginShape(0.05);
  for (let i = 0; i < pts.length; i++) brush.vertex(pts[i][0], pts[i][1]);
  brush.endShape(true);
  rivets(p, r * 0.72, red ? 7 : 4 + floor(f * 3), red ? "#20262a" : "#4a5257");
}

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

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

  // 1 — tone under the boom: soft grey lying along the working span, nothing above it
  for (let i = 0; i < 14; i++) {
    const t0 = constrain(randomGaussian(0.1, 0.12), -0.04, 0.44);
    const t1 = t0 + max(0.09, randomGaussian(0.24, 0.1));
    const off = randomGaussian(21, 12);
    tone(t0, t1, off, off + randomGaussian(0, 8), random() < 0.72 ? "#8f9498" : "#4a5257", max(1.9, randomGaussian(4.2, 1.1)));
  }
  tone(0.0, 0.4, 13, 34, "#8f9498", 6.6);
  tone(0.05, 0.29, 44, 30, "#4a5257", 4.4);
  tone(0.18, 0.48, -7, 4, "#8f9498", 2.8);
  tone(0.34, 0.55, 15, 9, "#8f9498", 2.1);

  // 2 — the ground the pier stands in: pooled pigment, no drawn edge
  brush.noStroke();
  brush.fillBleed(0.34, "out");
  brush.fillTexture(0.6, 0.35);
  brush.fill("#4a5257", 158);
  brush.circle(104, 790, 82, true);
  brush.fill("#4a5257", 132);
  brush.circle(206, 804, 64, true);
  brush.fill("#20262a", 124);
  brush.circle(44, 796, 58, true);
  brush.fill("#8f9498", 92);
  brush.circle(272, 812, 44, true);
  // the line the pier stands on
  brush.set("charcoal", "#20262a", 2.8);
  brush.line(28, 786, 168, 798);
  brush.set("2B", "#4a5257", 1.9);
  brush.line(150, 800, 286, 812);
  brush.set("spray", "#20262a", 8.4);
  brush.line(-16, 788, 196, 802);
  brush.set("spray", "#4a5257", 5.4);
  brush.line(74, 768, 262, 798);
  brush.set("spray", "#8f9498", 3.2);
  brush.line(212, 786, 330, 812);

  // 3 — the pier, cropped by the bottom edge: everything above it ends up here
  brush.noStroke();
  brush.noHatch();
  brush.fillBleed(0.32, "out");
  brush.fillTexture(0.62, 0.4);
  brush.fill("#4a5257", 168);
  brush.circle(130, 712, 42, true);
  brush.fill("#20262a", 140);
  brush.circle(146, 772, 38, true);
  brush.noFill();
  const PIER = [[100, 640], [170, 666], [188, 816], [84, 816]];
  brush.hatchStyle("2B", "#20262a", 1.6);
  brush.hatch(3.0, 41, { rand: 0.16, continuous: false });
  brush.polygon(PIER);
  brush.hatchStyle("HB", "#4a5257", 1.1);
  brush.hatch(4.2, -46, { rand: 0.2, continuous: false });
  brush.polygon(PIER);
  brush.noHatch();
  brush.set("charcoal", "#20262a", 2.6);
  brush.line(98, 638, 172, 668);
  brush.line(176, 674, 190, 818);
  brush.line(120, 700, 132, 818);
  brush.set("2B", "#20262a", 1.6);
  brush.line(86, 818, 98, 646);
  brush.line(150, 690, 160, 812);
  // bearing shoe: the whole boom arrives here
  brush.set("charcoal", "#20262a", 3.1);
  brush.line(96, 646, 174, 672);
  brush.set("2B", "#20262a", 1.9);
  brush.line(128, 634, 136, 682);
  // rakers: the reaction thrown back into the pier
  tie([116, 650], [166, 742], 0.78);
  tie([198, 600], [176, 700], 0.64);
  tie([92, 700], [178, 664], 0.34);

  // 4 — a datum line and its ticks, laid faint below the span
  brush.set("pen", "#8f9498", 0.68);
  brush.line(216, 758, 566, 552);
  brush.set("2H", "#8f9498", 0.55);
  brush.line(258, 690, 262, 736);
  brush.line(348, 638, 352, 682);
  brush.line(444, 584, 448, 626);
  brush.line(540, 528, 544, 570);

  // 5 — plates at the working nodes, biggest where the load turns
  gusset(B[2], 19, 0.8, false);
  gusset(B[3], 21, 0.9, false);
  gusset(B[4], 25, 1.0, true);
  gusset(T[3], 17, 0.7, false);
  gusset(T[4], 15, 0.6, false);
  gusset(B[6], 13, 0.45, false);
  gusset(T[6], 11, 0.35, false);
  gusset(B[8], 9, 0.24, false);

  // 6 — the paths not taken: counter-diagonals, drawn and left idle
  ghost(B[1], T[2]);
  ghost(B[2], T[3]);
  ghost(B[5], T[6]);
  ghost(T[7], B[8]);
  ghost(B[4], T[6]);

  // 7 — bottom chord in tension, heaviest where it hangs from the support
  tie(B[0], B[1], 0.62);
  tie(B[1], B[2], 0.88);
  tie(B[2], B[3], 0.96);
  tie(B[3], B[4], 1.0);
  tie(B[4], B[5], 0.85);
  tie(B[5], B[6], 0.68);
  tie(B[6], B[7], 0.56);
  tie(B[7], B[8], 0.44);
  tie(B[8], B[9], 0.33);
  tie(B[9], B[10], 0.24);

  // 8 — top chord in compression, laced box sections thinning toward the tip
  strut(T[0], T[1], 0.48);
  strut(T[1], T[2], 0.74);
  strut(T[2], T[3], 0.82);
  strut(T[3], T[4], 0.9);
  strut(T[4], T[5], 0.7);
  strut(T[5], T[6], 0.56);
  strut(T[6], T[7], 0.44);
  strut(T[7], T[8], 0.34);
  strut(T[8], T[9], 0.27);
  strut(T[9], T[10], 0.2);

  // 9 — posts, holding the two chords apart
  tie(B[0], T[0], 0.32);
  tie(B[1], T[1], 0.5);
  tie(B[2], T[2], 0.42);
  tie(B[3], T[3], 0.58);
  tie(B[4], T[4], 0.4);
  tie(B[5], T[5], 0.28);
  tie(B[6], T[6], 0.24);
  tie(B[7], T[7], 0.2);
  tie(B[8], T[8], 0.17);
  tie(B[9], T[9], 0.14);
  tie(B[10], T[10], 0.07);

  // 10 — diagonals, all leaning back toward the support where the shear is worst
  tie(T[0], B[1], 0.66);
  tie(T[1], B[2], 0.92);
  tie(T[2], B[3], 0.8);
  tie(T[3], B[4], 0.68);
  tie(T[4], B[5], 0.54);
  tie(T[5], B[6], 0.43);
  tie(T[6], B[7], 0.36);
  tie(T[7], B[8], 0.3);
  tie(T[8], B[9], 0.24);
  tie(T[9], B[10], 0.19);

  // 11 — the load path struck once more in iron, one long gesture through the panel points
  brush.noFill();
  brush.set("charcoal", "#20262a", 2.05);
  brush.beginShape(0.06);
  brush.vertex(B[0][0], B[0][1] + 1.4);
  brush.vertex(B[1][0], B[1][1] - 0.8);
  brush.vertex(B[2][0], B[2][1] + 1.1);
  brush.vertex(B[3][0], B[3][1] - 1.2);
  brush.vertex(B[4][0], B[4][1] + 0.9);
  brush.vertex(B[5][0], B[5][1] - 0.6);
  brush.vertex(B[6][0], B[6][1] + 0.7);
  brush.endShape(false);
  brush.set("2B", "#4a5257", 1.15);
  brush.beginShape(0.06);
  brush.vertex(T[1][0], T[1][1] + 0.9);
  brush.vertex(T[2][0], T[2][1] - 1.1);
  brush.vertex(T[3][0], T[3][1] + 1.2);
  brush.vertex(T[4][0], T[4][1] - 0.9);
  brush.vertex(T[5][0], T[5][1] + 0.8);
  brush.vertex(T[7][0], T[7][1] - 0.7);
  brush.endShape(false);

  // 12 — red oxide where the plates were primed and never painted over
  brush.set("marker", "#b23a24", 2.4);
  brush.line(B[3][0] + 8, B[3][1] - 5, B[4][0] - 10, B[4][1] + 1);
  brush.set("2B", "#b23a24", 1.8);
  brush.line(B[3][0] + 11, B[3][1] - 3, B[4][0] - 13, B[4][1] + 3);
  brush.set("marker", "#b23a24", 1.7);
  brush.line(B[3][0] + 6, B[3][1] - 8, B[4][0] - 8, B[4][1] - 2);
  brush.set("charcoal", "#b23a24", 1.5);
  brush.line(T[3][0] + 5, T[3][1] + 7, B[4][0] - 6, B[4][1] - 14);
  brush.set("pen", "#b23a24", 0.85);
  brush.line(B[6][0] - 5, B[6][1] + 6, B[6][0] + 18, B[6][1] - 6);
  rivets(B[4], 31, 5, "#b23a24");
  brush.noStroke();
  brush.fillBleed(0.28, "out");
  brush.fill("#b23a24", 132);
  brush.circle(B[2][0] - 13, B[2][1] + 14, 5.4, true);
  brush.fill("#b23a24", 96);
  brush.circle(146, 736, 4.4, true);

  // 13 — last darks: the reaction at the pier, and the tip barely touched
  brush.set("charcoal", "#20262a", 2.4);
  brush.line(B[2][0] - 14, B[2][1] - 6, B[2][0] + 22, B[2][1] + 16);
  brush.set("2B", "#20262a", 1.7);
  brush.line(B[2][0] + 4, B[2][1] + 12, 132, 648);
  brush.set("spray", "#4a5257", 3.1);
  brush.line(B[2][0] + 8, B[2][1] + 13, B[3][0] + 6, B[3][1] + 11);
  brush.line(B[3][0] + 7, B[3][1] + 12, B[4][0] + 5, B[4][1] + 10);
  brush.set("spray", "#8f9498", 2.4);
  brush.line(B[4][0] + 6, B[4][1] + 11, B[5][0] + 4, B[5][1] + 9);
  rivets(B[3], 17, 6, "#20262a");
  rivets(B[5], 12, 5, "#20262a");
  rivets(T[2], 13, 4, "#20262a");
  brush.set("2H", "#8f9498", 0.42);
  brush.line(T[10][0] - 26, T[10][1] + 8, 812, 176);
}