Ginkgo Drift

// composition: a diagonal drift of ginkgo fans falls from the upper-right thirds crossing down to the lower-left,
// where a few already lie flat on the ground; the upper-left and lower-right corners stay bare gold paper.
// layering: broad pale gold-ground pools, the bare twig, thin drift leaves, fallen leaves, then the dense
// focal cluster painted last and darkest, with stalks and vein rays as the final ink marks.
const PALETTE = [
  "#ece0bd", // ground — warm gold-leaf paper
  "#d9a51f", // mass — ginkgo yellow, the dominant note
  "#7d5409", // shadow — amber deepening under the overlaps
  "#6d7733", // foil — olive, the leaves that have not turned yet
  "#93401d", // accent — rust, rationed to a few over-turned fans
  "#3b3226", // ink — near-black stalks, veins, twig
];

// ---------------------------------------------------------------- pigment

// dominant yellow drifting toward amber; greenBias is left as a dial for anyone remixing —
// in this painting the olive and rust fans are placed by hand instead of drawn by lottery
function leafPigment(greenBias) {
  if (random() < greenBias) {
    return lerpColor(color(PALETTE[3]), color(PALETTE[2]), constrain(randomGaussian(0.34, 0.24), 0, 1));
  }
  return lerpColor(color(PALETTE[1]), color(PALETTE[2]), constrain(randomGaussian(0.46, 0.28), 0, 1));
}

// ---------------------------------------------------------------- the fan

// a ginkgo blade: base point, a wide arc of edge, a notch dipping into the middle.
// returns the rim so veins and stalks can hang off the same geometry.
function fanRim(x, y, ang, r, spread) {
  const notch = constrain(randomGaussian(0.3, 0.05), 0.16, 0.44);
  const half = spread / 2;
  const rim = [];
  const at = (a, rr) => rim.push([x + Math.cos(a) * rr, y + Math.sin(a) * rr]);
  // up the first radial edge, so the wedge keeps its corners
  at(ang - half * 0.96, r * 0.56 * randomGaussian(1, 0.05));
  at(ang - half, r * 0.79 * randomGaussian(1, 0.05));
  const n = 8;
  for (let i = 0; i <= n; i++) {
    const t = i / n;
    const u = 1 - Math.abs(2 * t - 1);
    const rr = r * (1 - notch * Math.pow(u, 1.2)) * randomGaussian(1, 0.045);
    at(ang + (t - 0.5) * spread + randomGaussian(0, 0.02), rr);
  }
  // and back down the other
  at(ang + half, r * 0.79 * randomGaussian(1, 0.05));
  at(ang + half * 0.96, r * 0.56 * randomGaussian(1, 0.05));
  return rim;
}

function blade(x, y, rim, scale, curve) {
  brush.beginShape(curve);
  brush.vertex(x, y);
  for (const p of rim) brush.vertex(x + (p[0] - x) * scale, y + (p[1] - y) * scale);
  brush.endShape(true);
}

function fanLeaf(x, y, ang, r, spread, alpha, greenBias, forced) {
  const rim = fanRim(x, y, ang, r, spread);
  brush.noStroke();

  // pigment that ran past the edge before it dried
  brush.fillBleed(0.52, "out");
  brush.fillTexture(0.32, 0.3);
  brush.fill(forced || leafPigment(greenBias * 0.6), Math.max(30, alpha * 0.36));
  blade(x, y, rim, 1.06, 0.45);

  // the blade itself
  brush.fillBleed(0.22, "out");
  brush.fillTexture(0.6, 0.62);
  brush.fill(forced || leafPigment(greenBias), alpha);
  blade(x, y, rim, 1, 0.34);

  // and the pool that gathers back toward the stalk
  brush.fillBleed(0.16, "out");
  brush.fillTexture(0.7, 0.7);
  brush.fill(forced || leafPigment(greenBias * 0.4), alpha * 0.5);
  blade(x, y, rim, 0.56 + random(-0.05, 0.07), 0.4);
  return rim;
}

