2c:null 2d:["$","title",null,{"children":"Jezzball Part 4 (Grid/Blocking) | Sam Learner | Observable"}] 32:T6c1,md`# Jezzball Part 4 (Grid/Blocking) This is the fourth step in recreating a classic Windows game, [Jezzball](https://en.wikipedia.org/wiki/JezzBall), on canvas. Here, I've lined the canvas with grid cells which, on the completion of a bar, can be marked as "scored" if they're in an enclosed section with no balls. Implementing this actually ended up being, by far, the trickiest part of this project. After a bar is completed, at the first tick where there are no other active bars, it triggers a modified flood fill algorithm. First, I mark each cell that contains a ball at that tick. Then, I start with the group of cells adjacent to the new/finished bar, searching for any enclosed sections that they belong to. For each of those sections, if they don’t contain any ball cells, each grid cell in the section is “scored”, shading it dark gray. (Eventually, this will be used to score the game). See this full collection [here](https://observablehq.com/collection/@sdl60660/jezzball) Click anywhere to add a bar to the simulation and divide the canvas. Toggle between vertical and horizontal bars using the radio button above the canvas. **Credits**: The original ball collision code here is taken and adapted from Harry Stevens' ["Bouncing Balls" block](https://bl.ocks.org/HarryStevens/dbceb1a3590a6435c131dab724c0ead1), with a little refactoring and some interactivity added. The elastic collision logic is derived from [this document](http://cobweb.cs.uga.edu/~maria/classes/4070-Spring-2017/Adam%20Brookes%20Elastic%20collision%20Code.pdf) and [this code](https://gist.github.com/winduptoy/a1aa09c3499e09edbd33) and now lives in its own notebook [here](https://observablehq.com/@sdl60660/elastic-collisions) `33:T767,class Simulation { constructor({ width, height, ctx, balls, bars, grid }) { this.width = width || 800; this.height = height || 800; this.center = [this.width / 2, this.height / 2]; this.ctx = ctx || null; this.maxRadius = d3.max(balls, (a) => a.radius); this.quadtree = null; this.balls = balls || []; this.bars = bars || []; this.grid = grid; this.grid.forEach((cell) => { cell.scored = false; }); this.fillQueue = []; // Collision methods this.fastDetectBallCollision = fastDetectBallCollision; this.detectBallWallCollision = detectBallWallCollision; this.detectBarWallCollision = detectBarWallCollision; this.detectBallBarCollision = detectBallBarCollision; this.detectBarToBarCollision = detectBarToBarCollision; this.evaluateGrid = evaluateGrid; } clearCanvas() { this.ctx.fillStyle = "#ffffff"; this.ctx.clearRect(0, 0, width, height); } tick() { this.clearCanvas(); this.grid.forEach((cell) => { cell.drawCell(); }); this.quadtree = d3 .quadtree() .x((d) => d.x) .y((d) => d.y) .extent([-1, -1], [this.width + 1, this.height + 1]) .addAll(this.balls); this.balls.forEach((ball) => { this.detectBallBarCollision(ball); this.detectBallWallCollision(ball); this.fastDetectBallCollision(ball); ball.tick(); ball.drawCircle(); }); this.bars = this.bars.filter((bar) => bar.remove === false); this.bars.forEach((bar) => { if (bar.active) { this.detectBarWallCollision(bar); this.detectBarToBarCollision(bar); bar.tick(); } bar.drawRect(); }); if (this.bars.filter((bar) => bar.active === true).length === 0) { this.fillQueue.forEach((bar) => { this.evaluateGrid(bar); }); this.fillQueue = []; } } }34:T47d,fastDetectBallCollision = function (ball) { const r = ball.radius + this.maxRadius; const nx1 = ball.x - r; const nx2 = ball.x + r; const ny1 = ball.y - r; const ny2 = ball.y + r; this.quadtree.visit((visited, x1, y1, x2, y2) => { if (visited.data && visited.data.id !== ball.id) { // Collision if ( geometric.lineLength([ball.pos, visited.data.pos]) < ball.radius + visited.data.radius ) { const keep = geometric.lineLength([ geometric.pointTranslate(ball.pos, ball.angle, ball.speed), geometric.pointTranslate( visited.data.pos, visited.data.angle, visited.data.speed ) ]); const swap = geometric.lineLength([ geometric.pointTranslate( ball.pos, visited.data.angle, visited.data.speed ), geometric.pointTranslate(visited.data.pos, ball.angle, ball.speed) ]); if (keep < swap) { elasticCollision(ball, visited.data, false); } } } return x1 > nx2 || x2 < nx1 || y1 > ny2 || y2 < ny1; }); }35:T5be,detectBallBarCollision = function (ball) { const ballLeft = ball.x - ball.radius; const ballRight = ball.x + ball.radius; const ballTop = ball.y + ball.radius; const ballBottom = ball.y - ball.radius; this.bars.forEach((bar) => { const verticalCollision = ((ballRight >= bar.right && ballLeft <= bar.right) || (ballLeft <= bar.left && ballRight >= bar.left)) && Math.round(ball.y) <= bar.bottom && Math.round(ball.y) >= bar.top; const horizontalCollision = ((ballTop >= bar.top && ballBottom <= bar.top) || (ballBottom <= bar.bottom && ballTop >= bar.bottom)) && Math.round(ball.x) <= bar.right && Math.round(ball.x) >= bar.left; if (verticalCollision || horizontalCollision) { if (bar.active) { bar.remove = true; } else { const reflected = geometric.angleReflect( ball.angle, verticalCollision ? 90 : 0 ); const t0 = geometric.pointTranslate(ball.pos, ball.angle, ball.speed); const t1 = geometric.pointTranslate(ball.pos, reflected, ball.speed); const barTargetCoordinates = verticalCollision ? [(bar.left + bar.right) / 2, ball.y] : [ball.x, (bar.top + bar.bottom) / 2]; const l0 = geometric.lineLength([barTargetCoordinates, t0]); const l1 = geometric.lineLength([barTargetCoordinates, t1]); if (l1 > l0) { ball.angle = reflected; } } } }); }36:T69d,detectBarToBarCollision = function (bar) { const possibleBars = this.bars.filter((candidateBar) => { if ( candidateBar.originX === bar.originX && candidateBar.originY === bar.originY ) { return false; } if (bar.direction === "left") { return candidateBar.originX < bar.originX; } else if (bar.direction === "right") { return candidateBar.originX > bar.originX; } else if (bar.direction === "up") { return candidateBar.originY < bar.originY; } else { return candidateBar.originY > bar.originY; } }); possibleBars.forEach((collisionBar) => { if ( (bar.direction === "left" && bar.left <= collisionBar.right && bar.top <= collisionBar.bottom && bar.bottom >= collisionBar.top) || (bar.direction === "right" && bar.right >= collisionBar.left - 1 && bar.top <= collisionBar.bottom && bar.bottom >= collisionBar.top) || (bar.direction === "up" && bar.top <= collisionBar.bottom && bar.left <= collisionBar.right && bar.right >= collisionBar.left) || (bar.direction === "down" && bar.bottom >= collisionBar.top - 1 && bar.left <= collisionBar.right && bar.right >= collisionBar.left) ) { bar.active = false; bar.color = lightGray; this.grid .filter( (cell) => cell.y < bar.bottom && cell.y >= bar.top && cell.x >= bar.left && cell.x < bar.right ) .forEach((cell) => { cell.scored = true; }); // this.evaluateGrid(bar); this.fillQueue.push(bar); } }); }37:T51f,evaluateGrid = function(bar) { const startingCells = bar.orientation === "vertical" ? this.grid.filter(cell => { return ( ((cell.x === bar.left - gridSize) || (cell.x === bar.right + 1)) && cell.y >= bar.top && cell.y < bar.bottom && cell.visited === false ) }) : this.grid.filter(cell => { return ( ((cell.y === bar.top - gridSize) || (cell.y === bar.bottom + 1)) && cell.x >= bar.left && cell.x < bar.right && cell.visited === false ) }) // startingCells.forEach(cell => { cell.scored = true }); const ballCells = this.balls.map(ball => { const x = roundToGrid(ball.x) / gridSize; const y = roundToGrid(ball.y) / gridSize; const cellId = x*gridHeight + y; return cellId; }) // .forEach(id => { this.grid.find(cell => cell.id === id).scored = true; }); let visited = []; startingCells.forEach(startCell => { if (!visited.includes(startCell.id)) { const section = floodFill([startCell], this.grid); if (!section.find(id => ballCells.includes(id))) { section.forEach(id => { this.grid[id].scored = true }); } visited = [...visited, ...section]; } }); }38:T784,class Bar { constructor({ id, originX, originY, direction, ctx, height, width, active }) { this.id = id; this.direction = direction; this.color = direction === "up" || direction === "left" ? "red" : "blue"; this.orientation = (direction === "up" || direction === "down") ? "vertical" : "horizontal"; this.multiplier = (this.direction === "up" || this.direction === "left") ? -1 : 1; this.originX = direction === "left" ? roundToGrid(originX) - 1 : roundToGrid(originX); this.originY = direction === "up" ? roundToGrid(originY) - 1 : roundToGrid(originY); this.height = height || this.orientation == "vertical" ? 0 : (gridSize - 1); this.width = width || this.orientation === "horizontal" ? 0 : (gridSize - 1); this.ctx = ctx || null; this.growthSpeed = 2; this.active = active === undefined ? true : active; this.remove = false; this.left = Math.min((this.originX + this.width), this.originX); this.right = Math.max((this.originX + this.width), this.originX); this.top = Math.min((this.originY + this.height), this.originY); this.bottom = Math.max((this.originY + this.height), this.originY); } drawRect() { this.ctx.beginPath(); this.ctx.rect(this.originX, this.originY, this.width, this.height); this.ctx.fillStyle = this.color; this.ctx.strokeStyle = this.color; this.ctx.fill(); this.ctx.stroke(); } tick() { if (this.orientation === "vertical") { this.height += this.multiplier*this.growthSpeed; } else { this.width += this.multiplier*this.growthSpeed; } this.left = Math.min((this.originX + this.width), this.originX); this.right = Math.max((this.originX + this.width), this.originX); this.top = Math.min((this.originY + this.height), this.originY); this.bottom = Math.max((this.originY + this.height), this.originY); } }39:[] 30:{"id":"b73e4037d5e9244e","slug":"jezzball-part-4-grid-blocking","title":"Jezzball Part 4 (Grid/Blocking)","thumbnail":"348a154c6238343f734907c4cf844b1699ed200970620f096131844c33e53a47","access_level":"public","create_time":"$D2021-04-30T01:35:47.240Z","update_time":"$D2021-05-01T03:20:17.604Z","view_time":null,"first_public_time":"$D2021-04-30T15:54:13.667Z","has_unpublished_edits":null,"fork":{"id":"961b3052fb5eb4af","slug":"jezzball-part-3-full-bar-interaction","title":"Jezzball Part 3 (Full Bar Interaction)","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"stars":0,"starred":false,"owner":{"type":"team","id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":"starter_2024"},"version":2291,"publish_version":2291,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null}],"members":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null,"role":"editor"},{"type":"individual","id":"a0057ae996139c1c","login":"daniellearner","name":"Daniel Learner","avatar_url":"https://avatars-next.observableusercontent.com/0f890ac6e627efd954b5033eda9ae83936209293ddbc057c5a8624ec09069ab2","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"333571dddb17c12c","slug":"jezzball","title":"Jezzball","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"type":"notebook","body":{"titling":"auto","title":"Jezzball Part 4 (Grid/Blocking)","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"viewof maxSpeed = Range([1, 10], {value: 6, step: 1, label: \"Max Speed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"viewof numBalls = Range([1, 100], {step: 1, value: 7, label: \"Number of Balls\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1413,"value":"viewof barDirection = Radio([\"Horizontal\", \"Vertical\"], {label: \"Bar Direction\", value: \"Horizontal\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"canvas = {\n const context = DOM.context2d(width, height);\n context.fillStyle = \"#ffffff\";\n context.clearRect(0, 0, width, height);\n\n context.canvas.id = \"main-canvas\";\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":712,"value":"ctx = canvas.getContext(\"2d\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1814,"value":"scoredCells = simulation.grid.filter((a) => a.scored)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"mutable clickPosition = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"// Click handler\nd3.select(\"#main-canvas\").on(\"click\", (e) => {\n mutable clickPosition = d3.pointer(e);\n const [x, y] = d3.pointer(e);\n\n // Check if this grid position is already scored (occupied by bar or scored space)\n let gridPositionFilled = false;\n const gridX = roundToGrid(x) / gridSize;\n const gridY = roundToGrid(y) / gridSize;\n \n const cellId = gridX*gridHeight + gridY;\n \n // If so, return without spawning new bars\n if (simulation.grid[cellId].scored) {\n return;\n }\n\n // Otherwise, spawn two new bar segments to the left/right or up/down, depending on selected orientation\n if (barDirection === \"Horizontal\") {\n addBar({ x, y, direction: \"left\" });\n addBar({ x, y, direction: \"right\" });\n } else {\n addBar({ x, y, direction: \"up\" });\n addBar({ x, y, direction: \"down\" });\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"addBall = ({ x, y }) => {\n const ball = new Ball({ id: simulation.balls.length, x, y, ctx });\n simulation.balls = [...simulation.balls, ball];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":846,"value":"addBar = ({ x, y, direction }) => {\n const id = `${x}-${y}-${direction}`;\n const bar = new Bar({ id, originX: x, originY: y, direction, ctx })\n simulation.bars = [...simulation.bars, bar];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"init = {\n const tick = () => {\n requestAnimationFrame(tick);\n\n simulation.clearCanvas();\n simulation.tick();\n };\n\n tick();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"simulation = new Simulation({ width, height, ctx, balls: ballSet, grid: gridSet })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1754,"value":"gridSet = {\n \n const gridCells = [];\n let id = 0;\n\n for (let x = 0; x < width; x += gridSize) {\n for (let y = 0; y < height; y += gridSize) {\n \n const neighbors = [];\n \n // up (if not at top)\n if (id % gridHeight !== 0) {\n neighbors.push(id-1);\n }\n // down (if not at bottom)\n if ((id + 1) % gridHeight !== 0) {\n neighbors.push(id+1);\n }\n // left (if not at left edge)\n if (id - gridHeight >= 0) {\n neighbors.push(id - gridHeight);\n }\n // right (if not at right edge)\n if (id + gridHeight < gridHeight*gridWidth) {\n neighbors.push(id + gridHeight);\n } \n \n gridCells.push(\n new GridCell({\n id,\n x,\n y,\n width: (gridSize - 1),\n height: (gridSize - 1), ctx,\n neighbors \n })\n );\n id += 1;\n }\n }\n\n return gridCells;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"ballSet = {\n const balls = [];\n for (let index = 0; index < numBalls; ++index) {\n const ball = new Ball({\n id: index,\n x: d3.randomUniform(0, width)(),\n y: d3.randomUniform(0, height)(),\n radius: d3.randomUniform(5, 9)(),\n color: d3.schemeCategory10[Math.round(d3.randomUniform(0, 9)())],\n speed: d3.randomUniform(1, maxSpeed)(),\n ctx\n });\n balls.push(ball);\n }\n\n return balls;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2255,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2245,"value":"detectBallWallCollision = function(ball) {\n // Detect sides\n const wallVertical = ball.x <= ball.radius || ball.x >= this.width - ball.radius;\n const wallHorizontal = ball.y <= ball.radius || ball.y >= this.height - ball.radius;\n \n if (wallVertical || wallHorizontal) {\n \n const t0 = geometric.pointTranslate(ball.pos, ball.angle, ball.speed);\n const l0 = geometric.lineLength([this.center, t0]);\n \n const reflected = geometric.angleReflect(ball.angle, wallVertical ? 90 : 0);\n const t1 = geometric.pointTranslate(ball.pos, reflected, ball.speed);\n const l1 = geometric.lineLength([this.center, t1]);\n \n if (l1 < l0) {\n ball.angle = reflected;\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2240,"value":"detectBarWallCollision = function (bar) {\n // Determine wall collision\n const wallDistance =\n bar.direction === \"up\"\n ? bar.originY + bar.height\n : bar.direction === \"down\"\n ? height - (bar.originY + bar.height)\n : bar.direction === \"left\"\n ? bar.originX + bar.width\n : this.width - (bar.originX + bar.width);\n\n if (wallDistance <= 0) {\n bar.active = false;\n bar.color = lightGray;\n bar.drawRect();\n bar.multiplier = 0;\n\n this.grid\n .filter(\n (cell) =>\n cell.y < bar.bottom &&\n cell.y >= bar.top &&\n cell.x >= bar.left &&\n cell.x < bar.right\n )\n .forEach((cell) => {\n cell.scored = true;\n });\n\n this.fillQueue.push(bar);\n // this.evaluateGrid(bar);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2236,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2228,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2217,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1804,"value":"floodFill = (queue, grid) => {\n const section = [queue[0].id];\n \n while (queue.length) {\n const cell = queue.shift();\n\n cell.neighbors.forEach(neighbor => {\n const neighborCell = grid[neighbor];\n \n if (neighborCell.scored === false && neighborCell.visited === false) {\n neighborCell.visited = true;\n section.push(neighbor);\n queue.push(neighborCell);\n }\n });\n }\n\n return section;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"class Ball {\n constructor({ id, x, y, radius, angle, speed, color, ctx }) {\n this.id = id;\n this.x = x || 10;\n this.y = y || 10;\n this.pos = [x, y];\n this.radius = radius || d3.randomUniform(5, 9)();\n this.mass = radius * radius;\n this.angle = angle || d3.randomUniform(0, 360)();\n this.speed = speed || d3.randomUniform(1, maxSpeed)();\n this.color =\n color || d3.schemeCategory10[Math.round(d3.randomUniform(0, 9)())];\n this.ctx = ctx || null;\n }\n\n drawCircle() {\n this.ctx.beginPath();\n this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);\n this.ctx.fillStyle = this.color;\n this.ctx.stroke();\n this.ctx.fill();\n }\n\n tick() {\n [this.x, this.y] = this.pos = geometric.pointTranslate(\n this.pos,\n this.angle,\n this.speed\n );\n // this.x += 0.1*this.speed;\n // this.y += 0.1*this.speed;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"class GridCell {\n constructor({ id, x, y, width, height, ctx, neighbors }) {\n this.id = id;\n\n this.x = x;\n this.y = y;\n\n this.width = width || (gridSize - 1);\n this.height = height || (gridSize - 1);\n\n this.ctx = ctx;\n\n this.neighbors = neighbors || [];\n\n this.scored = false;\n this.visited = false;\n }\n\n drawCell() {\n this.visited = false;\n \n this.ctx.beginPath();\n this.ctx.rect(this.x, this.y, this.width, this.height);\n\n this.ctx.fillStyle = this.scored ? darkGray : backgroundColor;\n this.ctx.strokeStyle = this.scored ? darkGray : lightGray;\n\n this.ctx.fill();\n this.ctx.stroke();\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":881,"value":"roundToGrid = (value) => {\n return gridSize*Math.floor(value/gridSize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1960,"value":"gridHeight = (height / gridSize);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1962,"value":"gridWidth = (width / gridSize);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"gridSize = 25;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"width = 900;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1729,"value":"backgroundColor = \"white\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2189,"value":"darkGray = \"#A9A9A9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"lightGray = \"#D3D3D3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"fadedBlue = \"#8187DE\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"fadedRed = \"#B86566\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"import { Range, Radio } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2274,"value":"import { Vector, elasticCollision } from \"@sdl60660/elastic-collisions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"geometric = require(\"geometric\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W39","stdlib":"1"}} 31:"$30:body"