placing canvas circles in circular manner without overlapping

Question

I have to draw concept map of circles with same radius once it is clicked it should show its children and those children should not overlap each other. I am able to divide entire circular position with Math.PI*2/required_length_of_children. and taking positions with

 var new_left=Math.round(origin.x+radius*Math.cos(angle));
 var new_top=Math.round(origin.y+radius*Math.sin(angle));

Now my problem is how to find out the angle which has available space and draw those. basically looking for hyperbolic tree manner arrangement of circles. Thanks in advance for help.

Answer 1

If you think about it, when a circle sits with its center on the edge of another circle, the triangle between the two centers and one intersection point has all its edges known: R, R, and r (where R is the large radius, and r is the small one). We can use some math to find the angle at the center of the big circle for this:

https://www.mathsisfun.com/algebra/trig-solving-sss-triangles.html

We can then double that so that the angle accounts for the entire width of the small circle on the edge, and the formula ends up looking like this: 2*Math.acos(1 - (r**2)/(2*R**2))

Now to make sure this math is right, we can draw on a canvas to ensure that circles placed with this angle don't overlap:

function testShape(middleX, middleY, R, r, n) {
  var i, angle = 0;
  var inc = 2*Math.acos(1 - (r**2)/(2*R**2));

  circle(middleX, middleY, "blue", R);

  for (i = 0; i < n; i++) {
    circle(middleX+Math.cos(angle)*R, middleY+Math.sin(angle)*R, "red", r);
    angle += inc;
  }
}

https://jsfiddle.net/snydergd/rh6jcf30/7/