Online Example::Uniform vs. Arc-length parameterization

The example below provides a simple illustration of the difference between uniform and arc-length parameterization for a composite curve (cubic Bezier spline). Enter at least four points that represent a closed path. Spline closure is automatic, so there is no need to attempt to manually duplicate the first knot.

After clicking the 'Draw' button, the cubic Bezier spline is drawn in blue. Two markers (red and green) appear at the first knot, although the red marker is not visible under the green marker. The red marker represents x-y coordinates obtained from sampling the uniform-parameterized curve. The green marker represents the same samples, but from the arc-length parameterized curve. In other words, a 't' value is sampled from 0 to 1 in constant increments. The t-value represents normal 'time' on the uniform-parmeterized curve. The same value represents arc-length on the arc-length parameterized curve. This allows comparison of the x- and y-coordinates at say t = 0.5 as well as one-quarter of the total arc length along the curve.

Click the 'Animate' button to move both markers continuously around the curve. Both markers start and end at the same knot. The red marker moves at different velocity around the curve. Depending on knot placement, it appears to move faster and slower. The green marker moves at constant velocity along the curve. The red marker may appear ahead or behind the green marker at any time.

You may stop the animation by clicking the 'Stop' button to compare marker positions. Restart the animation by clicking the 'Animate' button or click 'Reset' to draw a new set of knots.

This example requires the Flash™ 9 player.

You need to upgrade your Flash Player

This example requires the Flash™ 9 player.

Try making some knots very close together and others quite far away from one another and observe the behavior of the red marker.

If you are unfamiliar with uniform parameterization, it simply spreads the global 't' values out uniformly based on the number of knots. If there are five knots (four segments), the global t=0 to t=0.25 is allocated to the first segment (first cubic curve, local t=0 to t=1). Global t=0.25 to 0.5 is allocated to the second segment (again, local curve t=0 to t=1). The distribution depends only on the number of knots, and does not take knot distances or arc length along the curve into account.

Uniform parameterization carries the least computational expense. A more expensive parameterization is chord-length, where the global t-distribution is based on the fraction of chord length of each line segment between knots to the total chord length.

Arc-length parameterization is the most computationally expensive, but provides the best velocity control when path animation is desired.

For further reading,

:: Arc-Length Parameterization - Introduction to curve parameterization and how to reparameterize a curve on arc length. Techniques applied to a Catmull-Rom spline. Examples include how to distribute sprites evenly along a curve and path animation (including path following and orientation).

:: Arc Length of a Catmull-Rom Spline - Arc Length of parametric curves and derivative evaluation, applied to Catmull-Rom splines.

:: Composite Bezier Curves - Constructing a piecewise cubic Bezier curve that interpolates a set of knots with G-1 continuity and tension control. Optimized for fast drawing.

Source Code. Download the Singularity package (this example is in Singularity/demos/BezierParameterization.mxml).