Realistic ball collision with different ball mass - small balls stop the large ones

Question

tl;dr demo with editor of the bounce function

^{click to add new ball to the area}

There's a question with over 200 votes on this topic with best answer scoring less than half of that. I'm noting that because typically the answers outscore the questions.

I tried to convert the suggested code into javascript. My balls asteroids have following properties:

• vx, vy - speed in x and y axes
• x and y for position
• mass in kilograms, if that matters

My code therefore reads as:

  function bounce(objectA, objectB) { 
    /** objectA and objectB have following properties:
     *   vx, vy - speed in x and y direction
     *   x, y   - position
     *   mass   - masss
     *   radius - diameter, calculated from mass
     *            using average rock density according to wikipedia
   ***/  
  
    // Colision point as seen from B's perspective  
    var collision = [objectA.x-objectB.x, objectA.y-objectB.y];
    var distance = Math.sqrt(collision[0]*collision[0] + collision[1]*collision[1]);
    
    collision[0] /= distance;
    collision[1] /= distance;
    
    var aci = objectA.vx* collision[0] + objectA.vy* collision[1]; 
    var bci = objectB.vx* collision[0] + objectB.vy*collision[1]; 
    
    var totalMass = objectA.mass + objectB.mass;
    // This is what I had to add since the original answer doesn't account for mass
    var acf = bci * objectB.mass/totalMass;
    var bcf = aci * objectA.mass/totalMass;
    
    // I put velocities in arrays in case I wanted to apply more changes
    // I mean I need to apply some changes, but I don't know what changes exactly
    // to make this crap of code work
    var v1 = [(acf-aci) * collision[0], (acf-aci) * collision[1]]; 
    var v2 = [(bcf-bci) * collision[0], (bcf-bci) * collision[1]];     
  
    
    // Addition sure works better than assignment, but I encourage to try it for
    // the lulz
    objectA.vx += v1[0];
    objectA.vy += v1[1];
    objectB.vx += v2[0];
    objectB.vy += v2[1];
  }

Now in my scenario, I observe weird behavior. If big ball hits small ball, small ball flies away fast, but the big ball stops completely. Sufficiently large ball should shove small balls away without slowing down.

In the situation:

This happens:

And this does never happen, no matter what size you use:

I think it's caused by the way I divide speed between two balls. But how else determine the change?

I understand this question can hardly be answered just from looking at code. Unfortunatelly the context can't fit in SSCCE within jsfiddle. Therefore, with some effort, I created online demo on github pages, where the above function can be edited to immediate effect. I will do my best to ensure that demo is preserved for further reference.

Answer 1

Read up on elastic collisions. Your equations are missing important factors like the difference in masses and—since you're working in two dimensions—the collision angle.

For a one-dimensional collision, you need to implement the following equation (from that Wikipedia page), where u1 and u2 are the velocities of each object before the collision, and v1/v2 are the velocities after.

You can verify your results by checking that the total momentum and kinetic energy of the system remain the same across the collision.

The two dimensional equations are in that article as well, but significantly more involved so I won't copy them here (I'd just be pasting the whole article). Importantly, they require use of trigonometric functions (sin, cos), and the dot product, which are absent from your current implementation.