stained.js

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

import {
  getLargeCanvas,
  gaussColor,
  darken,
  shuffle,
} from "../libraries/misc.js";

import { sweepFloodfill } from "../libraries/floodfill.js";

import { granulateChannelsBW } from "../libraries/effects.js";

import { glassTexture } from "../libraries/glassLibraries.js";

// Base to avoid writing always the same

const sketch = (s) => {
  let gui,
    debug = false;
  let largeCanvas;
  let hd = 1;
  let R;
  s.setup = () => {
    let { w, h } = getLargeCanvas(s, 1600);
    let canvas = s.createCanvas(w, h);
    s.pixelDensity(1);
    canvas.mousePressed(() => {});
    s.frameRate(20);
    s.noLoop();
    gui = createGUI();
    gui.toggle();
    R.action();
  };

  const burgundy = "#752D26";
  const crimson = "#752D26";
  const blueIris = "#5A2CE8";
  const beige = "#D0A985";
  const pink = "#F07070";
  const green = "#227A62";
  const darkSea = "#1F3336";

  const colors = [burgundy, crimson, blueIris, beige, pink, green, darkSea];

  const gray100 = [100, 100, 100, 255];

  s.draw = () => {};

  function plot(hd, seed) {
    let scene = s.createGraphics(hd * s.width, hd * s.height);
    scene.background(100);

    curvy(scene, 5, 5, "black", 1 * hd, seed);
    glassy(scene, 5, 5);
    glassTexture(s, scene, seed, hd);
    let metal = s.createGraphics(hd * s.width, hd * s.height);
    metal.background("#00000000");
    curvy(metal, 5, 5, 100, 15 * hd, seed);
    curvy(metal, 5, 5, 70, 14 * hd, seed);
    curvy(metal, 5, 5, 50, 13 * hd, seed);
    curvy(metal, 5, 5, 30, 12 * hd, seed);
    curvy(metal, 5, 5, "black", 11 * hd, seed);
    granulateChannelsBW(metal, [40, 0], true);
    let c = metal.get();
    scene.image(c, 0, 0);
    largeCanvas = scene;
    c = scene.get();
    c.resize(s.width, 0);
    s.image(c, 0, 0);
  }

  function curvy(scene, nh, nv, color, weight, seed) {
    // Create a curvy matrix
    const vspan = scene.height / nv;
    const hspan = scene.width / nh;
    scene.randomSeed(seed);
    scene.strokeWeight(weight);
    scene.stroke(color);
    scene.noFill();
    for (let i = 1; i < nh; i++) {
      let x = Math.floor(i * hspan);
      scene.beginShape();
      scene.curveVertex(x, 0);
      scene.curveVertex(x, 1);
      for (let j = 1; j <= nv + 1; j++) {
        x += scene.random(-hspan / 5, hspan / 5);
        let y = Math.floor(j * vspan) + scene.random(-vspan / 5, vspan / 5);
        scene.curveVertex(x, y);
      }
      scene.curveVertex(x, scene.height);
      scene.endShape();
    }
    for (let i = 1; i < nv; i++) {
      let y = Math.floor(i * vspan);
      scene.beginShape();
      scene.curveVertex(0, y);
      scene.curveVertex(1, y);
      for (let j = 1; j <= nv + 1; j++) {
        y += scene.random(-vspan / 5, vspan / 5);
        let x = Math.floor(j * hspan) + scene.random(-hspan / 5, hspan / 5);
        scene.curveVertex(x, y);
      }
      scene.curveVertex(scene.width, y);
      scene.endShape();
    }
  }

  function glassy(scene, nh, nv) {
    const vspan = scene.height / nv;
    const hspan = scene.width / nh;
    if (debug) {
      scene.stroke("red");
      scene.strokeWeight(3);
    }
    for (let i = 0; i < nh; i++) {
      let x = hspan / 2 + Math.floor(i * hspan);
      for (let j = 0; j <= nv + 1; j++) {
        let y = vspan / 2 + Math.floor(j * vspan);
        if (debug) {
          scene.point(x, y);
        } else {
          let index = Math.floor(Math.random() * colors.length);
          const c2p = colors[index];
          let c2 = darken(scene, gaussColor(scene, c2p, 30), 0.7);
          sweepFloodfill(scene, x, y, gray100, c2);
        }
      }
    }
  }

  function createGUI() {
    let info =
      "Stained glass, formed of several layers of noise based on arcs. Can be slow to generate";
    let subinfo =
      "This is just a testbed for a project where I need generative stained glass<br/>Very high resolutions can fail depending on the browser";
    let S = new Key("s", () => {
      largeCanvas.save("img.png");
    });
    let saveCmd = new Command(S, "save the canvas");
    R = new Key("r", () => {
      gui.spin(() => {
        s.clear();
        plot(hd, window.performance.now());
        gui.spin();
      });
    });

    let resetCanvas = new Command(R, "reset");

    let decH = new Key("(", () => {
      if (hd > 0) {
        hd -= 0.1;
      }
    });
    let incH = new Key(")", () => {
      if (hd < 10) {
        hd += 0.1;
      }
    });
    let hdInfo = new Float(() => hd);
    let hdControl = new Control(
      [decH, incH],
      "+/- resolution export factor",
      hdInfo,
    );

    let gui = new GUI(
      "Stained, RB 2023/04",
      info,
      subinfo,
      [saveCmd, resetCanvas],
      [hdControl],
    );

    let QM = new Key("?", () => gui.toggle());
    let hide = new Command(QM, "hide this");

    gui.addCmd(hide);
    gui.update();
    return gui;
  }

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

p5.disableFriendlyErrors = true;
let p5sketch = new p5(sketch);