Split Second

// composition: one bolt enters at the top-right, staggers down the sheet, and grounds at the lower-left third;
// a low near-black ridge holds the bottom, everything else stays storm-dark indigo.
// layering: indigo ground, cloud shelf, violet glow passes along the bolt, forks and twigs, the pale core last, afterglow at the strike.
const PALETTE = [
  "#10132c", // storm indigo ground
  "#181e42", // cloud shelf lift
  "#0a0c1e", // ridge silhouette near-black
  "#8a6fd4", // violet afterglow
  "#f2efdf", // pale bolt core
];

const MAIN = [
  [668, -12], [646, 58], [600, 118], [618, 158], [556, 232], [566, 268],
  [500, 344], [452, 398], [468, 428], [398, 490], [352, 548], [330, 588],
  [296, 634], [272, 658],
];
// first-level forks, each dying out short of the ground
const FORKS = [
  [[600, 118], [548, 152], [506, 198], [472, 230]],
  [[556, 232], [504, 252], [468, 302]],
  [[452, 398], [402, 422], [370, 470], [346, 496]],
  [[398, 490], [432, 542], [446, 590]],
];
// second-level twigs off the fork tips
const TWIGS = [
  [[506, 198], [478, 226], [462, 250]],
  [[468, 302], [440, 318]],
  [[370, 470], [344, 492]],
];

function strokePath(pts, brushName, col, w, jit) {
  brush.noFill();
  brush.set(brushName, col, w);
  brush.beginShape(0.12);
  for (let i = 0; i < pts.length; i++) {
    brush.vertex(pts[i][0] + random(-jit, jit), pts[i][1] + random(-jit, jit));
  }
  brush.endShape(false);
}

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

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

  // cloud shelf, the storm's underside
  brush.noStroke();
  brush.fillBleed(0.65, "out");
  brush.fillTexture(0.4, 0.5);
  brush.fill(PALETTE[1], 96);
  brush.beginShape(0.5);
  brush.vertex(-30, -20);
  brush.vertex(830, -20);
  brush.vertex(830, 140 + random(-16, 16));
  brush.vertex(560, 190 + random(-24, 24));
  brush.vertex(240, 150 + random(-20, 20));
  brush.vertex(-30, 176 + random(-16, 16));
  brush.endShape(true);
  brush.fill(PALETTE[2], 74);
  brush.beginShape(0.5);
  brush.vertex(430, -20);
  brush.vertex(830, -20);
  brush.vertex(830, 110 + random(-12, 12));
  brush.vertex(600, 148 + random(-18, 18));
  brush.vertex(452, 96 + random(-14, 14));
  brush.endShape(true);

  // violet glow halo behind the bolt — three widening-to-narrowing spray passes
  strokePath(MAIN, "spray", PALETTE[3], 7, 3.2);
  strokePath(MAIN, "spray", PALETTE[3], 4.4, 2.2);
  strokePath(MAIN, "spray", PALETTE[3], 2.4, 1.2);
  for (let f = 0; f < FORKS.length; f++) {
    strokePath(FORKS[f], "spray", PALETTE[3], 2.2, 1.6);
  }

  // forks first, so the main core reads brightest
  for (let f = 0; f < FORKS.length; f++) {
    strokePath(FORKS[f], "rotring", PALETTE[4], 0.9, 1.2);
    strokePath(FORKS[f], "pen", PALETTE[4], 0.5, 0.8);
  }
  for (let t = 0; t < TWIGS.length; t++) {
    strokePath(TWIGS[t], "pen", PALETTE[4], 0.45, 0.7);
  }

  // the pale core — three passes so it burns on the dark ground
  strokePath(MAIN, "rotring", PALETTE[4], 1.6, 1.3);
  strokePath(MAIN, "rotring", PALETTE[4], 1.0, 0.9);
  strokePath(MAIN, "pen", PALETTE[4], 0.6, 0.5);

  // ridge silhouette across the bottom
  brush.noStroke();
  brush.fillBleed(0.35, "out");
  brush.fillTexture(0.5, 0.55);
  brush.fill(PALETTE[2], 220);
  brush.beginShape(0.4);
  brush.vertex(-30, 690 + random(-6, 6));
  brush.vertex(180, 668 + random(-8, 8));
  brush.vertex(300, 680 + random(-6, 6));
  brush.vertex(470, 660 + random(-10, 10));
  brush.vertex(650, 678 + random(-6, 6));
  brush.vertex(830, 666 + random(-8, 8));
  brush.vertex(830, 830);
  brush.vertex(-30, 830);
  brush.endShape(true);

  // afterglow pooling where the bolt grounds
  brush.fillBleed(0.7, "out");
  brush.fillTexture(0.3, 0.4);
  brush.fill(PALETTE[3], 58);
  brush.circle(272, 654, 72, true);
  brush.fill(PALETTE[3], 92);
  brush.circle(274, 656, 34, true);
  brush.fill(PALETTE[4], 76);
  brush.circle(272, 658, 13, true);

  // the ridge line catches a sliver of violet near the strike
  brush.noFill();
  brush.set("pen", PALETTE[3], 0.7);
  brush.line(212, 676, 338, 672);
}