Position of 3 circles intersecting at the centre of bounding box

Question

Here's what I feel is a neat challenge:

I'm building a data visualization comprised of 3 circles of dynamic sizes. I want to have them all intersect at the centre of a bounding box that will also be of no fixed size (it will change).

I will be pulling the radii of the circles from the data, but then can change the x and y coordinates of the circles to make the visualization work.

How would I calculate the positions (x,y) in percentages of the origin of the 3 circles based on their radii and size of the bounding box. Bonus if I can maximize the size of the 3 circles so they take up a decent portion (say ~90%) of the area of the bounding box, for visual purposes.

In the end this will be implemented in JavaScript.

Paul

Answer 1

Assume $r_1<r_2<r_3$. Then the best you can do is having the largest circle touching two adjacent sides of the bounding square and passing through the center of the square. The side length of the square would then be $(2+\sqrt{2})r_3$. The two smaller circles can then be placed freely obeying the given constraints.

Answer 2

The largest circle would touch two sides and each of the small would touch a side. You can place the second circle on the edge of the first along a 45 degree angle from the origin.

$x_2 = y_2 = ((1 + \sqrt{2})/\sqrt{2}) \cdot x_1$

The third circle can be then placed where the first and second circles intersect.

$\theta_1 = \cos^{-1} ( 1 - 1/2 \cdot (r_2/r_1)^2 )$

$\gamma_2 = 45 - 1/2 \cdot \theta_1$

$x_3 = x_2 - r_2 \cdot \cos(\gamma_2)$

$y_3 = y_2 + r_2 \cdot \sin(\gamma_2)$

Then the dimensions of the bounding box are:

$w = x_2 + r_2$

$h = y_3 + r_3$

checkout a diagram here: https://i.stack.imgur.com/satQP.png