javascript - Keeping circles from overlapping -

i'm trying figure out javascript math move 2 colliding circles apart each other.

the left side of image visual representation of have:

^{x1, y1, x2 , y2 positions of circles, r1 , r2 radii of circles, theta angle between circles in relation x-axis of canvas.}

how calculate new [x,y] positions both circles, "push" each other apart demonstrated on right side of image?

i'm planning make smaller circle pushed more larger one. should easy enough using normalized radii multiplier.

// take vector difference between centers var dx = x2 - x1; var dy = y2 - y1;  // compute length of vector var l = math.sqrt(dx*dx + dy*dy);  // compute amount need move var step = r1 + r2 - l;  // if there collision have step > 0 if (step > 0) {     // in case normalize vector     dx /= l; dy /= l;      // , move 2 centers apart     x1 -= dx*step/2; y1 -= dy*step/2;     x2 += dx*step/2; y2 += dy*step/2;  }