Filling a Circular Area

One of my students the other week asked me how to fill an area under a curve with shapes without overlapping. While I haven’t tried doing the curve, i started messing around with a circle.

Essentially there are 2 circles: the larger containing circle that defines the area to cover, and the circle unit which I fit into the area defined by the containing circle.

First I calculate the circumference of the containing circle by the following:
var circumference:Number = 2 * Math.PI * radiusOfContainingCircle;

Secondly, I calculate the number of smaller circles (that have a defined radius) that will cover the circumference using:
var maxNumberOfCircles:Number = circumference / ( radiusOfCircleUnit * 2 );

There’s some code that you can check out in the source which minimizes overlap (although it needs a little work to be completely accurate).

Next, I calculate the angle of rotation for each circular unit relative to the center of the containing circle:
var anglePerCircle:Number = 360 /maxNumberOfCircles;


A simple loop is used to render the circular units. Their x and y positions can be calculated using some trig functions:
xPos = centerX + ( Math.cos( ( anglePerCircle * i ) * degreeToRadian ) * radiusOfContainingCircle );
yPos = centerY + ( Math.sin( ( anglePerCircle * i ) * degreeToRadian ) * radiusOfContainingCircle );


Covering the inner areas requires the repetition of the above process, but with each step reducing the containing circle’s area by the diameter of the circle unit’s diameter like so:
radiusOfContainingCircle -= radiusOfCircleUnit*2;


And that’s about it really. Hope that made some sense. Grab the commented source.