// stalk trailing back from the base, opposite the fan's opening
function stalk(x, y, ang, len, weight) {
  brush.noFill();
  brush.set("rotring", PALETTE[5], weight);
  const back = ang + Math.PI + randomGaussian(0, 0.1);
  brush.beginShape(0.5);
  brush.vertex(x + Math.cos(ang) * len * 0.12, y + Math.sin(ang) * len * 0.12);
  brush.vertex(x + Math.cos(back) * len * 0.55, y + Math.sin(back) * len * 0.55);
  brush.vertex(x + Math.cos(back + randomGaussian(0, 0.18)) * len, y + Math.sin(back + randomGaussian(0, 0.18)) * len);
  brush.endShape(false);
}

// vein rays: fine, only on the big fans, stopping well short of the rim
function veins(x, y, rim, count, weight) {
  brush.noFill();
  brush.set("2H", PALETTE[2], weight);
  for (let i = 0; i < count; i++) {
    const k = constrain(1 + floor(map(i, 0, count - 1, 1, rim.length - 2) + random(0, 1)), 0, rim.length - 1);
    const p = rim[k];
    const reach = constrain(randomGaussian(0.6, 0.07), 0.38, 0.74);
    brush.line(
      x + (p[0] - x) * 0.1 + random(-1.2, 1.2),
      y + (p[1] - y) * 0.1 + random(-1.2, 1.2),
      x + (p[0] - x) * reach,
      y + (p[1] - y) * reach,
    );
  }
}

// -------------------------------------------------- the drift, placed by hand

// thin leaves strung down the diagonal — smaller, paler, painted first
const DRIFT = [
  [420, 380, 2.1, 46, 2.76, 156],
  [380, 300, 0.34, 30, 2.26, 128],
  [348, 446, 2.7, 36, 2.7, 164],
  [300, 372, 1.42, 15, 2.1, 104],
  [286, 500, 3.15, 44, 2.84, 152],
  [240, 430, 0.9, 24, 2.16, 112],
  [224, 552, 2.44, 34, 2.7, 138],
  [176, 610, 1.6, 30, 2.24, 126],
  [326, 566, -0.7, 22, 2.14, 108],
  [142, 516, 2.9, 20, 2.1, 100],
  [402, 226, -0.9, 26, 2.18, 116],
  [694, 600, 1.1, 21, 2.3, 138],
];

// already down: wider, heavier fans overlapping along the bottom-left, some off the edge
const FALLEN = [
  [112, 706, 3.04, 62, 2.72, 196],
  [206, 734, -2.55, 68, 2.8, 232],
  [300, 706, 3.3, 54, 2.6, 186],
  [46, 754, 2.62, 56, 2.66, 178],
  [366, 752, -2.88, 46, 2.5, 170],
  [164, 772, 0.42, 52, 2.58, 222],
  [254, 660, 2.86, 38, 2.4, 156],
  [96, 796, -1.9, 44, 2.5, 168],
  [420, 784, 2.34, 36, 2.42, 158],
];

