Easing Along Parametric Curves Demo

The Bezier easing demo is now online. It only illustrates ease-out for a few ease types, but it should be enough to get the idea across.  The following screenshot illustrates the difference between natural and arc-length parameterization for a cubic Bezier curve with cubic ease-out.

Cubic ease-out for two Bezier curves with different parameterization.
Cubic ease-out for two Bezier curves with different parameterization.

The red marker illustrates application of the ease without arc-length parameterization.  The green marker illustrates proper easing with arc-length parameterization.  Although motion along the top curve appears to be eased, the motion is incorrect.  Worse, the actual velocity along the curve is a function of geometric constraints.

The online demo may be viewed here.  The page includes a link to download Singularity.  The demos folder includes the MXML file for this demo which can be modified to test different easing methods as well as ease-in.

Easing along parametric curves, part II

I think it’s fair to say that most people apply easing functions as arguments to a method in a tweening library instead of direct application.  So, how does one directly apply Penner-style easing functions to path animation along a parametric curve?

The previous post in this series illustrated the importance of arc-length parameterization in proper application of easing.  Otherwise, velocity along the curve is a function of control-point placement and any application of easing produces incorrect motion.

The starting value of the curve’s parameter is zero, so a straightforward easing application uses b = 0 and c = 1.   The easing fuction returns a factor in [0,1] that is normally used to map a tweenable parameter such as x, y, or alpha along its range.  In path animation, this factor plays the role of the curve’s parameter.

Suppose the total duration of the animation is stored in the variable duration and the current elapsed time in the variable elapsed.  The following code segment applies to easing-out,

var factor:Number = factory.easeOut(elapsed, 0, 1, duration);
arcLengthMarker.x = arcLength.getX(factor);
arcLengthMarker.y = arcLength.getY(factor);

where arcLength is the arc-length parameterized cubic Bezier curve and arcLengthMarker is the sprite animated along that curve.  The factory variable is a reference to the Singularity easing factory.  This allows the user to set the easing type by symbolic name and either return a reference to a class that implements the easing or the specific easing factor.  References to specific easing classes are created just-in-time.

The online demo should be up tomorrow.

Easing along parametric curves part I

Over the holiday weekend, I hope to work on a demo illustrating how to apply easing to animating a sprite along a path represented by a parameteric curve. The specific curve will be a cubic Bezier. I’ve talked about velocity control in path animation in the past and the importance of arc-length parameterization. These concepts are illustrated in this demo and this demo.

Without arc-length parameterization, applying easing to path animation along a Bezier produces inconsistent motion that is a function of control-point placement. This can be seen in the following diagram.

Uniform vs. arc-length parameterzation, t = s = 1/2
Uniform vs. arc-length parameterzation, t = s = 1/2

Both cubic Bezier curves have the same geometry; they are offset vertically for demonstration purposes. The top curve is uniform parametrized and illustrates what would be obtained from any tweening library using Bezier curves. The bottom curve is arc-length parameterized. Both red and green markers are placed at a parameter value of 0.5 with no easing (equivalent to Linear easing with b = 0 and c = 1). Notice that the green marker is halfway along the length of the curve. A sprite moving along that curve moves at uniform velocity, as if the entire curve were a straight line and linear interpolation (tweening) was applied.

In the upcoming update of Singularity, the Penner easing functions are implemented in AS3 as an easing factory, conforming to a standard Interface. The easing demo will illustrate a few different types of easing applied to the above curves, highlighting the need for arc-length parameterization to properly apply easing in the path animation.

Hope you enjoy the upcoming holiday if you’re celebrating it!