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?
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.