Degrafa Rotated Ellipse Animation
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.
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.