const h = 600;

const num = 3000; // 試行回数

let pg,pg2;

​

// 参考：https://jp.deconbatch.com/2021/06/characteristic-circle-packing.html

function setup() {  

  createCanvas(500, 500,WEBGL);

  translate(-width/2,-height/2);

  noStroke();

  background("#FBF9F1");

  pg = createGraphics(width, height);

  pg.strokeWeight(3);

  pg.noFill();

  const colors = ["#FAEF5D","#FF004D","#7E2553","#1D2B53"];

  push();

  pg.translate(width/2,height/2);

  const circles = getRandomCircles(num, w * 0.4, h * 0.4);

  const circles2 = getRandomCircles(num, w * 0.4, h * 0.4);

  circles.forEach((c) => pg.circle(c.x, c.y, c.z));

  pg.noStroke();

  pg.drawingContext.filter = 'drop-shadow(10px 10px 10px #2e2e2e)';

  circles2.forEach((c) =>{ 

    pg.fill(random(colors));

    pg.circle(c.x, c.y, c.z)

  });

  image(pg,0,0);

  pop();

}

​

keyPressed = () => {

  if (key === 's') {

    saveCanvas(canvas, 'canvas', 'png');

    //saveGif('canvas', 4);

  }

};

​

function getRandomCircles(_num, _w, _h) {

  let circles = [];

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

    let x = random(-1, 1) * _w;

    let y = random(-1, 1) * _h;

    let z = random(30, 150); // z軸の値を円の大きさとして使用

    if (circles.every((c) => dist(x, y, c.x, c.y) > (z + c.z) * 0.5)) {

      circles.push(createVector(x, y, z));

    }

  }

  return circles;

}

​

​

​