Storm Ledger

// composition: diagonal sweep from lower-right into upper-left, focal mass on the left third
// layering: pale pooled washes first, field-bent flow lines second, charcoal accents last
const PALETTE = [
  "#e7e6e4", // ground
  "#122438", // storm mass
  "#5e8c8a", // sea
  "#87c7ca", // ice light
  "#dd672e", // ember accent
];

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

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

  // pooled ground washes, off-center left
  brush.noStroke();
  brush.fillBleed(0.35, "out");
  brush.fillTexture(0.5, 0.6);
  brush.fill("#87c7ca", 40);
  brush.circle(300, 430, 260, true);
  brush.fill("#5e8c8a", 55);
  brush.circle(430, 320, 210, true);
  brush.fill("#122438", 35);
  brush.circle(240, 300, 170, true);
  brush.fill("#87c7ca", 30);
  brush.circle(560, 470, 150, true);

  // the storm: flow lines bent along a curved field
  brush.field("curved");
  brush.pick("2B");
  for (let i = 0; i < 240; i++) {
    const x = randomGaussian(330, 190);
    const y = randomGaussian(370, 200);
    const len = max(30, randomGaussian(150, 60));
    const dir = randomGaussian(215, 14);
    const tone = random();
    if (tone < 0.55) brush.stroke("#122438");
    else if (tone < 0.8) brush.stroke("#5e8c8a");
    else if (tone < 0.94) brush.stroke("#87c7ca");
    else brush.stroke("#dd672e");
    brush.strokeWeight(max(0.4, randomGaussian(1.1, 0.5)));
    brush.flowLine(x, y, len, dir);
  }
  brush.noField();

  // charcoal accents, drawn last, running off the left edge
  brush.set("charcoal", "#122438", 1.3);
  brush.line(-20, 540, 470, 310);
  brush.line(-10, 580, 380, 380);
  brush.set("charcoal", "#dd672e", 1.1);
  brush.line(210, 470, 330, 405);
}