Chanomic Sketch

Bubbles or Sparks

const paletteCode = [
  '#02735E',
  '#03A678',
  '#F27405',
  '#731702',
  '#014040',
];
const palette = []

const circlesNum = 200;
const circlesDiamMin = 10;
const circlesDiamMax = 100;

function setup() {
  createCanvas(windowWidth, windowHeight);

  paletteCode.forEach((code) => {
    const col = color(code);
    palette.push(col);
  })
}

function draw() {
  rectMode(CENTER);
  background(palette[palette.length - 1]);

  [...Array(circlesNum)].forEach((_, i) => {
    const x = random(0, width);
    const y = random(0, height);
    const diam = map(y, 0, height, circlesDiamMin, circlesDiamMax);
    const idx = Math.floor(random(0, palette.length - 1));
    const col = palette[idx];

    stroke(col);
    col.setAlpha(128);

    fill(col);
    col.setAlpha(255);

    myCircle(x, y, diam);
  });

  noLoop();
}

function myCircle(x, y, diam) {
  const r = diam / 2.0;
  const N = 50;
  push();
  translate(x, y);

  const M = 5;
  [...Array(M)].forEach((_, i) => {
    const j = Math.floor(random(0, M))
    const th = TWO_PI / M * i;
    myRectangle(r, r, th, diam * 0.5, 1);
  });
  pop();
}

function myRectangle(x, y, th, diam, depth) {
  if (depth >= 5) {
    return
  }
  push()
  rotate(th);
  translate(x, y);
  rect(0, 0, diam, diam);
  pop()

  const M = 4;
  const j = Math.floor(random(0, 4))
  const newTh = TWO_PI / M * j
  myRectangle(diam, diam, newTh, diam * 0.5, depth + 1);
}