I'm working on a fun little simulation environment for circles. I cannot find an accurate way to combine two circles and find their center coordinate.

I set up an html canvas, then generate random coords on the plane along with a random sized radius. After every generation, I check for an intersection between every circle and every other circle. When circles intersect I want them to merge - making a circle with the combined surface area. Finding the coordinates of the new center is my issue.

I don't want to simply find the midpoint of the centers because that doesn't factor in the size of the circles. A humongous circle could be swayed by a tiny one, which doesn't make for a realistic simulation.

I've thought up what I think is a bad solution: multiplying the change in distance created by the midpoint formula by the ratio of the two circles radii, getting the angle of the resulting triangle, using trig to get the x and y difference, then adding that to the center of the larger circle and calling it a day.

Really have no clue if that is the right way to do it, so I wanted to ask people smarter than me.

Oh also here's a link to the repo on github:

And about extract a root √ you can use this:

var xxxx = Math.pow(your target here,2);

Update my answer: