If anyone draws a quadratic bezier with curveTo(), most are likely to state that the point corresponding to t=0.5 is exactly halfway along the curve (in terms of length of the curve). Parameterization has been dealt with thoroughly in prior TechNotes and online demos, although generally in the context of composite parametric curves.

Intuitively, think of parameterization as affecting the distribution of sprites along the curve. If the supposition of the previous paragraph were true, then sprites a t = 0, t = 0.1, t = 0.2 ... t = 0.5 ... t = 1, would be uniformly distributed along the curve in terms of length. In fact, the distribution depends on the geometric constraints (control point placement).

This is illustrated in the demo, below. The Singularity Bezier curves support approximate arc-length parameterization. Click to place three points in the drawing area. A quadratic Bezier curve is drawn with those knots as the control points. Blue markers are distributed along the curve at t = 0, t = 0.1, t = 0.2 ... t = 1. Green markers are distributed along the curve at uniform normalized arc length, i.e. s = 0, s = 0.1, s = 0.2 ... s = 1.

Note that in general, the blue markers can be clumped close together in some places, while spread farther apart elsewhere on the curve. The exact distribution depends on control point placement. The green markers remain approximately uniformly distributed along the curve. Click and drag any control point to a new position to see how the marker distribution updates in real time.

With a natural (time) parameterization, any sprite animated along the quadratic Bezier might appear to have easing applied to the animation. Depending on control point placement, the sprite might appear to move slowly at first, speeding up as it moved to the final control point. With arc-length parameterization, the sprite would appear to move at constant velocity along the curve.

Tweening codes using the natural parameterization are subject to velocity that is a function of geometric constraints. Arc-length parameterization is an important consideration even in simple parametric curves.

This example requires the Flash™ 9 player.

After selecting the three initial control points, drag one of the control points around. Under what set of circumstances (control point placement) do the blue and green markers nearly coincide? In other words, what set of geometric constraints produces a natural parameterization that is close to an arc-length parameterization?

Note that the arc-length parametrization is approximate, so under certain extreme circumstances (highly acute angles for control cage), the green marker distribution may be very slightly uneven.

For further reading,

:: Quadratic Beizer Curves - Quadratic Beizer's and MovieClip.curveTo().

:: 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).

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