43:["$","title",null,{"children":"Jezzball Part 3 (Full Bar Interaction) | Sam Learner | Observable"}] 4b:T505,md`# Jezzball Part 3 (Full Bar Interaction) This is the third step in recreating a classic Windows game, [Jezzball](https://en.wikipedia.org/wiki/JezzBall), on canvas. Here, the bars react appropriately when hit with a ball, by disappearing if still active. They also interact with each other, going inactive on collision. In the final game, you won't be able to spawn a new divider bar while another is still active, but I've left that functionality in for now. 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) `4c:T19a1,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 = this.bars.filter((bar) => bar.remove === false); this.bars.forEach((bar) => { this.detectBarWallCollision(bar); this.detectBarToBarCollision(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.color = lightGray; bar.drawRect(); 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) { 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; } } } }); } detectBarToBarCollision(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; } }); } }4d:T73a,class Bar { constructor({ id, originX, originY, direction, ctx }) { 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 = 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.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); } }4e:[] 47:{"id":"961b3052fb5eb4af","slug":"jezzball-part-3-full-bar-interaction","title":"Jezzball Part 3 (Full Bar Interaction)","thumbnail":"6d3e66d3b6e84978b5808febf010a7caabbd4492096cb89f3e93f7f8bbd7c1b7","access_level":"public","create_time":"$D2021-04-29T22:13:55.755Z","update_time":"$D2021-05-01T02:18:12.837Z","view_time":null,"first_public_time":"$D2021-04-30T01:35:30.514Z","has_unpublished_edits":null,"fork":{"id":"7c06ba725571fbd8","slug":"jezzball-part-2-balls-and-bars-colliding","title":"Jezzball Part 2 (Balls and Bars Colliding)","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","bio":"","followed_by_you":false,"follows_you":false},"version":1744,"publish_version":1744,"role":null,"authored":false,"authors":[{"type":"individual","id":"5ad54184895e3513","login":"sdl60660","name":"Sam Learner","avatar_url":"https://avatars-next.observableusercontent.com/8bb7d7eb6950b592e5c56d2e317b20cb6ac4dac67f9004886ca632b2641d4c89","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"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 3 (Full Bar Interaction)","cells":[{"id":0,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"viewof numBalls = Range([1, 300], {step: 1, value: 7, label: \"Number of Balls\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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 there's another bar occupying this grid space\n let gridPositionFilled = false;\n simulation.bars.forEach(bar => {\n if (bar.top <= y && bar.bottom > y && bar.left <= x && bar.right > x) {\n gridPositionFilled = true;\n }\n });\n\n // If so, return without spawning new bars\n if (gridPositionFilled) {\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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"$4c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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 = 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":831,"value":"$4d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":861,"value":"gridSize = 20;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"width = 900;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1577,"value":"lightGray = \"#D3D3D3\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1548,"value":"fadedBlue = \"#8187DE\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1549,"value":"fadedRed = \"#B86566\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"import { Vector, elasticCollision } from \"@sdl60660/elastic-collisions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$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","tool":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 42:null