31:T944,{ const { width, height } = imgInfo; const image = await FileAttachment("observable-o@2.png").image(); const ctx = DOM.context2d(width, height); const startR = 1; const distPad = 3; let colorInput = 0; const backgroundColor = "white"; const colorScale = d3.scaleSequential((t) => d3.hsl(t * 360, 1, 0.5).formatHex() ); //const colorScale = (t) => d3.color(d3.interpolateTurbo(t)).copy({ opacity: 0.4 }).toString(); function newCircle(circles) { const randomSpotIdx = d3.randomInt(0, imgInfo.spots.length)(); //const [x, y] = [Math.random() * width, Math.random() * height]; const [x, y] = imgInfo.spots[randomSpotIdx]; for (let i = 0; i < circles.length; i++) { const c = circles[i]; const d = Math.hypot(x - c.x, y - c.y); if (d <= c.r) return null; } colorInput += 0.001; return { x, y, r: startR, color: colorScale(colorInput) }; } function clearCanvas() { ctx.fillStyle = backgroundColor; ctx.fillRect(0, 0, width, height); } function drawCircle({ x, y, r, color }) { ctx.beginPath(); ctx.arc(x, y, r, Math.PI * 2, false); ctx.fillStyle = color; ctx.strokeStyle = "black"; ctx.fill(); ctx.stroke(); } function overlaps(c, circles) { for (let i = 0; i < circles.length; i++) { const other = circles[i]; if (other != c) { const d = Math.hypot(other.x - c.x, other.y - c.y); if (d - distPad < c.r + other.r) return true; } } return false; } const grow = (c) => ({ ...c, ...{ r: c.r + 1 } }); const edges = ({ x, y, r }) => x + r > width - 2 || x - r < 2 || y + r > height - 2 || y - r < 2; function draw() { clearCanvas(); ctx.drawImage(image, 0, 0); const total = 5; let count = 0; let attempts = 0; while (count < total) { const nc = newCircle(circles); if (nc) { circles.push(nc); count += 1; } attempts += 1; if (attempts > maxAttemps) { loop = false; console.log("Done"); } } circles.forEach((c) => { drawCircle(c); }); circles = circles.map((c) => { return edges(c) || overlaps(c, circles) ? c : grow(c); }); } const drawRate = 1; const maxAttemps = 30; let loop = true; let circles = []; while (loop) { draw(); yield ctx.canvas; } }32:[{"id":"0adb805ba6c13fc2a023ddbae00251b4b3750c6e94515d210cffdf29ae96084baeed14d8da9604bb33565dbf976873252a6ea4e18567dc9f4aa26cfb10f0e44c","href":"https://static.observableusercontent.com/files/0adb805ba6c13fc2a023ddbae00251b4b3750c6e94515d210cffdf29ae96084baeed14d8da9604bb33565dbf976873252a6ea4e18567dc9f4aa26cfb10f0e44c","name":"observable-o@2.png","type":"image/png","lastModified":1627657021701.886,"size":45127}] 2f:{"title":"Circle Packing - Observable Edition","cells":[{"id":0,"value":"md`# Circle Packing - Observable Edition`","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"frameRate = {\n let o = {},\n n = { c: 0 };\n while (true) {\n yield md`### ${o.c} frames/sec ${o.c < 30 ? \"🔴\" : \"🟢\"}`;\n n = { s: ~~(Date.now() / 1000), c: n.c + 1 };\n o.s != n.s && ((o = { ...n }), (n.c = 0));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":624,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":926,"value":"imgInfo = {\n const image = await FileAttachment(\"observable-o@2.png\").image();\n image.style.maxWidth = \"100%\";\n\n let ctx = DOM.canvas(image.width, image.height).getContext(\"2d\");\n ctx.drawImage(image, 0, 0);\n const data = ctx.getImageData(0, 0, image.width, image.height);\n const width = image.width;\n const height = image.height;\n\n console.log(width, height);\n const isBlack = (x, y) => ctx.getImageData(x, y, 1, 1).data[3] > 0;\n\n const spots = [];\n for (let x = 0; x < width; x++) {\n for (let y = 0; y < height; y++) {\n if (isBlack(x, y)) spots.push([x, y]);\n }\n }\n\n return {\n spots,\n data,\n width,\n height\n };\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}