Archive for the ‘html’ Category

Fitting circles within a larger circle

November 24th, 2008 No comments

I have been working on an internal graphical tool at work and had an interesting problem arise. How can I know how many smaller circles I can fit within a larger circle? The best way to lay them out that I came up with was to put the smaller circles in an arc inside of the larger circle, just one smaller circle’s radius in from the edge of the large circle. This looks something like this:

Circles within a circle

Circles within a circle

When the first arc is filled up you then move to an arc which is the diameter of the small circles further within the large circle. The problem, however, is how to know how many circles can fit along that arc. I started originally with a simplistic realization that the arc length would be similar to the diameter of the small circles. This works out ok but ends up creating problems especially when you get close to the center of the larger circle (i.e. when the radius of the arc is close to the radius of the small circles). The correct solution is to calculate the exact angle along the arc that the circle takes up. After a few false starts with incorrect assumptions regarding tangent lines and their lengths I came up with the following.

Geometric definition

Geometric definition

  • The large circle is centered at the origin
  • `r_1` is the radius of the large circle
  • `C` is the center of the small circle
  • `r_2` is the radius of the large circle
  • `I` are the interseciton points between the circles
  • `theta` is the angle between the x axis and the line from the origin to `I`
  • `arc` is the length of the arc between the two interseciton points (`I`)



Circle Equations


Solve for `y^2`


Set equal and solve for `x`


`theta` is then:


You could then use `theta` directly but this will leave you with a remainder of space that’s empty in the arc. To make the circles equally spaced you need the arc length.

Replace values for a full `arc` formula


You can then divide the large circle’s circumfrence by the arc length to get the actual number of circles that will fit. You then divide the circle into that many pieces and voila, you get equally spaced circles like the first image above.

`y` is not needed for the solution, but comes out to be:


Categories: html, JavaScript, math Tags: ,