2f:null 30:["$","title",null,{"children":"Jezzball Part 1B (Bouncing Balls with Elastic Collisions) | Sam Learner | Observable"}] 35:T47b,md`# Jezzball Part 1B (Bouncing Balls with Elastic Collisions) This is a slight modification on the first step in recreating a classic Windows game, [Jezzball](https://en.wikipedia.org/wiki/JezzBall), on canvas. There's still a canvas with randomly-sized, randomly-colored balls moving at various speeds. Now, though, they collide elastically in a more realistic way when they hit each other, rather than just exchanging angles and speeds. See this full collection [here](https://observablehq.com/collection/@sdl60660/jezzball) Click to add a ball to the simulation. **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) `36:T10d8,class Simulation { constructor({ width, height, ctx, balls }) { this.width = width || 800; this.height = height || 800; this.ctx = ctx || null; this.balls = balls || []; 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, i) => { this.fastDetectBallCollision(ball); this.detectWallCollision(ball); ball.tick(); ball.drawCircle(); }); } 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; }); } detectWallCollision(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) { // Is it moving more towards the middle or away from it? const t0 = geometric.pointTranslate( [ball.x, ball.y], 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.x, ball.y], reflected, ball.speed ); const l1 = geometric.lineLength([this.center, t1]); if (l1 < l0) ball.angle = reflected; } } slowDetectBallCollision(ball) { for (let i = 0; i < this.balls.length; ++i) { const collisionBall = this.balls[i]; collisionBall.collided = false; // Collision if ( ball.id !== collisionBall.id && geometric.lineLength([ball.pos, collisionBall.pos]) < ball.radius + collisionBall.radius && !ball.collided && !collisionBall.collided ) { const keep = geometric.lineLength([ geometric.pointTranslate(ball.pos, ball.angle, ball.speed), geometric.pointTranslate( collisionBall.pos, collisionBall.angle, collisionBall.speed ) ]), swap = geometric.lineLength([ geometric.pointTranslate( ball.pos, collisionBall.angle, collisionBall.speed ), geometric.pointTranslate(collisionBall.pos, ball.angle, ball.speed) ]); if (keep < swap) { const copy = { ...ball }; ball.angle = collisionBall.angle; ball.speed = collisionBall.speed; // ball.color = collisionBall.color; collisionBall.angle = copy.angle; collisionBall.speed = copy.speed; // collisionBall.color = copy.color; ball.collided = true; collisionBall.collided = true; } break; } } } }37:[] 33:{"id":"0a5e3448468ecc8e","slug":"jezzball-part-1b-bouncing-balls-with-interaction","title":"Jezzball Part 1B (Bouncing Balls with Elastic Collisions)","thumbnail":"5bbbf65bba903b7a106308c71fa8a7b8e465b3617dfb006243ed2601e7c0808b","access_level":"public","create_time":"$D2021-05-01T02:46:16.142Z","update_time":"$D2021-05-01T03:23:21.963Z","view_time":null,"first_public_time":"$D2021-05-01T03:22:48.141Z","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":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":904,"publish_version":904,"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":0,"collection":{"id":"333571dddb17c12c","slug":"jezzball","title":"Jezzball","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"type":"notebook","body":{"title":"Jezzball Part 1B (Bouncing Balls with Elastic Collisions)","cells":[{"id":0,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"viewof maxSpeed = Range([1, 10], {value: 5, step: 1, label: \"Max Speed\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"viewof numBalls = Range([10, 1000], {step: 10, value: 70, label: \"Number of Balls\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":712,"value":"ctx = canvas.getContext(\"2d\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"d3.select(\"#main-canvas\").on(\"click\", e => {\n const [x, y] = d3.pointer(e);\n \n addBall({ x, y });\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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(3, 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","output":"$undefined","database":"$undefined"},{"id":335,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":5,"value":"width = 900;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = 700;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"import { Range } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":878,"value":"import { Vector, elasticCollision } from \"@sdl60660/elastic-collisions\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"geometric = require(\"geometric\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 34:"$33:body"