Confusion - OpenProcessing

sketch.js
Grid.js
SpaceDivide.js
style.css
index.html
xxxxxxxxxx
 
// Confusion © 2024-01-19 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/
​
import { mountFlex } from "https://cdn.jsdelivr.net/npm/p5.flex@0.2.0/src/p5.flex.min.mjs"
import { mountSpaceDivide } from "./SpaceDivide.js"
import { mountGrid } from "./Grid.js"
​
mountFlex(p5)
mountSpaceDivide(p5)
mountGrid(p5)
​
new p5((p) => {
  const colors = p.random([
    ["#eeefea", "#ad2b33", "#015186", "#f8ab1e", "#303030"],
    ["#01161e", "#124559", "#598392", "#aec3b0", "#eff6e0"],
    ["#16697a", "#489fb5", "#82c0cc", "#ede7e3", "#ffa62b"],
    ["#3a606e", "#607b7d", "#828e82", "#aaae8e", "#e0e0e0"],
    ["#f8f9fa", "#dee2e6", "#adb5bd", "#495057", "#212529"],
    ["#ff6b35", "#f7c59f", "#efefd0", "#004e89", "#1a659e"],
    ["#132a13", "#31572c", "#4f772d", "#90a955", "#ecf39e"],
  ])
  let blocks
  let gs
  let wScale = p.random([1, 2, 3])
​
  p.setup = () => {
    p.createCanvas(400 * wScale, 800)
    p.flex({ container: { padding: "20px" } })
    p.pixelDensity(4)
​
    blocks = p.rectDivide(0, 0, p.width, p.height, 50, true)
    gs = p.Grid({ cols: 10 * wScale, rows: 5 })
    p.containerBgColor(51)
    p.parentBgColor(51)
  }
​
  p.draw = () => {
    gs.generate(content)
    blocks.forEach((block) => {
      p.noStroke()
      p.fill(p.random(colors))
      if (p.random() < 0.5) p.rect(block.x, block.y, block.w, block.h)
    })
    p.noLoop()
  }
​
  const content = (cell) => {
    p.rectMode(p.CENTER)
    p.translate(cell.w / 2, cell.h / 2)
    p.randomSeed(cell.id * 100000)
    p.noStroke()
​
    p.fill(p.random(colors))
    p.rect(0, 0, cell.w, cell.h)
​
    const ca = p.random([0, 1, 2, 2])
    p.fill(p.random(colors))
    if (ca === 0) p.circle(0, 0, cell.w * 0.75)
​
    p.fill(p.random(colors))
    const tType = p.random([0, 1, 2, 3, 4, 4, 4])
    const RT = [cell.w / 2, -cell.h / 2]
    const RB = [cell.w / 2, cell.h / 2]
    const LB = [-cell.w / 2, cell.h / 2]
    const LT = [-cell.w / 2, -cell.h / 2]
    if (tType === 0) p.triangle(...LB, ...RB, ...RT)
    if (tType === 1) p.triangle(...RB, ...RT, ...LT)
    if (tType === 2) p.triangle(...RT, ...LT, ...LB)
    if (tType === 3) p.triangle(...LT, ...LB, ...RB)
​
    p.fill(p.random(colors))
    if (ca === 1) p.circle(0, 0, cell.w * 0.75)
​
    if (ca === 2 && tType === 4) {
      const aType = p.random([0, 1, 2, 3, 4, 5, 5])
      const r = cell.w * 2
      if (aType === 0) p.arc(...LT, r, r, 0, p.PI / 2, p.PIE)
      if (aType === 1) p.arc(...RT, r, r, p.PI / 2, p.PI, p.PIE)
      if (aType === 2) p.arc(...RB, r, r, p.PI, p.PI + p.PI / 2, p.PIE)
      if (aType === 3) p.arc(...LB, r, r, p.PI + p.PI / 2, 0, p.PIE)
    }
  }
})
​