Circles should collide on each other, does not work

Question

I have a big Circle and about 30 small bubbles which are inside the big one. The small bubbles can not go out of the big Circle, and when on of the small bubbles meets another they deflect to the opposite direction.

This is the code for the deflection of two small circles:

var xVelocityBubble1 = Math.random();
var yVelocityBubble1 = Math.random();

var xVelocityBubble2 = Math.random();
var yVelocityBubble2 = Math.random();

moveBubbles = function() {
xbubble1 += xVelocityBubble1;
ybubble1 += yVelocityBubble1;

xbubble2 -= xVelocityBubble2;
xbubble2 -= yVelocityBubble2;

if (Math.sqrt(Math.pow(xbubble1 - xbubble2, 2) + Math.pow(ybubble1 - ybubble2, 2)) < radius * 2) {
xVelocityBubble1 *= -1;
yVelocityBubble1 *= -1;
xVelocityBubble2 *= -1;
yVelocityBubble2 *= -1;
}
}

Now, here is the problem. As you can see on this picture, sometimes my bubbles are colliding, and I do not know why. Everything works fine until one circle gets crashed, then suddenly more and more bubbles are in a war. Have a look at circles 375, 240,330 and 410. First I thought this might has something to do with the different velocities, but that was not the problem. Has anyone any idea?

Answer 1

Your code assumes that the circles collide because they are moving straight towards each other, and therefore the reaction of the collision would be that both circles go in the exact opposite direction instead.

For circles meeting that are moving in almost the same direction, that reaction will be strange. You should calculate the angle where the circles meet, and from that calculate how much momentum they exchange and how that affects each circle.

It's probably because of that erratic reaction combined with circles doing more than one collision in one round of calculations that makes them move into each other. As a circle make a 180 degree turn for any collision, that means that if it collides two times (or any even number) it will just continue going as if nothing happened.

Answer 2

It looks to me like one radius gets inside another, you detect a collision, but then, before you can get outside the radius, you detect a collision again and the direction reverses again, in the wrong way. Once one circle is inside another, this would cause both circles to vibrate forever.

Answer 3

I think you need to check for collision, and when its detected, back the bubble away from the thing it collided with so that there's no overlap. Right now you do check for collision, but allow them to overlap in the meantime until the reversed velocity can fix the situation. There should never be overlap.

Answer 4

var xVelocityBubble1 = Math.random();
var yVelocityBubble1 = Math.random();

var xVelocityBubble2 = Math.random();
var yVelocityBubble2 = Math.random();

moveBubbles = function() {
xbubble1 += xVelocityBubble1;
ybubble1 += yVelocityBubble1;

xbubble2 -= xVelocityBubble2;
xbubble2 -= yVelocityBubble2;

if (Math.sqrt(Math.pow(xbubble1 - xbubble2, 2) + Math.pow(ybubble1 - ybubble2, 2)) < radius * 2) {
xbubble1 -= xVelocityBubble1;
ybubble1 -= yVelocityBubble1;
xbubble2 += xVelocityBubble2;
xbubble2 += yVelocityBubble2;

xVelocityBubble1 *= -1;
yVelocityBubble1 *= -1;
xVelocityBubble2 *= -1;
yVelocityBubble2 *= -1;
}
}

You need to undo the action that causes the collision because that leaves the bubbles in a kind of illegal state