Home > Degrafa, Flex > Degrafa Rotated Ellipse Animation

Degrafa Rotated Ellipse Animation

April 8, 2009

I get about 60 e-mails a day (either direct or through the contact form on my web site) requesting solutions to various math/Flash/Flex problems.  When possible, I try to answer some of them here on the blog.  This one was interesting as it provides an opportunity to illustrate some of the new Degrafa math utilities.

Drawing an ellipse whose major axis is either horizontal or vertical is pretty easy.  This question was how to animate a sprite along a rotated ellipse.  Animation along any path requires arc-length parameterization for precise velocity control.

If arc-length as a function of natural parameter is a smooth function, a natural cubic spline can be used for arc-length parameterization as illustrated in this TechNote.  One observation about ellipse arc length is that it is invariant with respect to rotation.  So, we can parameterize the ellipse as if it were horizontally oriented and centered at the origin.

Evaluating the path requires a rotation followed by translation.  The example below applies a counter-clockwise rotation to an ellipse and then animates a sprite around the ellipse.  Path orientation is applied as illustrated in the above TechNote.

Animation Around a Rotated Ellipse

Animation Around a Rotated Ellipse

To use the demo, drag a rectangle to define a horizontal ellipse.  The rotation value is hardcoded into the Flex example (currently 45 degrees CCW).  Click the ‘Animate’ button to animate the rectangle sprite around the ellipse.

The ParameterizedEllipse class is provided as a standalone file and the demo uses the Degrafa natural cubic spline and Gaussian quadrature utilities.  The example also illustrates the dashed-line decorator.  The ellipse parameterization is either the classic parameteric (some would say polar) form or on arc-length.  I haven’t tested every aspect of this code, so view it as a general outline for a solution to this problem.

View demo.

View source.

  1. Bart
    April 8, 2009 at 7:49 am

    Nice. I do have a question: will this and all other Degrafa math and curve goodness be available for non-Flex projects? (like Flash IDE or pure AS3)

    I tried getting it to work but it heavily depends on Fex specific stuff. Maybe it’s not quite the scope of the project but it would be very usefull.

  2. heiko
    April 13, 2009 at 7:24 am

    Thanks a lot Jim, that’s exactly what I needed!

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: