3e:null 3f:["$","title",null,{"children":"Circle Packing with Images | PolyaVerVla | Observable"}] 45:T457,circles = { let ctx = canvas2.getContext('2d'); ctx.clearRect(0, 0, canvas.width, canvas.height); function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } } function drawCircle(c) { ctx.beginPath(); ctx.arc(c.x, c.y, c.r, 0, 2 * Math.PI); ctx.stroke(); } function circleDist(c1, c2) { return Math.sqrt(Math.pow(c1.x - c2.x, 2) + Math.pow(c1.y - c2.y, 2)) - (c1.r + c2.r); } shuffleArray(validPixelsIdx); let circles = []; // array to hold placed circles radius and position for (let i=0; i circleDist(c, curr_c)) let minDist = Math.min(...dists); if (minDist < 0) continue; circles.push(curr_c); drawCircle(curr_c); } return circles; }46:[{"id":"99674005554b554ccd073a5e0b6750d4e8b225e41fbcc5dde504d9693d3b3262bcead61574be95aee1e82da34e62569ccc075e753087a4e7604f0f6fb21d09d5","href":"https://static.observableusercontent.com/files/99674005554b554ccd073a5e0b6750d4e8b225e41fbcc5dde504d9693d3b3262bcead61574be95aee1e82da34e62569ccc075e753087a4e7604f0f6fb21d09d5","name":"wolf_head.jpg","type":"image/jpeg","lastModified":1676586391856.288,"size":23722},{"id":"0be2f20997e67cfacb90e4cfd0d9825c34abb7a7d888e6563632723baf502bc524f3b96f2183db58540b85f158f4e92867578ded722f09d6c466bfedf9edeceb","href":"https://static.observableusercontent.com/files/0be2f20997e67cfacb90e4cfd0d9825c34abb7a7d888e6563632723baf502bc524f3b96f2183db58540b85f158f4e92867578ded722f09d6c466bfedf9edeceb","name":"masked_0.png","type":"image/png","lastModified":1676586391856.288,"size":794432},{"id":"986e166a1b1d2382f8663b18281abc1b1f8b1fc662e6a09d3bd2985b8544dc2e55b14cf38b25d0d49c49b6b04bec04ae926d7bb77d49831e12abc8915e0007ee","href":"https://static.observableusercontent.com/files/986e166a1b1d2382f8663b18281abc1b1f8b1fc662e6a09d3bd2985b8544dc2e55b14cf38b25d0d49c49b6b04bec04ae926d7bb77d49831e12abc8915e0007ee","name":"masked_1.png","type":"image/png","lastModified":1676586391856.288,"size":426616},{"id":"b0f77b70ce65b1e28951008a85272a9c23fd2d4bae27fb87d02ce411cd6e6c2e8cdb4a244c86f8c7dc9cc10f9c760287dd134de8998d8c523951d973407c8d83","href":"https://static.observableusercontent.com/files/b0f77b70ce65b1e28951008a85272a9c23fd2d4bae27fb87d02ce411cd6e6c2e8cdb4a244c86f8c7dc9cc10f9c760287dd134de8998d8c523951d973407c8d83","name":"masked_2.png","type":"image/png","lastModified":1676586391856.288,"size":405207}] 43:{"id":"1bf5f122fa859dc6","slug":null,"title":"Circle Packing with Images","thumbnail":"81b3545d2b99abff9fa3599428a903a46578c413cd0ac9725d82ab2abe72ada6","access_level":"public","create_time":"$D2023-02-16T22:26:31.856Z","update_time":"$D2023-02-16T22:26:31.856Z","view_time":null,"first_public_time":"$D2023-02-16T22:26:31.856Z","has_unpublished_edits":null,"fork":{"id":"b4107daeea1b9c33","slug":"circle-packing-with-images","title":"Circle Packing with Images","owner":{"id":"0a52f67e7713a78e","login":"e04e041d55f2ecc2","name":"Samuel Simplicio"}},"stars":0,"starred":false,"owner":{"type":"team","id":"43b1eb79430c1c9e","login":"polyavervla","name":"PolyaVerVla","avatar_url":"https://avatars-next.observableusercontent.com/def1fb759fc7f6c5f1f89625ec64fa2dd5514414fe04dce55fa7f04fc06d34bf","tier":"starter_2024","bio":"","following":false},"version":296,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e20572da921a2f50","login":"polyavervla","name":"PolyaVerVla","avatar_url":"https://avatars-next.observableusercontent.com/def1fb759fc7f6c5f1f89625ec64fa2dd5514414fe04dce55fa7f04fc06d34bf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e20572da921a2f50","login":"polyavervla","name":"PolyaVerVla","avatar_url":"https://avatars-next.observableusercontent.com/def1fb759fc7f6c5f1f89625ec64fa2dd5514414fe04dce55fa7f04fc06d34bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Circle Packing with Images","cells":[{"id":0,"value":"# Circle Packing with Images\n\nThis notebook shows how a simple circle packing algorithm can produce some beautiful results when the circles are replaced by images","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":4,"value":"canvas = htl.html`