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.
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!
The Algorithmist 
One thought on “Easing along parametric curves part I”
Comments are closed.