Circle rotation from point to point in AS3

Yesterday I was helping a friend with some math in actionscript 3. And again pythagoras came in handy.. It can help you abstract complex mathematical constructions, like the one I solved yesterday!

I wanted to calculate the amount of rotation between 2 points on a circle, so the distance can be animated in a tween.

When I connect A and B together then you’ll notice that the triangle of A, B and the middle point is not a rectangular triangle, so I need to divide it in segments (split point A from the middle and the same with B).

First I calculate the radians of point A to middle point with this very basic formula: atan(Ax/Ay). Do the same with point B:

Both results together is the amount of radians. The formula to calculate the degrees from radians is this: Angle in radians * 180 / Pi.

In actionscript it may look like this:

var pointAtoMiddle:Point = new Point(middle.x - pointA.x, middle.y - pointA.y);
var pointBtoMiddle:Point = new Point(middle.x - pointB.x, middle.y - pointB.y);
 
var degreesA:Number = Math.atan(pointAtoMiddle.x/pointAtoMiddle.y) * 180 / Math.PI;
var degreesB:Number = Math.atan(pointBtoMiddle.x/pointBtoMiddle.y) * 180 / Math.PI;
 
var totalDegrees:Number = degreesA + degreesB;

Since a short time, the GreenSock’s TweenLite and TweenMax library offers a handy property called “shortRotation”, which calculates the shortes route. You simply provide the amount of degrees and the tweenlibrary does the rest.

Note, for more detail head to http://blog.greensock.com/index.php?s=rotation&submit=:

Change “shortRotation” syntax – Previously, shortRotation could only affect the “rotation” property of an object, but that doesn’t accommodate 3D rotations well (rotationX, rotationY, and rotationZ). So now you can pass an object with any number of properties that should be affected, like: TweenMax.to(mc, 2, {shortRotation:{rotationX:-170, rotationY:100}}).

Share and Enjoy:
  • Digg
  • Sphinn
  • del.icio.us
  • Facebook
  • Mixx
  • Google Bookmarks
  • LinkedIn
  • YahooMyWeb

Leave a Reply

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

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">