# Position of 3 circles intersecting at the centre of bounding box

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

-
Can the aspect ratio of the box be chosen at will? –  Christian Blatter Feb 7 '12 at 15:54
I assumed that it would have to be a square, so we can work with that contraint. –  Paul Wright Feb 7 '12 at 16:30

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.

-
The most important element for me is the coordinates of the origins of the 3 circles (in percentage of the bounding box's size). The data will give me the size of each of the circles and I want to make sure that visually, the system of 3 circles is always around the centre of the box. (The centre of the overlap of the 3 is centred in the box). So to calculate the coordinates of the circles, in reference to the box...but it will require the use of the radii of the circles. –  Paul Wright Feb 7 '12 at 18:33
@Paul Wright: "visually, the system of 3 circles is always around the centre" is not the same as "I want to have them all intersect at the centre". It remains that the largest circle should touch two adjacent sides of the bounding square. It is up to you to decide how big the intersection of the three disks should be. –  Christian Blatter Feb 7 '12 at 18:44
Hmm, yes, I guess the intersection could be as simple as a percentage of the radius, however in order to determine the coordinates origins of each of the circles, including the one you suggest having touch 2 sides of the box, does require creating the relevant functions. Anyway, I'll look into it more, thanks for the help. –  Paul Wright Feb 7 '12 at 19:11

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: http://i.stack.imgur.com/satQP.png

-
You could also work backwards from the bottom to the top knowing the bounding width if you knew the ratio of r1:r2:r3. You could then discover the bounding height from that. Or vice versa with a bounding height. –  Brett Tackaberry Feb 8 '12 at 2:25
The other assumption that is made is x1 = r1. –  Brett Tackaberry Feb 8 '12 at 2:25