2b:null 2c:["$","title",null,{"children":"Jezzball Part 4 (Grid/Blocking) | Sam Learner | Observable"}] 31: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) `32: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 = []; } } }33: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; }); }34: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; } } } }); }35: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); } }); }36: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]; } }); }37: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); } }38:[] 2f:{"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","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,"subscribed":null,"forks":1,"collection":{"id":"333571dddb17c12c","slug":"jezzball","title":"Jezzball","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"type":"notebook","body":{"title":"Jezzball Part 4 (Grid/Blocking)","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":1413,"value":"viewof barDirection = Radio([\"Horizontal\", \"Vertical\"], {label: \"Bar Direction\", value: \"Horizontal\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":712,"value":"ctx = canvas.getContext(\"2d\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1814,"value":"scoredCells = simulation.grid.filter((a) => a.scored)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":693,"value":"mutable clickPosition = null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"id":349,"value":"simulation = new Simulation({ width, height, ctx, balls: ballSet, grid: gridSet })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":335,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2255,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":2236,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2217,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"id":831,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"id":881,"value":"roundToGrid = (value) => {\n return gridSize*Math.floor(value/gridSize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1960,"value":"gridHeight = (height / gridSize);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1962,"value":"gridWidth = (width / gridSize);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":861,"value":"gridSize = 25;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"width = 900;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1729,"value":"backgroundColor = \"white\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2189,"value":"darkGray = \"#A9A9A9\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1577,"value":"lightGray = \"#D3D3D3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1548,"value":"fadedBlue = \"#8187DE\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1549,"value":"fadedRed = \"#B86566\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"import { Range, Radio } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2274,"value":"import { Vector, elasticCollision } from \"@sdl60660/elastic-collisions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":457,"value":"geometric = require(\"geometric\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":823,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"