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; } } } }

Purpose-built for displays of data