植

// 植 © 2024-05-11 by Zaron Chen is licensed under CC BY-NC-SA 3.0. To view a copy of this license, visit https://creativecommons.org/licenses/by-nc-sa/3.0/

// Botanical 🌴 #WCCChallenge

// See all my WCCChallenge submissions: https://github.com/ZRNOF/WCCC-Sketches

//

// Reference:

//   L-System User Notes: https://paulbourke.net/fractals/lsys/

//   The Algorithmic Beauty of Plants: http://algorithmicbotany.org/papers/abop/abop.pdf

​

import { mountFlex } from "https://cdn.jsdelivr.net/npm/p5.flex@0.2.0/src/p5.flex.min.mjs"

import { mountGrid } from "./Grid.js"

import { BS, recur } from "./L-system.js"

import { sleep, Border, randomPoints, getTheme, getBSType } from "./tools.js"

​

mountFlex(p5)

mountGrid(p5)

​

new p5((p) => {

  const canvasW = p.random([800, 1000, 1200, 1600])

  const canvasH = p.random([800, 1000, 1200, 1600])

  const lock = p.random() < 0.1 ? true : false

  const lockType = getBSType(p)

  const cols = 30

  const rows = 30

  const pattern_size = 10

  const itemScale = 0.65

​

  const getAspectRatio = (width, height) => {

    const gcd = (a, b) => (b === 0 ? a : gcd(b, a % b))

    const divisor = gcd(width, height)

    return `${width / divisor}/${height / divisor}`

  }

​

  const features = {

    Layout: getAspectRatio(canvasW, canvasH),

    Theme: getTheme(p),

    MixedThemes: p.random([true, false]),

    Species: lock ? "Monotonous" : "Diverse",

    Darkness: p.random() < 0.1,

  }

​

  p.setup = async () => {

    p.createCanvas(canvasW, canvasH)

    p.flex({ container: { padding: "20px" } })

​

    const bgColor = [p.random(225, 255), p.random(225, 255), p.random(225, 255)]

    p.background(...bgColor)

    p.parentBgColor(...bgColor.map((c) => c * 0.94))

    p.containerBgColor(...bgColor.map((c) => c * 0.94))

    p.angleMode(p.DEGREES)

​

    await ground()

    await plants()

​

    p.Grid({ cols, rows }).generate(content)

    Border(p, "#fff", 10)

  }

​

  const ground = async () => {

    for (let i = 0; i < 2000; i++) {

      const posX = p.random(p.width)

      // prettier-ignore

      const posY = p.random(p.height - 75 - 80 * (p.noise(posX * 0.0025) * 2 - 1), p.height)

      randomPoints(p, posX, posY, 30, 30, 100, "brown")

      i % 100 === 0 && await sleep(1)

    }

    await sleep(1)

​

    for (let i = 0; i < 750; i++) {

      const posX = p.random(p.width)

      // prettier-ignore

      const posY = p.random(p.height - 80 - 80 * (p.noise(posX * 0.0025) * 2 - 1), p.height)

      if (p.random() < 0.05) randomPoints(p, posX, posY, 30, 30, 100, "brown")

      else randomPoints(p, posX, posY, 30, 30, 100, features.Theme)

      i % 100 === 0 && await sleep(1)

    }

    await sleep(1)

    p.filter(p.BLUR, 2)

  }

​

  const plants = async () => {

    for (let i = 0; i < 35; i++) {

      const type = lock ? lockType : getBSType(p)

      const bs = BS[type](p)

      const sentence = recur(bs, bs.axiom)

​

      const r = p.random(1, 10)

      p.push()

      p.translate(p.random(p.width), p.height - (70 - 2 * i))

      for (let i = 0; i < sentence.length; i++) {

        const char = sentence[i]

        if (features.MixedThemes && p.random() < 0.1)

          await bs.methods[char](r, getTheme(p))

        else await bs.methods[char](r, features.Theme)

      }

      p.pop()

​

      if (i <= 30) {

        i % 3 === 0 && p.filter(p.BLUR, 1)

        i % 4 === 0 && p.filter(p.DILATE)

        i % 5 === 0 && p.filter(p.POSTERIZE, 40)

        i % 6 === 0 && p.filter(p.ERODE)

      }

​

      await sleep(10)

    }

    p.filter(p.DILATE)

    p.filter(p.POSTERIZE, 40)

    if (features.Darkness) p.filter(p.INVERT)

  }

​

  const content = () => {

    Swirl(0, 0, pattern_size)

    // prettier-ignore

    if (p.random() < 0.02)

      randomPoints(p, 0, 0, 200 * itemScale, 200 * itemScale, 300 * itemScale, features.Theme)

  }

​

  const Swirl = (x, y, size) => {

    p.push()

    p.translate(x, y)

    p.angleMode(p.RADIANS)

    p.noFill()

    let r = size / 1.5

    const inc = size

    const start = p.int(p.random(0, 360))

    const end = start + 20

    p.stroke(p.random(180, 255), 48)

    p.strokeWeight(p.random(0.5, 0.8) * itemScale)

    p.beginShape()

    for (let i = start; i < end; i++) {

      p.curveVertex(p.cos(i) * r, p.sin(i) * r)

      r -= inc

    }

    p.endShape()

    p.pop()

  }

})

​