AS3 Polar Coordinates and Radians

January 9th 2009 in AS3 Polar Coordinates and Radians, Actionscript Classes, Laboratory, Life

Many times I’ve set up interfaces where I need to place different objects equidistant around a central object. The solution to this problem is to first calculate the angle of each object by converting Radians to Degrees. This can be expressed by the following formula

1 \mbox{ rad} = 1 \cdot \frac {180^\circ} {\pi} \approx 57.2958^\circ

So, you simply need to loop through your collection of objects and assign each a different angle. After that you plug that angle into a new Polar Point.

for(var i=0;i<array.length;i++)
{
	var angle:Number = i*( 180/Math.PI )
	var coord:Point = Point.polar( circumference, angle )
}

Here’s the complete source: radians.zip

package
{
	import flash.ui.*;
	import flash.display.*;
	import flash.events.*;
	import flash.geom.*;

	public class Main extends Sprite
	{

		/*
		========================================================
		| Private Variables                         | Data Type
		========================================================
		*/

		private var array:Array = new Array()
		private var circumference:int;

		/*
		========================================================
		| Constructor
		========================================================
		*/

		public function Main ()
		{
			stage.align = StageAlign.TOP_LEFT;

			// make some balls
			addParticle( 100 )

			menu.txtParticles.text = 'Particles: 100';

			stage.addEventListener( Event.ENTER_FRAME, runParticle )

			menu.slideCircumference.addEventListener( Event.CHANGE, changeCircumference );
			menu.particles.addEventListener( Event.CHANGE, changeParticles );

		}

		private function addParticle( num )
		{
			stage.removeEventListener( Event.ENTER_FRAME, runParticle )

			var tot:Number = array.length

			// kill mc's
			for( var t=0;t<tot;t++ )
			{
				removeChild( array[t].mc );
			}

			// kill array
			for( var r=0;r<tot;r++ )
			{
				array.shift();
			}

			trace( 'removed particles '+array.length )

			for( var d=0;d<num;d++ )
			{
				var c:MovieClip = new MovieClip()
				c.name = "particle"
				c.graphics.beginFill( 0xffffff, 1 )
				c.graphics.drawCircle( 0, 0, 1 )
				c.graphics.endFill()
				addChild( c )

				array.push( { mc:c } )
			}

			trace( 'added particles '+array.length )

			changeCirc( circumference )

			stage.addEventListener( Event.ENTER_FRAME, runParticle )
		}

		private function runParticle( e:Event )
		{
			//trace( 'running' )
			graphics.clear()
			graphics.lineStyle( 1, 0xffffff, .1 )

			for(var i=0;i<array.length;i++)
			{
				graphics.moveTo( stage.stageWidth/2, stage.stageHeight/2 )
				graphics.lineTo( array[i].mc.x, array[i].mc.y )
			}

		}

		private function changeCirc( c:int )
		{
			for(var i=0;i<array.length;i++)
			{
				var angle:Number = i*( 180/Math.PI )
				var coord:Point = Point.polar( c, angle )

				array[i].mc.x = ( stage.stageWidth/2 ) + coord.x
				array[i].mc.y = ( stage.stageHeight/2 ) + coord.y
			}

			circumference = c
		}

		private function changeCircumference( e:Event ):void
		{
			menu.txtCircumference.text = 'Circumference: ' + e.target.value;
			changeCirc( e.target.value )
		}

		private function changeParticles( e:Event ):void
		{
			menu.txtParticles.text = 'Particles: ' + e.target.value;
			addParticle( e.target.value )
		}
	}
}

Permalink: http://www.christeso.com/index.php/lab/as3-polar-coordinates-and-radians

Share and Enjoy:
  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Print

3 comments to...
“AS3 Polar Coordinates and Radians”
Avatar
dotmick

I had the same problem with one of my projects. I had to play with particle circles changing the radius, the number of dots, etc…Finaly, I did the following solution :

//- CONSTRUCTION
cRadius = 60;
nbDots = 45;
stepArc = 2*Math.PI / nbDots;

for(var i:Number = 0; i < nbDots; i++)
{
// A Dot was a 2.8 radius circle (so in fact, the particule)
dots[i] = new Dot();
dots[i].x = cRadius*Math.cos(i*stepArc – Math.PI/2);
dots[i].y = cRadius*Math.sin(i*stepArc – Math.PI/2);
addChild(dots[i]);
}

;)

dotmick’s last blog post..AS3IsoLib, enfin prometteur


Avatar
tn

thanks dotmick,

your code is actually more refined than the original one as there are even angles between sprites and the system is properly rotated by -90 degrees so the first instance is at the top


Avatar
Byron Anaya

You’ve done it once again! Incredible read!




required



required - won't be displayed


Your Comment:

CommentLuv Enabled

Twitter Users!
Enter your personal information in the form or sign in with your Twitter account by clicking the button below.

Cancel Comcast + Apple Tv + Boxee

Well, it’s official. We just canceled Comcast ‘the commie’ Cable and purchased an Apple Tv. My plan is to install Boxee or XMBC as an alt media platform to the default Front Row. This will enable us to stream our cable favorites such as the Daily Show and Colbert free from Hulu rather than paying [...]

Share and Enjoy:
  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Print
Cancel Comcast + Apple Tv + BoxeePrevious Entry

BIT-101 Particle class in AS3

lab

Share and Enjoy:
  • Twitter
  • Facebook
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Print
BIT-101 Particle class in AS3Next Entry