basic circle packing

by greg gorlen

JavaScript

"use strict";

document.body.style.margin = 0;
document.body.style.overflow = "hidden";
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = innerWidth;
canvas.height = innerHeight;
document.body.appendChild(canvas);
const circles = [];
let r = canvas.width / 7;

while (r > 1) {
  let valid = false;
  let tries = 1000;
  let x; 
  let y;
  
  while (!valid && tries-- > 0) {
    valid = true;
    x = Math.random() * canvas.width;
    y = Math.random() * canvas.height;
    
    for (let i = 0; i < circles.length; i++) {
      const dx = circles[i].x - x;
      const dy = circles[i].y - y;
      
      if (Math.sqrt(dx * dx + dy * dy) <= circles[i].r + r) {
        valid = false;
        break;
      }
    }
  }

  if (valid) {
    circles.push({ x: x, y: y, r: r });
    
    ctx.beginPath();
    ctx.arc(x, y, r, 0, Math.PI * 2);
    ctx.stroke();
  }
  else {
    r *= 0.95;
  }
}