2b:null 2c:["$","title",null,{"children":"Circles in a grid | Jean Constant | Observable"}] 31:Tcaf,draw = () => { regen; ctx.clearRect(0, 0, cwidth, cheight); ctx.fillStyle = "white"; ctx.fillRect(0, 0, cwidth, cheight); let columns = cwidth / cell_size; let rows = cheight / cell_size; let cstep = cell_size; let rstep = cell_size; function getCellIndex(column, row) { return row * columns + column; } function getCellColumnRow(index) { let column = index % columns; let row = Math.floor(index / columns); return [column, row]; } function expandSquare(cells, covered, index) { let start = index; let [scol, srow] = getCellColumnRow(index); let w = 1; let h = 1; function _expand() { if (w === h) { let to_expand = []; let next_column = scol + w; if (next_column === columns) return [w, h]; for (let i = 0; i < h; i++) { let eindex = getCellIndex(next_column, srow + i); let expand_candidate = cells[eindex]; let expand_check = expand_candidate === null && !covered.includes(eindex); if (!expand_check) return [w, h]; } // all expand checks passed w++; return _expand(); } else { let to_expand = []; let next_row = srow + h; if (next_row === rows) return [w - 1, h]; for (let i = 0; i < w; i++) { let eindex = getCellIndex(scol + i, next_row); let expand_candidate = cells[eindex]; to_expand.push(expand_candidate); let expand_check = expand_candidate === null && !covered.includes(eindex); if (!expand_check) return [w - 1, h]; } // all expand checks passed h++; return _expand(); } } return _expand(); } let cells = []; for (let r = 0; r < rows; r++) { for (let c = 0; c < columns; c++) { cells.push(null); } } let randomly_filled_cells = cells.map(c => Math.random() > 0.9 ? "w" : null ); let expanded = []; let covered = []; for (let i = 0; i < cells.length; i++) { let cell = randomly_filled_cells[i]; if (cell === null && !covered.includes(i)) { let [col, row] = getCellColumnRow(i); let [w, h] = expandSquare(randomly_filled_cells, covered, i); expanded.push([col, row, w, h]); // add to covered; for (let r = 0; r < h; r++) { for (let c = 0; c < w; c++) { let cindex = getCellIndex(col + c, row + r); covered.push(cindex); } } } } // add obstacles into expanded so we get every cell filled (order does not matter in this case) // let filled_cells = randomly_filled_cells.filter(c => c === "w").map(c =>; let filled_converted = []; for (let i = 0; i < cells.length; i++) { let cell = randomly_filled_cells[i]; if (cell === "w") { let [c, r] = getCellColumnRow(i); filled_converted.push([c, r, 1, 1]); } } let combined = [...expanded, ...filled_converted]; ctx.fillStyle = "black"; for (let cell of combined) { let [c, r, w, h] = cell; ctx.beginPath(); ctx.arc( c * cstep + (w * cstep) / 2, r * rstep + (h * rstep) / 2, (w * cstep) / 2- 2, 0, 2 * Math.PI, false ); ctx.fill(); } }32:[] 2f:{"id":"e19b8450fafae3e4","slug":"circles-in-a-grid","title":"Circles in a grid","thumbnail":"f9aeaf3ec97ba066b05689c334ab99cea78e23815c642ec9ebd679e0f883eb49","access_level":"public","create_time":"$D2018-12-02T09:30:59.611Z","update_time":"$D2018-12-02T09:32:32.135Z","view_time":null,"first_public_time":"$D2018-12-02T09:32:44.442Z","fork":{"id":"5a7f61237b28aa5b","slug":"circles-in-a-grid","title":"Circles in a grid","owner":{"id":"bf2c1edd2a33aa1b","login":"grantcuster","name":"Grant Custer"}},"stars":2,"starred":false,"owner":{"type":"team","id":"779801569d020938","login":"bysance","name":"Jean Constant","avatar_url":"https://avatars-next.observableusercontent.com/d9f8e121946490c519c81e74442053389852cc121f55569dbcd93451890d616e","tier":"starter_2024"},"version":561,"publish_version":561,"role":null,"authored":false,"authors":[{"type":"individual","id":"8551b105ce4f03cb","login":"bysance","name":"Jean Constant","avatar_url":"https://avatars-next.observableusercontent.com/d9f8e121946490c519c81e74442053389852cc121f55569dbcd93451890d616e","tier":null}],"members":[{"type":"individual","id":"8551b105ce4f03cb","login":"bysance","name":"Jean Constant","avatar_url":"https://avatars-next.observableusercontent.com/d9f8e121946490c519c81e74442053389852cc121f55569dbcd93451890d616e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Circles in a grid","cells":[{"id":0,"value":"md`# Circles in a grid`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"canvas = {\n draw();\n yield ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"viewof regen = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":483,"value":"md`Inspired by [this work](http://feed.grantcuster.com/post/20181016T171452195Z) by Process Studio. See how the grid works in [the previous notebook](https://beta.observablehq.com/@grantcuster/fill-grid-with-largest-possible-squares-around-obstacles).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"ctx = DOM.context2d(cwidth, cheight)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":506,"value":"cwidth = Math.floor(width / cell_size) * cell_size","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":510,"value":"cheight = Math.ceil(cwidth / cell_size / 1) * cell_size","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"cell_size = 120","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"