Collision Handling in Javascript - Particles Get Stuck

Question

I am trying to recreate this, and I have been fairly successful. I am having issues with the collision handling though. Although the collision handling seems to work, it has very strange behavior. Here is what I have so far. This is the code that handles collisions:

var dx = particle2.getX() - particle1.getX();
var dy = particle2.getY() - particle1.getY();
var angle = Math.atan2(dy, dx);

var newP2X = particle1.getX() + (particle1.getRadius() + particle2.getRadius()) * Math.cos(angle);
var newP2Y = particle1.getY() + (particle1.getRadius() + particle2.getRadius()) * Math.sin(angle);

particle2.setX(newP2X);
particle2.setY(newP2Y);     

var p1Vxi = particle1.getVx();
var p1Vyi = particle1.getVy();
var p1Mass = particle1.getMass();

var p2Vxi = particle2.getVx();
var p2Vyi = particle2.getVy();
var p2Mass = particle2.getMass();

var vxf = (p1Mass * p1Vxi + p2Mass * p2Vxi) / (p1Mass + p2Mass);
var vyf = (p1Mass * p1Vyi + p2Mass * p2Vyi) / (p1Mass + p2Mass);

particle1.setVx(vxf);
particle1.setVy(vyf);
particle2.setVx(vxf);
particle2.setVy(vyf);

EDIT: I have tried to change it to inelastic collisions like suggested, but for some reason the balls collide erratically. Check it out here.

Any help is much appreciated!

Answer 1

First, intuitively, imagine throwing a beanbag onto a frozen pond. It hits, doesn't bounce at all (loses whatever vertical velocity it had), and slides along with the same transverse velocity it had. That's the kind of collision we're trying for.

Now the physics. Moving reference frames. A North-bound train passes a barn. In the reference frame of the farmer in the barn, the barn is stationary and the train is moving North (0˚) at 10 m/s. In the reference frame of a passenger in the train, the train is stationary and the barn is moving South (180˚) at 10 m/s. A bicyclist is riding East (90˚) at 5 m/s (in the farmer's reference frame); in the bicyclist's frame, the bicycle is stationary, the barn is moving West (270˚) at 5 m/s and the train is moving at 11.18 m/s, bearing 333.4˚. We can convert between different frames with ease.

Two things are colliding. The frame we are interested in is the frame in which total momentum is zero. This called the Center-of-Mass Frame. If the two masses are m₁ and m₂, and the velocities are v₁ and v₂, then the velocity of the center of mass (a point that is stationary in the center-of-mass frame, like the bicycle in the bicyclist's frame) is (m₁v₁ + m₂v₂)/(m₁ + m₂). We calculate the velocities of the two objects in this frame and proceed.

The objects collide. We draw a plane of contact-- in this case a line tangent to both circles at the moment of contact. This is an instantaneous construct, the same in all reference frames (that don't involve rotation). In the center-of-mass frame, each object will act as if this boundary were a stationary solid surface-- in this case a sheet of ice, with no bouncing. So we divide the velocity vector into two components, the one parallel to the surface of the ice and the one normal (perpendicular) to it; we retain the first and discard the second.

Then we convert back into the barn frame and we're done.