3f:null 40:["$","title",null,{"children":"Circle Packing with Images | Samuel Simplicio | Observable"}] 46: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; }47:[{"id":"0be2f20997e67cfacb90e4cfd0d9825c34abb7a7d888e6563632723baf502bc524f3b96f2183db58540b85f158f4e92867578ded722f09d6c466bfedf9edeceb","href":"https://static.observableusercontent.com/files/0be2f20997e67cfacb90e4cfd0d9825c34abb7a7d888e6563632723baf502bc524f3b96f2183db58540b85f158f4e92867578ded722f09d6c466bfedf9edeceb","name":"masked_0.png","type":"image/png","lastModified":1663020694317.457,"size":794432},{"id":"986e166a1b1d2382f8663b18281abc1b1f8b1fc662e6a09d3bd2985b8544dc2e55b14cf38b25d0d49c49b6b04bec04ae926d7bb77d49831e12abc8915e0007ee","href":"https://static.observableusercontent.com/files/986e166a1b1d2382f8663b18281abc1b1f8b1fc662e6a09d3bd2985b8544dc2e55b14cf38b25d0d49c49b6b04bec04ae926d7bb77d49831e12abc8915e0007ee","name":"masked_1.png","type":"image/png","lastModified":1663020693887.605,"size":426616},{"id":"b0f77b70ce65b1e28951008a85272a9c23fd2d4bae27fb87d02ce411cd6e6c2e8cdb4a244c86f8c7dc9cc10f9c760287dd134de8998d8c523951d973407c8d83","href":"https://static.observableusercontent.com/files/b0f77b70ce65b1e28951008a85272a9c23fd2d4bae27fb87d02ce411cd6e6c2e8cdb4a244c86f8c7dc9cc10f9c760287dd134de8998d8c523951d973407c8d83","name":"masked_2.png","type":"image/png","lastModified":1663020694168.391,"size":405207},{"id":"99674005554b554ccd073a5e0b6750d4e8b225e41fbcc5dde504d9693d3b3262bcead61574be95aee1e82da34e62569ccc075e753087a4e7604f0f6fb21d09d5","href":"https://static.observableusercontent.com/files/99674005554b554ccd073a5e0b6750d4e8b225e41fbcc5dde504d9693d3b3262bcead61574be95aee1e82da34e62569ccc075e753087a4e7604f0f6fb21d09d5","name":"wolf_head.jpg","type":"image/jpeg","lastModified":1663020693641.817,"size":23722}] 44:{"id":"b4107daeea1b9c33","slug":"circle-packing-with-images","title":"Circle Packing with Images","thumbnail":"dbe6dbe4563b2c0a7d0e251c690f6311bde1ad6251e270b02af6629d902d35c1","access_level":"public","create_time":"$D2022-09-12T22:01:38.519Z","update_time":"$D2022-09-13T17:45:06.050Z","view_time":null,"first_public_time":"$D2022-09-13T20:06:44.536Z","has_unpublished_edits":null,"fork":false,"stars":6,"starred":false,"owner":{"type":"team","id":"0a52f67e7713a78e","login":"e04e041d55f2ecc2","name":"Samuel Simplicio","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":"starter_2024","bio":"","following":false},"version":296,"publish_version":296,"role":null,"authored":false,"authors":[{"type":"individual","id":"e04e041d55f2ecc2","login":"e04e041d55f2ecc2","name":"Samuel Simplicio","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"e04e041d55f2ecc2","login":"e04e041d55f2ecc2","name":"Samuel Simplicio","avatar_url":"https://avatars-next.observableusercontent.com/c755f3e157b7a2713dd9b99ae6d708461888bf021a63291ec0082c0be57acf53","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"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`