🎇 Foam Bubble Density Structure

📝 p5.js

const CONFIG = {
  canvasSize: 1000,
  bgColor: 15,
  fillColor: [30, 190, 180],
  maxAttempts: 5000,
  minRadius: 5,
};

let circles = [];
let attempts = 0;

function setup() {
  createCanvas(CONFIG.canvasSize, CONFIG.canvasSize);
  background(CONFIG.bgColor);
  noStroke();
}

function draw() {
  if (attempts >= CONFIG.maxAttempts) {
    noLoop();
    return;
  }

  const pos = { x: random(width), y: random(height) };
  const maxR = findMaxRadius(pos.x, pos.y);

  if (maxR >= CONFIG.minRadius) {
    addCircle(pos.x, pos.y, maxR);
    attempts = 0;
  } else {
    attempts++;
  }
}

function addCircle(x, y, r) {
  circles.push({ x, y, r });
  fill(...CONFIG.fillColor, random(100, 255));
  circle(x, y, r * 2);
}

function findMaxRadius(x, y) {
  let maxR = min(x, y, width - x, height - y);

  for (const c of circles) {
    const d = dist(x, y, c.x, c.y);
    maxR = min(maxR, d - c.r);
  }

  return max(maxR, 0);
}

function mousePressed() {
  circles = [];
  attempts = 0;
  background(CONFIG.bgColor);
  loop();
}

📝 p5.js + Comment

// 전역 설정 객체
const CONFIG = {
  canvasSize: 1000,          // 캔버스 가로·세로 길이 (정사각형)
  bgColor: 15,               // 배경색 (0-255 grayScale 값, 15 = 매우 어두운 회색)
  fillColor: [30, 190, 180], // 채우기 색상 (RGB 기반)
  maxAttempts: 5000,         // 한 프레임에 원을 그릴 때 허용할 최대 재시도 횟수
  minRadius: 5,              // 그려질 원의 최소 반지름 (이보다 작으면 포기)
};

// 이미 생성된 원(좌표+반지름)들을 저장할 배열
let circles = [];

// 현재 프레임에서 연속으로 ‘실패’한 횟수를 셀 변수
let attempts = 0;

function setup() {
  // p5.js가 제공하는 createCanvas로 1000×1000 픽셀 직사각형 캔버스 생성
  createCanvas(CONFIG.canvasSize, CONFIG.canvasSize);
  
  // 배경 한 번 칠하기 (grayScale 15 = 거의 검은색에 가까운 회색)
  background(CONFIG.bgColor);
  
  // stroke(윤곽선)을 끄면 원이 테두리 없이 깔끔하게 채워짐
  noStroke();
}

function draw() {
  // 1. 최대 시도 횟수를 넘기면 더 이상 그리지 않고 루프 정지
  if (attempts >= CONFIG.maxAttempts) {
    noLoop(); // p5 루프 중단 → draw()가 더 이상 자동 호출 안 됨
    return;
  }

  // 2. 캔버스 안의 임의 한 점 선택 (0 ≤ x < width, 0 ≤ y < height)
  const pos = { x: random(width), y: random(height) };

  // 3. 그 점에서 그릴 수 있는 ‘최대 반지름’ 계산 (화면 경계+기존 원과 겹치지 않도록)
  const maxR = findMaxRadius(pos.x, pos.y);

  // 4. 최소 반지름 이상의 공간이 확보되면 실제 원 생성, 아니면 시도 횟수 증가
  if (maxR >= CONFIG.minRadius) {
    addCircle(pos.x, pos.y, maxR); // 화면에 그리고 배열에 저장
    attempts = 0;                  // 연속 실패 횟수 초기화 (성공했으니)
  } else {
    attempts++;                    // 실패 누적
  }
}

function addCircle(x, y, r) {
  // 새 원 정보를 배열에 push → 나중에 충돌 검사 때 재사용
  circles.push({ x, y, r });

  // fill 색상은 설정값(RGB) + 알파값은 100~255 사이 랜덤
  fill(...CONFIG.fillColor, random(100, 255));

  // p5 circle 함수: (중심x, 중심y, 지름) → 지름 = 반지름×2
  circle(x, y, r * 2);
}

function findMaxRadius(x, y) {
  // 일단 화면 네 변까지의 최소 거리를 구해 ‘경계밖으로 삐져나가지 않는’ 최대 반지름 초기값 설정
  let maxR = min(x, y, width - x, height - y);

  // 기존에 생성된 모든 원과의 거리를 비교해 서로 겹치지 않도록 ‘여유’ 확보
  for (const c of circles) {
    const d = dist(x, y, c.x, c.y); // 두 원 중심 사이의 거리
    maxR = min(maxR, d - c.r);    // ‘내 반지름’ = (중심간 거리 - 상대 반지름) 이하
  }

  // 음수가 나올 수 있으므로 0 이상으로 클램프
  return max(maxR, 0);
}

function mousePressed() {
  // 마우스를 클릭하면 초기화
  circles = [];                 // 저장된 원 정보 전부 삭제
  attempts = 0;                 // 실패 횟수 리셋
  background(CONFIG.bgColor);   // 배경색으로 다시 칠하기
  loop();                       // 혹시 noLoop 상태였다면 draw 재시작
}