2D Collision in Canvas - Balls Overlapping When Velocity is High
- by kushsolitary
I am doing a simple experiment in canvas using Javascript in which some balls will be thrown on the screen with some initial velocity and then they will bounce on colliding with each other or with the walls.
I managed to do the collision with walls perfectly but now the problem is with the collision with other balls. I am using the following code for it:
//Check collision between two bodies
function collides(b1, b2) {
//Find the distance between their mid-points
var dx = b1.x - b2.x,
dy = b1.y - b2.y,
dist = Math.round(Math.sqrt(dx*dx + dy*dy));
//Check if it is a collision
if(dist <= (b1.r + b2.r)) {
//Calculate the angles
var angle = Math.atan2(dy, dx),
sin = Math.sin(angle),
cos = Math.cos(angle);
//Calculate the old velocity components
var v1x = b1.vx * cos,
v2x = b2.vx * cos,
v1y = b1.vy * sin,
v2y = b2.vy * sin;
//Calculate the new velocity components
var vel1x = ((b1.m - b2.m) / (b1.m + b2.m)) * v1x + (2 * b2.m / (b1.m + b2.m)) * v2x,
vel2x = (2 * b1.m / (b1.m + b2.m)) * v1x + ((b2.m - b1.m) / (b2.m + b1.m)) * v2x,
vel1y = v1y,
vel2y = v2y;
//Set the new velocities
b1.vx = vel1x;
b2.vx = vel2x;
b1.vy = vel1y;
b2.vy = vel2y;
}
}
You can see the experiment here. The problem is, some balls overlap each other and stick together while some of them rebound perfectly. I don't know what is causing this issue. Here's my balls object if that matters:
function Ball() {
//Random Positions
this.x = 50 + Math.random() * W;
this.y = 50 + Math.random() * H;
//Random radii
this.r = 15 + Math.random() * 30;
this.m = this.r;
//Random velocity components
this.vx = 1 + Math.random() * 4;
this.vy = 1 + Math.random() * 4;
//Random shade of grey color
this.c = Math.round(Math.random() * 200);
this.draw = function() {
ctx.beginPath();
ctx.fillStyle = "rgb(" + this.c + ", " + this.c + ", " + this.c + ")";
ctx.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
ctx.fill();
ctx.closePath();
}
}
