bubbles.js

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

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

import {
  c82GeoPrimesPalette,
  solarizedDark,
  shimmeringColorArray,
  solarizedDarkPalette
} from '../libraries/palettes.js'

import {
  canvasRGBA
} from '../libraries/3rdparty/stackblur.js'


const sketch = (s) => {

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

  const palette = solarizedDarkPalette

  // 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 bubble(scene, x, y, d, mask) {
    // A strange correction to avoid superdense bubbles at high res      
    const NR = 1.2 / cfg.hd
    mask.push()
    mask.fill("black")
    mask.circle(x, y, 1.001 * 2 * d)
    mask.pop()
    scene.push()
    scene.translate(x, y)
    const random = scene.random
    const ITER = d * d
    for (let i = 0; i < ITER; i++) {
      const a = random(PI * 2)
      const r = d * (1.0 - random(random(random(random(random())))))
      const rr = d - r
      const foo = a / (2 * PI)
      let col = scene.color(360 * foo, 90, 90)
      col.setAlpha(0.05)
      scene.stroke(col)
      const x = Math.cos(a) * r
      const y = Math.sin(a) * r
      scene.circle(x, y, NR)
    }
    scene.pop()
    scene.push()
    scene.translate(x, y)
    scene.rotate(-0.3)
    const nd = 0.8 * d
    const L = 2 * PI - PI / 4
    for (let i = 0; i < ITER; i++) {
      const a = random(PI * 2)
      if (L - a > 0.3) {
        continue
      }
      const r = nd * (1.0 - random(random(random(random(random())))))
      let col = scene.color(250)
      col.setAlpha(0.1 * (1.5 - smoothStep(0, nd, r)))
      scene.stroke(col)
      const x = Math.cos(a) * r
      const y = Math.sin(a) * r
      scene.circle(x, y, NR)
    }

    scene.pop()
    scene.push()
    scene.translate(x, y)
    scene.rotate(0.85 * PI)
    const nnd = 0.78 * d
    const nL = 2 * PI - PI / 4
    for (let i = 0; i < ITER; i++) {
      const a = random(PI * 2)
      if (nL - a > -0.3) {
        continue
      }
      const r = nnd * (1.0 - random(random(random(random(random())))))
      let col = scene.color(250)
      col.setAlpha(0.1 * (1.5 - smoothStep(0, nnd, r)))
      scene.stroke(col)
      const x = Math.cos(a) * r
      const y = Math.sin(a) * r
      scene.circle(x, y, NR)
    }

    scene.pop()
  }

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

    if (debug && dly) {
      let c = dly.get()
      scene.image(dly, 0, 0)
    }

    bubbly.noFill()
    bubbly.strokeWeight(cfg.hd)


    bubbly.background(solarizedDark.base01)
    bubbly.colorMode(s.HSB)
    for (let i = 0; i < 50; i++) {
      const fx = bubbly.random(0.1, 0.9)
      const fy = bubbly.random(0.1, 0.9)
      const d = bubbly.random(0.02, 0.1)
      bubble(bubbly, fx * W, fy * H, d * H, mask)
      if (i % 2 == 0) {
        canvasRGBA(bubbly.canvas, 0, 0, W, H, Math.max(1, (0.5 + cfg.hd) << 0))
      }
    }
    canvasRGBA(bubbly.canvas, 0, 0, W, H, Math.max(1, (0.5 + cfg.hd) << 0))
    let d = bubbly.get()
    d.mask(mask)
    scene.background(solarizedDark.base01)
    scene.image(d, 0, 0)
    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 = "Bubbles, RB 2023/5"
    cfg.info = "Just some bubbles"
    cfg.subinfo = "Based on the ideas about point distribution from <a href='https://openprocessing.org/sketch/1575230/'>here</a><br/>Not much more than stacked blur on top and some masking.<br/>Only reproducible at the exact same resolution."
    cfg.s = s
    R = new Key("r", () => {
      gui.spin(() => {
        cfg.s.clear()
        plot()
        gui.spin()
        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)