May 29, 2012

Working with sectors and circles

The Timeline Thyssen-Bornemisza shows an innovative and circular layout. Besides, it has color dots inside every circular sector in order to communicate, at first glance, the artistic production of each century. The color intensity and dot´s location is calculated using information readed from the Museum database.

The following formula is used to calculate the dot position inside a sector:

var point_container : Sprite = new Sprite();
var point_mc : Sprite 	  = new PointMC();
						point_container.addChild( point_mc );
point_mc.x = segment + 38 / 2;
point_mc.y = - ( segment + 38 / 2 ) * Math.tan( 45 / 22 * Math.PI / 180 );						p_container.rotation = initial_angle +  ( i  * 45 / 11 );

To draw sectors, we use a drawing class written by Lee Brimelow as follow:

function drawSector(  target : Sprite, sx:Number, sy:Number, radius_internal:Number, radius_external:Number, arc:Number ) : void 
{	
var startAngle : Number = -arc;
var ax, ay, ax_external, ay_external : Number;
var angle : Number = ( startAngle / 180) * Math.PI;	

// Calculate the start point
	ax = sx + Math.cos(angle) * radius_internal;
	ay = sy + Math.sin(angle) * radius_internal;	

	ax_external = sx + Math.cos(angle) * radius_external;
	ay_external = sy + Math.sin(angle) * radius_external;		

	/**/
	t.graphics.moveTo( ax, ay );
			
	// draw external curve.
	WedgePerimeter.draw( t, sx, sy, radius_external, arc, startAngle );
			
	// draw internal curve.
	WedgePerimeter.draw( t, sx, sy, radius_internal, arc, startAngle );	
			
	// draw end line.
	t.graphics.lineTo( sx + radius_external , sy );
			
	// draw the other line 🙂
	t.graphics.lineTo( ax_external, ay_external );	
}

Post a Reply

Your email address will not be published. Required fields are marked *