creation.js

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

import {
    getLargeCanvas,
    signature,
    smoothStep
} from '../libraries/misc.js'

import {
  solarizedDark
} from '../libraries/palettes.js'

const sketch = (s) => {

    let gui, R
    let debug = true
    let dly // Base debug layer, if used

    // 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

    s.preload = () => {
        cfg.font = s.loadFont("../libraries/fonts/Monoid-Retina.ttf")
    }

    s.setup = () => {
        let {
            w,
            h
        } = getLargeCanvas(s, 1600)
        let canvas = s.createCanvas(w, h)
        s.pixelDensity(1)
        canvas.mousePressed(() => {})
        s.frameRate(20)
        s.noLoop()
        cfg.seeder = new Seeder()
        gui = createGUI()
        gui.toggle()
        R.action()
    }

    function plot() {
        let scene = s.createGraphics(cfg.hd * s.width << 0, cfg.hd * s.height << 0)
        W = scene.width, H = scene.height
        let dly = s.createGraphics(W, H)
        scene.randomSeed(cfg.seeder.get())
        scene.noiseSeed(cfg.seeder.get())
        dly.randomSeed(cfg.seeder.get())
        dly.noiseSeed(cfg.seeder.get())

        // Here your code against scene and possibly dly
        if (debug && dly) {
            let c = dly.get()
            scene.image(dly, 0, 0)
        }

        const Ra = H/4
        const cx = W/2
        const cy = H/2
        scene.background(solarizedDark.base01)
        scene.colorMode(s.HSB)
        scene.noStroke()
        //scene.strokeWeight(cfg.hd)
        scene.noFill()
        const steps = 15000*Math.sqrt(Math.sqrt(cfg.hd))
        const shift = 360*scene.random()
        for(let i = 0; i < steps; i++){
            const th1 = i/steps*2*PI
            const _h = shift + 90*i/steps
            const h = _h > 360 ? _h - 360 : _h
            const s = scene.random(50, 100)
            const b = scene.random(50, 100)
            const alpha = 0.05+0.3*scene.noise(th1)
            let color = scene.color(h, s, b, alpha)
            scene.fill(color)
            const th2 = scene.random(0, 2*PI)
            const th3 = scene.random(0, 2*PI)
            const th4 = th1+PI//scene.random(0, 2*PI)
            const f1 = scene.random(0.4, 1.6)
            const f = scene.random(0.2, 1.8)
            const f2 = scene.random(0.4, 1.6)
            const rs = [f1*Ra, f*Ra, f*Ra, f2*Ra]
            const ths = [th1, th2, th3, th4]
            let curvex = []
            let curvey = []
            for(let j = 0; j < rs.length; j++){
                const th = ths[j]
                const r = rs[j]
                const x = cx+r*Math.cos(th)
                const y = cy+r*Math.sin(th)
                curvex.push(x)
                curvey.push(y)
            }
            const dots = 100*Math.sqrt(Math.sqrt(cfg.hd))
            const size = 5 * cfg.hd * scene.noise(i) << 0 
            for(let k = 0; k < dots; k++){
                const dt = k/dots
                const ns = (1-smoothStep(0, dots, k))*size << 0
                color.setAlpha(0.05+(1-smoothStep(0, dots, k))*alpha)
                scene.fill(color)
                const x = scene.curvePoint(...curvex, dt)
                const y = scene.curvePoint(...curvey, dt)
                scene.circle(x, y, 1+ns)
            }
        }

        const identifier = `${cfg.seeder.hex()}@${cfg.hd.toPrecision(2)}`
        const sigCfg = {
            s: s,
            scene: scene,
            color: "#101020",
            shadow: "darkgrey",
            fontsize: 9,
            right: scene.width,
            bottom: scene.height,
            identifier: identifier,
            sig: "rb'23",
            hd: cfg.hd,
            font: cfg.font
        }
        signature(sigCfg)

        cfg.largeCanvas = scene
        let c = scene.get()
        c.resize(s.width, 0)
        s.image(c, 0, 0)
    }


    const createGUI = (gui) => {
        cfg.title = "Creation, RB 2023/05 \u{1F1E8}\u{1F1ED}"
        cfg.info = "A quick 'what if'"
        cfg.subinfo = "Just many dots over curves trapped in random circles. It is very slightly not resolution independent, but it almost is.<br/>Very high resolutions can fail depending on the browser"
        cfg.s = s
        R = new Key("r", () => {
            gui.spin(() => {
                cfg.s.clear()
                gui.spin()
                plot()
                gui.unmark()
                gui.update()
            })
        })

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

        cfg.commands = [resetCanvas, cfg.seeder.command]
        cfg.controls = [cfg.seeder.control]

        gui = createBaseGUI(cfg)
        return gui
    }



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

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