2c:null 2d:["$","title",null,{"children":"Jezzball Part 2 (Balls and Bars Colliding) | Sam Learner | Observable"}] 32:T552,md`# Jezzball Part 2 (Balls and Bars Colliding) This is the second step in recreating a classic Windows game, [Jezzball](https://en.wikipedia.org/wiki/JezzBall), on canvas. Here I've added the creating of bars, on click, which divide the canvas into cells, just like in the real game. The bars interact with the walls, which stop their growth, as well as with the balls, which collide off of them like walls. I've also adjusted the way that ball collisions work, using real elastic collision logic instead of just exchanging angles/speeds. 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:T130b,class Simulation { constructor({ width, height, ctx, balls, bars }) { this.width = width || 800; this.height = height || 800; this.ctx = ctx || null; this.balls = balls || []; this.bars = bars || []; this.maxRadius = d3.max(balls, a => a.radius); this.center = [this.width / 2, this.height / 2]; this.quadtree = null; } clearCanvas() { this.ctx.fillStyle = "#ffffff"; this.ctx.clearRect(0, 0, width, height); } tick() { this.clearCanvas(); 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.forEach(bar => { this.detectBarWallCollision(bar); if (bar.active) { bar.tick(); } bar.drawRect(); }) } fastDetectBallCollision(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; }); } detectBallWallCollision(ball) { // Detect sides const wallVertical = ball.x <= ball.radius || ball.x >= this.width - ball.radius; const wallHorizontal = ball.y <= ball.radius || ball.y >= this.height - ball.radius; if (wallVertical || wallHorizontal) { const t0 = geometric.pointTranslate(ball.pos, ball.angle, ball.speed); const l0 = geometric.lineLength([this.center, t0]); const reflected = geometric.angleReflect(ball.angle, wallVertical ? 90 : 0); const t1 = geometric.pointTranslate(ball.pos, reflected, ball.speed); const l1 = geometric.lineLength([this.center, t1]); if (l1 < l0) { ball.angle = reflected; } } } detectBarWallCollision(bar) { // Determine wall collision const wallDistance = bar.direction === "up" ? bar.originY + bar.height : bar.direction === "down" ? height - (bar.originY + bar.height) : bar.direction === "left" ? bar.originX + bar.width : (this.width - (bar.originX + bar.width)); if (wallDistance <= 0) { bar.active = false; bar.multiplier = 0; } } detectBallBarCollision(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) { 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]); // ball.angle = reflected; if (l1 > l0) { ball.angle = reflected; } } }) } }34:T6b7,class Bar { constructor({ id, originX, originY, direction, ctx }) { this.id = id; this.originX = roundToGrid(originX); this.originY = roundToGrid(originY); // this.origin = [originX, originY]; 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.height = this.orientation == "vertical" ? 0 : (gridSize - 1); this.width = this.orientation === "horizontal" ? 0 : (gridSize - 1); this.ctx = ctx || null; this.growthSpeed = 2; this.active = true; 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.stroke(); this.ctx.fill(); } 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); } }35:[] 30:{"id":"7c06ba725571fbd8","slug":"jezzball-part-2-balls-and-bars-colliding","title":"Jezzball Part 2 (Balls and Bars Colliding)","thumbnail":"1051d75221a98622fee56634e3946cf3362de62193d00d80d7724bb293b13aad","access_level":"public","create_time":"$D2021-04-29T16:45:52.952Z","update_time":"$D2021-05-01T02:17:50.577Z","view_time":null,"first_public_time":"$D2021-04-29T22:13:26.253Z","has_unpublished_edits":null,"fork":{"id":"44b2baeb418f1713","slug":"jezzball-part-1-bouncing-balls-with-interaction","title":"Jezzball Part 1 (Bouncing Balls with Interaction)","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"stars":1,"starred":false,"owner":{"type":"team","id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":"starter_2024"},"version":1504,"publish_version":1504,"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"}],"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 2 (Balls and Bars Colliding)","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: 8, 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, 300], {step: 1, value: 30, 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":true,"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":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":"d3.select(\"#main-canvas\").on(\"click\", e => {\n mutable clickPosition = d3.pointer(e);\n const [x, y] = d3.pointer(e);\n \n // addBall({ x, y });\n \n if (barDirection === \"Horizontal\") {\n addBar({ x, y, direction: \"left\" });\n addBar({ x, y, direction: \"right\" });\n }\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 bar = new Bar({ id: simulation.bars.length, originX: x, originY: y, direction, ctx })\n simulation.bars = [...simulation.bars, bar];\n}","pinned":true,"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 })","pinned":false,"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, 8)(),\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":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(3, 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 = 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\n [this.x, this.y] = this.pos = geometric.pointTranslate(this.pos, this.angle, this.speed);\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":"$34","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.round(value/gridSize);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"gridSize = 20;","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":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":1471,"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":"$W35","stdlib":"1"}} 31:"$30:body"