// the cluster: dense, dark, crossing the upper-right thirds — painted last
const CLUSTER = [
  [486, 168, 2.45, 58, 2.5, 205],
  [566, 202, -0.62, 76, 2.68, 230],
  [636, 150, 1.2, 48, 2.4, 190],
  [510, 266, 3.3, 88, 2.82, 242],
  [606, 274, 0.42, 54, 2.5, 202],
  [668, 224, 2.2, 44, 2.35, 182],
  [446, 232, -1.1, 46, 2.42, 188],
  [556, 336, 2.86, 66, 2.64, 222],
  [652, 344, 1.7, 40, 2.3, 174],
  [478, 330, 0.85, 50, 2.45, 196],
  [714, 178, -0.42, 38, 2.28, 166],
  [758, 262, 2.6, 42, 2.36, 178],
  [612, 92, 1.9, 40, 2.3, 172],
  [702, 74, 3.0, 34, 2.22, 158],
  [540, 234, 1.62, 46, 2.44, 198],
  [592, 198, 2.94, 42, 2.38, 190],
  [548, 292, -0.28, 48, 2.46, 204],
];

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

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

  // --- gold ground: broad flat pools drifting on the same diagonal
  brush.noStroke();
  brush.fillBleed(0.72, "out");
  brush.fillTexture(0.3, 0.28);
  brush.fill(PALETTE[1], 34);
  brush.circle(600, 244, 216, true);
  brush.fill(PALETTE[2], 22);
  brush.circle(654, 168, 142, true);
  brush.fill(PALETTE[1], 22);
  brush.circle(486, 336, 170, true);
  brush.fill(PALETTE[1], 15);
  brush.circle(336, 476, 148, true);
  brush.fill(PALETTE[1], 12);
  brush.circle(226, 596, 124, true);

  // the damp ground the fallen leaves lie on — one low, wide, olive-shadowed pool
  brush.fillBleed(0.82, "out");
  brush.fill(PALETTE[3], 26);
  brush.circle(168, 736, 198, true);
  brush.fill(PALETTE[3], 16);
  brush.circle(320, 768, 138, true);
  brush.fill(PALETTE[2], 20);
  brush.circle(88, 768, 120, true);

  // --- the twig: four graphite passes laid over each other so it holds the corner
  brush.noFill();
  brush.set("2B", PALETTE[5], 2.6);
  brush.beginShape(0.45);
  brush.vertex(814, 302);
  brush.vertex(744, 248);
  brush.vertex(677, 203);
  brush.vertex(636, 143);
  brush.vertex(619, 57);
  brush.vertex(609, -16);
  brush.endShape(false);
  brush.set("2B", PALETTE[5], 1.9);
  brush.beginShape(0.45);
  brush.vertex(810, 296);
  brush.vertex(740, 243);
  brush.vertex(673, 199);
  brush.vertex(632, 140);
  brush.vertex(616, 56);
  brush.vertex(606, -14);
  brush.endShape(false);
  brush.set("charcoal", PALETTE[5], 1.5);
  brush.beginShape(0.45);
  brush.vertex(818, 306);
  brush.vertex(748, 252);
  brush.vertex(681, 207);
  brush.vertex(640, 146);
  brush.vertex(623, 59);
  brush.endShape(false);
  brush.set("2B", PALETTE[5], 1.3);
  brush.beginShape(0.5);
  brush.vertex(678, 203);
  brush.vertex(620, 221);
  brush.vertex(564, 211);
  brush.endShape(false);
  brush.set("2B", PALETTE[5], 0.95);
  brush.beginShape(0);
  brush.vertex(636, 145);
  brush.vertex(580, 160);
  brush.endShape(false);

  // --- the drift: thin leaves down the diagonal, back-to-front
  for (let i = 0; i < DRIFT.length; i++) {
    const L = DRIFT[i];
    const olive = i === 2 ? PALETTE[3] : null;
    fanLeaf(L[0], L[1], L[2], L[3], L[4], olive ? 176 : L[5] + random(-12, 14), 0, olive);
    if (L[3] > 28) stalk(L[0], L[1], L[2], L[3] * 0.4, 0.7);
  }

  // what the fallen leaves cast into the wet ground, offset down and right
  brush.noStroke();
  brush.fillBleed(0.46, "out");
  brush.fillTexture(0.4, 0.38);
  brush.fill(PALETTE[2], 54);
  brush.circle(146, 726, 52, true);
  brush.fill(PALETTE[2], 46);
  brush.circle(232, 752, 46, true);
  brush.fill(PALETTE[3], 40);
  brush.circle(318, 724, 38, true);
  brush.fill(PALETTE[2], 34);
  brush.circle(76, 770, 34, true);

  // --- the fallen: flat on the ground, warmer and heavier
  for (let i = 0; i < FALLEN.length; i++) {
    const L = FALLEN[i];
    const sunk = i === 1 || i === 5 ? PALETTE[2] : i === 6 ? PALETTE[3] : null;
    const rim = fanLeaf(L[0], L[1], L[2], L[3], L[4], L[5] + 14 + random(-14, 16), 0, sunk);
    stalk(L[0], L[1], L[2], L[3] * 0.38, 0.8);
    if (L[3] > 50) veins(L[0], L[1], rim, 5, 0.65);
  }

  // one fan gone over to rust where the ground meets the drift — stated twice to hold
  fanLeaf(250, 622, 2.3, 44, 2.6, 210, 0, PALETTE[4]);
  fanLeaf(252, 624, 2.34, 40, 2.5, 190, 0, PALETTE[4]);
  stalk(250, 622, 2.3, 26, 0.8);

  // the shade the cluster casts into itself, laid down before the blades
  brush.noStroke();
  brush.fillBleed(0.5, "out");
  brush.fillTexture(0.42, 0.4);
  brush.fill(PALETTE[2], 66);
  brush.circle(524, 248, 62, true);
  brush.fill(PALETTE[2], 58);
  brush.circle(578, 306, 54, true);
  brush.fill(PALETTE[2], 48);
  brush.circle(614, 208, 46, true);
  brush.fill(PALETTE[3], 44);
  brush.circle(486, 306, 42, true);
  brush.fill(PALETTE[2], 40);
  brush.circle(664, 252, 38, true);

  // --- the cluster, dense and dark, over the thirds crossing
  for (let i = 0; i < CLUSTER.length; i++) {
    const L = CLUSTER[i];
    const rust = i === 4 ? PALETTE[4] : i === 7 ? PALETTE[2] : i === 2 ? PALETTE[3] : null;
    if (rust) fanLeaf(L[0], L[1], L[2], L[3] * 0.96, L[4], 200, 0, rust);
    const rim = fanLeaf(L[0], L[1], L[2], L[3], L[4], L[5] + random(-14, 16), 0, rust);
    stalk(L[0], L[1], L[2], L[3] * 0.42, 0.85);
    if (L[3] >= 48) veins(L[0], L[1], rim, L[3] > 66 ? 7 : 5, 0.68);
  }

  // --- last darks: three fans re-stated in deep amber where the cluster is thickest
  brush.noStroke();
  brush.fillBleed(0.18, "out");
  brush.fillTexture(0.72, 0.66);
  brush.fill(PALETTE[2], 132);
  blade(510, 266, fanRim(510, 266, 3.3, 58, 2.36), 1, 0.34);
  brush.fill(PALETTE[2], 118);
  blade(556, 336, fanRim(556, 336, 2.86, 42, 2.22), 1, 0.34);
  brush.fill(PALETTE[2], 108);
  blade(566, 202, fanRim(566, 202, -0.62, 40, 2.2), 1, 0.34);
  brush.fill(PALETTE[2], 118);
  blade(206, 734, fanRim(206, 734, -2.55, 40, 2.3), 1, 0.34);

  // ink hooks where the stalks bunch at the twig
  brush.noFill();
  brush.set("rotring", PALETTE[5], 0.95);
  brush.line(566, 214, 540, 240);
  brush.line(576, 212, 584, 246);
  brush.line(618, 224, 606, 254);
  brush.line(580, 160, 560, 182);
  brush.noStroke();
  brush.fillBleed(0.14, "out");
  brush.fillTexture(0.75, 0.75);
  brush.fill(PALETTE[2], 150);
  brush.circle(512, 268, 9, true);
  brush.fill(PALETTE[2], 138);
  brush.circle(566, 204, 7.5, true);
  brush.fill(PALETTE[5], 120);
  brush.circle(558, 336, 5.5, true);
  brush.fill(PALETTE[2], 132);
  brush.circle(208, 734, 7, true);
}