Eight Nights

// composition: eight moons drift on an irregular diagonal from the lower-left corner to the upper-right,
// waxing as they climb; the one full moon burns gold just past center. layering: night ground and haze,
// star specks, each moon as stacked bone washes with its shadow carved in ground-color, the gold moon and halo last.
const PALETTE = [
  "#101a33", // deep night blue ground
  "#1c2947", // lifted night haze
  "#e6ded0", // bone moonlight
  "#c9c2b2", // shadowed bone
  "#d9a441", // the one gold full moon
];

// side: -1 shadow carves from the left (waxing), +1 from the right (waning)
// f: overlay offset factor — small leaves a sliver, large only clips the edge
function moon(x, y, r, f, side) {
  brush.noStroke();
  brush.fillBleed(0.5, "out");
  brush.fillTexture(0.4, 0.5);
  brush.fill(PALETTE[2], 148);
  brush.circle(x, y, r, true);
  brush.fill(PALETTE[3], 104);
  brush.circle(x - side * r * 0.14, y + random(-2, 2), r * 0.78, true);
  // carve the shadow with the ground itself, twice, so the edge stays wet
  brush.fillBleed(0.42, "out");
  brush.fill(PALETTE[0], 212);
  brush.circle(x + side * f * r, y - r * 0.08 + random(-2, 2), r * 1.04, true);
  brush.fill(PALETTE[0], 126);
  brush.circle(x + side * f * r + random(-2, 2), y - r * 0.06, r * 0.98, true);
}

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

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

  // night haze, lifting two corners so the dark breathes
  brush.noStroke();
  brush.fillBleed(0.7, "out");
  brush.fillTexture(0.3, 0.4);
  brush.fill(PALETTE[1], 62);
  brush.circle(160, 200, 240, true);
  brush.fill(PALETTE[1], 54);
  brush.circle(660, 620, 210, true);

  // star specks, kept clear of the moons' diagonal
  brush.noFill();
  brush.set("pen", PALETTE[2], 0.55);
  brush.line(92, 128, 94, 130);
  brush.line(212, 84, 213.5, 86);
  brush.line(348, 158, 350, 159.5);
  brush.line(452, 92, 453.5, 94);
  brush.line(576, 520, 578, 521.5);
  brush.line(688, 434, 689.5, 436);
  brush.line(740, 588, 742, 589.5);
  brush.line(120, 420, 121.5, 422);
  brush.line(58, 560, 60, 561.5);
  brush.line(636, 700, 637.5, 702);
  brush.set("pen", PALETTE[3], 0.5);
  brush.line(288, 260, 290, 261.5);
  brush.line(508, 640, 510, 641.5);

  // the climb: new sliver to crescent to quarter to gibbous...
  moon(74, 728, 20, 0.3, -1);
  moon(118, 668, 23, 0.38, -1);
  moon(204, 602, 26, 0.85, -1);
  moon(300, 512, 30, 1.3, -1);

  // ...the full moon, gold, just past center
  brush.noStroke();
  brush.fillBleed(0.68, "out");
  brush.fillTexture(0.35, 0.45);
  brush.fill(PALETTE[4], 36);
  brush.circle(452, 388, 104, true);
  brush.fill(PALETTE[4], 52);
  brush.circle(450, 386, 76, true);
  brush.fillBleed(0.5, "out");
  brush.fillTexture(0.5, 0.55);
  brush.fill(PALETTE[4], 168);
  brush.circle(452, 388, 50, true);
  brush.fill(PALETTE[4], 128);
  brush.circle(456, 392, 41, true);
  brush.fill(PALETTE[2], 88);
  brush.circle(444, 378, 19, true);

  // ...and the wane on the way out
  moon(568, 316, 31, 1.3, 1);
  moon(642, 228, 26, 0.85, 1);
  moon(708, 158, 22, 0.38, 1);
}