palette-spheres.js

import {
  createBaseGUI,
  Command,
  GUI,
  Integer,
  Float,
  String,
  Key,
  Control,
  Seeder,
} from "../libraries/gui/gui.js";

import {
  getLargeCanvas,
  smoothStep,
  sceneShuffle,
  signature,
} from "../libraries/misc.js";

import {
  solarizedDark,
  solarizedDarkPalette,
  wernerBase,
  wernerBasePalette,
  shimmeringColorArray,
  c82GeoPrimesPalette,
} from "../libraries/palettes.js";

const sketch = (s) => {
  let gui;
  let debug = true;

  // Globals needed in controls, commands or deep arguments
  let cfg = {
    hd: 1,
    seeder: undefined,
    largeCanvas: undefined,
  };

  let W, H; // Helpful globals to avoid typing scene.width so much

  const PI = s.PI;

  let scene, shadow, mask;
  const FRAMERATE = 100;

  s.preload = () => {
    cfg.font = s.loadFont("../libraries/fonts/Monoid-Retina.ttf");
  };
  const hg = (scene, h, sig) => (scene.randomGaussian(h, sig) + 360) % 360;
  const sg = (scene, s, sig) => (scene.randomGaussian(s, sig) + 100) % 100;
  const bg = (scene, b, sig) => (scene.randomGaussian(b, sig) + 100) % 100;

  // Palette controls stolen from Flows
  let palette = {};

  const werner = () => {
    (palette.colors = wernerBasePalette),
      (palette.name = "Werner"),
      (palette.short = "we"),
      (palette.background = wernerBase.lightBrown);
  };

  const solarized = () => {
    (palette.colors = solarizedDarkPalette),
      (palette.name = "SolarizedDark"),
      (palette.short = "sd"),
      (palette.background = solarizedDark.base01);
  };

  const shimmering = () => {
    (palette.colors = shimmeringColorArray),
      (palette.name = "Shimmering"),
      (palette.short = "sh"),
      (palette.background = shimmeringColorArray[0]);
  };

  const geometricPrimes = () => {
    (palette.colors = c82GeoPrimesPalette.slice(
      0,
      c82GeoPrimesPalette.length - 2,
    )),
      (palette.name = "±C82GeoPrimes"),
      (palette.short = "gp"),
      (palette.background =
        c82GeoPrimesPalette[c82GeoPrimesPalette.length - 1]);
  };

  const palettes = [solarized, werner, shimmering, geometricPrimes];
  let palettesIndex = 0;

  function cyclePalettes() {
    palettesIndex = (palettesIndex + 1) % palettes.length;
    palettes[palettesIndex]();
  }

  s.setup = () => {
    let { w, h } = getLargeCanvas(s, 1600);
    let canvas = s.createCanvas(w, h);
    s.pixelDensity(1);
    canvas.mousePressed(() => {});
    s.setFrameRate(FRAMERATE);
    //s.noLoop()
    cfg.seeder = new Seeder();
    scene = s.createGraphics((cfg.hd * 1800) << 0, (cfg.hd * 1200) << 0);
    (W = scene.width), (H = scene.height);

    init();
    gui = createGUI();
    gui.fetch();
    gui.toggle();
  };
  function* bubbly(scene, cx, cy, d, color) {
    const NR = 1.2 / cfg.hd;
    const random = scene.random;
    const ITER = d * d; // tweaked * d
    let step = 0;
    const hu = scene.hue(color);
    const sa = scene.saturation(color) * 2;
    const br = scene.brightness(color);
    const al = scene.alpha(color);
    scene.strokeWeight(1.5 * cfg.hd);
    for (let i = 0; i < 2 * ITER; i++) {
      step++;
      const a = random(PI * 2);
      const r = d * (1.0 - random(random(random(random())))); // 1 less than bubbles
      const rr = d - r;
      const foo = a / (2 * PI);
      const smoob = 0.5 * br + 0.5 * br * smoothStep(d / 2, d, rr);
      const smooa = 0.2 + 0.5 * al + 0.5 * al * smoothStep(d / 2, d, rr);
      const col = scene.color(hu, sa, smoob, smooa);
      scene.stroke(col);
      scene.fill(col);
      const x = cx + Math.cos(a) * r;
      const y = cy + Math.sin(a) * r;
      scene.circle(x, y, NR);
      if (step % ((50 * d) << 0) == 0) {
        yield;
      }
    }
  }

  function* base(scene, color) {
    const hu = scene.hue(color);
    const sa = scene.saturation(color);
    const br = 0.3 * scene.brightness(color);
    const factor = 10;
    const WSTEPS = (factor * 100) << 0;
    const HSTEPS = (factor * 100) << 0;
    scene.noStroke();
    let coords = [];
    for (let i = 0; i < HSTEPS; i++) {
      for (let j = 0; j < WSTEPS / 2; j++) {
        coords.push([i, j]);
      }
    }
    const shuf = sceneShuffle(scene, coords);
    let step = 0;
    for (let coord of coords) {
      const [i, j] = coord;
      step++;
      const sea = [hg(scene, hu, 5), sa, bg(scene, br, 5)];
      const alpha = scene.random(0.03, 0.08);
      const x1 = (j * W) / WSTEPS + scene.randomGaussian(0, 4 * factor);
      const y1 = (i * H) / HSTEPS + scene.randomGaussian(0, 4 * factor);
      const w1 = scene.random(6 * factor, 12 * factor);
      const h1 = scene.random(0.2 * w1, 0.5 * w1);
      const x2 = W - (j * W) / WSTEPS + scene.randomGaussian(0, 4 * factor);
      const y2 = (i * H) / HSTEPS + scene.randomGaussian(0, 4 * factor);
      const w2 = scene.random(6 * factor, 12 * factor);
      const h2 = scene.random(0.2 * w2, 0.5 * w2);
      scene.push();
      scene.fill(scene.color(...sea, alpha));
      scene.translate(x1, y1);
      scene.rotate(scene.random(-0.03, 0.03));
      scene.ellipse(0, 0, w1, h1);
      scene.pop();
      scene.push();
      scene.fill(scene.color(...sea, alpha));
      scene.translate(x2, y2);
      scene.rotate(scene.random(-0.03, 0.03));
      scene.ellipse(0, 0, w2, h2);
      scene.pop();
      if (step > (W * H) / 300) {
        return;
      }
      if (step % 200 == 0) {
        yield;
      }
    }
  }

  // Generators created in init
  let drawBackground, drawCircleStuff;
  // Global signature
  let sigCfg;
  function init() {
    let background, spheres;
    scene.randomSeed(cfg.seeder.get());
    scene.noiseSeed(cfg.seeder.get());
    scene.colorMode(s.HSB);
    palettes[palettesIndex](); // Init palette
    let e = [...palette.colors];
    let shuf = sceneShuffle(scene, e);
    background = shuf[0];
    spheres = shuf.slice(1);
    const hu = scene.hue(scene.color(background));
    const sa = 0.3 * scene.saturation(scene.color(background));
    const br = 100 - scene.brightness(scene.color(background));
    console.log(hu, sa, br);
    scene.background(scene.color(hu, sa, br));
    const identifier = `${cfg.seeder.hex()}@${cfg.hd.toPrecision(2)}`;
    sigCfg = {
      s: s,
      scene: scene,
      color: "#101020",
      shadow: "#CFFFFB",
      fontsize: 11,
      right: scene.width,
      bottom: scene.height,
      identifier: identifier,
      sig: "rb'23",
      hd: cfg.hd,
      font: cfg.font,
    };

    let circles = [];
    for (let j = 0; j < 10; j++) {
      circles.push([
        scene.randomGaussian(W / 2, W / 4),
        scene.randomGaussian(H / 2, H / 4),
        scene.randomGaussian(H / 4, H / 50),
      ]);
    }
    backgroundDone = false;
    circleStuffDone = false;
    drawBackground = base(scene, scene.color(background));
    drawCircleStuff = circleStuff(scene, circles, spheres);
  }

  function out(x, y) {
    return x < 0 || y < 0 || x > W * cfg.hd || y > H * cfg.hd;
  }

  function* circleStuff(scene, circles, spheres) {
    const C_STEPS = FRAMERATE;
    const C_SPEED = 8;
    const numColors = spheres.length;

    const alfactor = 0.09;
    const SHADOW_STEPS = (5 * 1) / alfactor;
    let shadowSteps = 0;

    let bubbleColor;
    let circCounter = 0;
    for (let circ of circles) {
      const sphere = spheres[circCounter % numColors];
      const color = scene.color(sphere);
      const hu = scene.hue(color);
      const sa = scene.saturation(color);
      const br = scene.brightness(color);

      circCounter++;
      const nhu = (scene.randomGaussian(hu, 5) + 360) % 360;
      const nsa = (scene.randomGaussian(sa, 5) + 100) % 100;
      const nbr = (0.75 * br + scene.random(0.3 * br) + 100) % 100;
      bubbleColor = scene.color(nhu, nsa, 0.8 * nbr);
      const ballColor = scene.color(nhu, nsa, nbr);
      scene.fill(ballColor);
      let [x, y, r] = circ;
      const [dx, dy, f] = [r * 0.5, r * 0.5, 0.2];
      if (out(x, y)) {
        continue;
      }
      scene.noStroke();
      let bubbled = false,
        bubbling;
      for (let i = 0; i < C_STEPS; i++) {
        const easing = smoothStep(0, C_STEPS, i);
        const rr = r * Math.sqrt(easing);
        if (i >= C_STEPS - 1) {
          scene.strokeWeight(3 * cfg.hd);
          scene.stroke("black");
          scene.noFill();
          scene.circle(x, y, (rr + 2.5) << 0);
          scene.strokeWeight(3 * cfg.hd);
          scene.stroke(scene.color(nhu, nsa, 0.3 * nbr));
          scene.circle(x, y, (rr + 1.5) << 0);
        }
        scene.fill(ballColor);
        scene.circle(x, y, rr << 0);
        if (i % C_SPEED == 0) {
          yield;
        }
        for (let j = 0; j < SHADOW_STEPS; j++) {
          shadowSteps++;
          // And again I find myself writing this thing
          // Start with maximum radius, minimum alpha
          const col = scene.color(
            0,
            0,
            0,
            alfactor * smoothStep(0, SHADOW_STEPS, j),
          ); // darkens j -> SHADOW_STEPS
          const radF = 1 - f + f * (1 - smoothStep(0, SHADOW_STEPS, j));
          scene.fill(col);
          scene.noStroke();
          scene.circle(x + dx, y + dy, rr * radF);
          scene.fill(ballColor);
          scene.circle(x, y, rr);
        }
      }
      // Generator based on Bubbles, creates the sphere effect
      bubbling = bubbly(scene, x, y, r / 2, bubbleColor);

      while (!bubbled) {
        bubbled = bubbling.next().done;
        yield;
      }
    }
    return;
  }

  // State machine globals are better close to s.draw
  let backgroundDone, circleStuffDone;
  let capture,
    captureIt = false,
    started = true;

  s.draw = () => {
    if (started && captureIt) {
      capture = P5Capture.getInstance();
      capture.start({
        width: s.width % 2 == 0 ? s.width : s.width + 1,
        height: s.height % 2 == 0 ? s.height : s.height + 1,
        framerate: 24,
      });
      started = false;
    }
    if (!backgroundDone) {
      backgroundDone = drawBackground.next().done;
    } else {
      if (!circleStuffDone) {
        circleStuffDone = drawCircleStuff.next().done;
      } else {
        s.noLoop();
        if (capture) {
          capture.stop();
        }
      }
    }
    signature(sigCfg);
    cfg.largeCanvas = scene;
    console.log(cfg.largeCanvas.width, cfg.largeCanvas.height);
    let c = scene.get();
    c.resize(W, 0);
    s.image(c, 0, 0);
  };

  const createGUI = (gui) => {
    cfg.title = "Palette spheres, RB 2023/8 \u{1F1E8}\u{1F1ED}";
    cfg.info =
      "I explored circles-with-shadows on a lazy Saturday and then tried to spice it up and animate";
    cfg.subinfo = "No high res available to avoid making recording explode.";
    cfg.s = s;
    let R = new Key("r", () => {
      gui.spin(() => {
        cfg.s.clear();
        cfg.largeCanvas.clear();
        captureIt = false;
        started = true;
        init();
        cfg.s.loop();
        gui.spin();
        gui.unmark();
        gui.update();
      });
    });
    let G = new Key("g", () => {
      gui.spin(() => {
        cfg.s.clear();
        cfg.largeCanvas.clear();
        captureIt = true;
        started = true;
        init();
        cfg.s.loop();
        gui.spin();
        gui.unmark();
        gui.update();
      });
    });
    let pals = new Key("q", cyclePalettes);
    let paletteShow = new String(() => palette.name);
    let paletteControl = new Control([pals], "Cycle palettes", paletteShow);

    let resetCanvas = new Command(R, "reset");
    let withRec = new Command(G, "reset & record");

    cfg.commands = [resetCanvas, withRec, cfg.seeder.command];
    cfg.controls = [paletteControl, cfg.seeder.control];
    cfg.skipHD = true;
    gui = createBaseGUI(cfg);
    return gui;
  };

  s.keyReleased = () => {
    gui.dispatch(s.key);
  };
};

P5Capture.setDefaultOptions({ disableUi: true, format: "png", bitrate: 5000 });
p5.disableFriendlyErrors = true;
let p5sketch = new p5(sketch);