2c:null 2d:["$","title",null,{"children":"Jezzball Part 1 (Bouncing Balls with Interaction) | Sam Learner | Observable"}] 32:T11d6,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) { const copy = { ...ball }; ball.angle = visited.data.angle; ball.speed = visited.data.speed; // ball.color = visited.color; visited.data.angle = copy.angle; visited.data.speed = copy.speed; // visited.data.color = copy.color; } } } 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; } } } }33:[] 30:{"id":"44b2baeb418f1713","slug":"jezzball-part-1-bouncing-balls-with-interaction","title":"Jezzball Part 1 (Bouncing Balls with Interaction)","thumbnail":"c764b28e8b65bcf822ecf0e33a638eeb2dedcae817ecd0a6eb27adea09a32c64","access_level":"public","create_time":"$D2021-04-29T01:45:23.575Z","update_time":"$D2021-05-01T03:20:50.652Z","view_time":null,"first_public_time":"$D2021-04-29T22:12:55.959Z","fork":false,"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":876,"publish_version":876,"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,"subscribed":null,"forks":2,"collection":{"id":"333571dddb17c12c","slug":"jezzball","title":"Jezzball","owner":{"id":"23354deefcff861f","login":"sdl60660","name":"Sam Learner"}},"type":"notebook","body":{"title":"Jezzball Part 1 (Bouncing Balls with Interaction)","cells":[{"id":0,"value":"md`# Jezzball Part 1 (Bouncing Balls with Interaction)\n\nThis is the first step in recreating a classic Windows game, [Jezzball](https://en.wikipedia.org/wiki/JezzBall), on canvas. Here, I'm just getting a bunch of randomly-sized, randomly-colored balls moving at various speeds and reacting appropriately when they hit each other or the walls. The vast majority of the collision logic 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.\n\nSee this full collection [here](https://observablehq.com/collection/@sdl60660/jezzball)\n\nClick to add a ball to the simulation.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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"},{"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"},{"id":712,"value":"ctx = canvas.getContext(\"2d\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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"},{"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":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"},{"id":349,"value":"simulation = new Simulation({ width, height, ctx, balls: ballSet })","pinned":false,"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(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"},{"id":335,"value":"$32","pinned":false,"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(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":true,"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":539,"value":"import { Range } from \"@observablehq/inputs\"","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":827,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"