now that we have a decent amount of tools to process lines, segments and triangles, it’s time to start using a paradoxically complex shape: Mister Circle.
Read the rest of this entry »

here’s a snippet to distribute shapes on a circle no matter how their regPoint is set.
not revolutionary but it can help :)
the tricky part is to determine how much space is taken by a given displayObject on the circle.
once you know that, you can create an ‘step angle’ to distribute your X shapes on a circle.
unfortunately, the step is not equal to the clip’s height:

so you can’t just make it with a :

clipCount = 2 * PI * r / clip.height

instead you have to choose the lowest / highest angles to the center among the clip’s rect corners.
which gives us this little function:

public function getCount( center:Point, clip:DisplayObject ):uint
{
	
	var angle:Number = getAngle( center, new Point ( clip.x, clip.y ) );
	
	var rect:Rectangle = clip.getBounds( clip );
	rect.x += clip.x;
	rect.y += clip.y;
	
	var tl:Point = new Point( rect.x, rect.y );
	var tr:Point = new Point( rect.x + rect.width, rect.y );
	var br:Point = new Point( rect.x + rect.width, rect.y + rect.height );
	var bl:Point = new Point( rect.x, rect.y + rect.height );
	
	var corners:Array = [ tl, tr, br, bl ];
	
	var min:Number = Number.POSITIVE_INFINITY;
	var max:Number = Number.NEGATIVE_INFINITY;
	for each( var p:Point in corners )
	{
		angle = getAngle( center, p );
		if ( angle < = min ) min = angle;
		if ( angle >= max ) max = angle;
	}
	
	return uint( Math.PI * 2 / ( max - min ) );
	
}
private function getAngle( p0:Point, p1:Point ):Number 
{
	return Math.atan2( p1.y - p0.y, p1.x - p0.x );
}

to the left is the calculation, to the right the result.

you see that even if the regpoint ( the cross) is not centered or left aligned, it still works.
to distribute the shapes on a circle, you’ll do something like:

var count:int = getCount( center, clip );
var step:Number =  ( Math.PI * 2 / count );
var angle:Number;
var i:int;	
for ( i = 0; i < count; i++ )
{
	var c:Clip =  new Clip();
	addChild( c );
	
	angle = step * i; 
	c.x = center.x + Math.cos( angle ) * radius;
	c.y = center.y + Math.sin( angle ) * radius;
	c.rotation =  angle * 180 / Math.PI;
}

where clip is the clip you want to distribute ( the distance between center and clip being taken as the radius ).
here’s a little demo to help understand better:

enjoy :)