Online Example::Quadradic Bezier, 3-point interpolation

Using a quadratic bezier curve to interpolate three points is a very old algorithm, dating back to the early 1970's. It's been around quite some time in Flash, although in a simplified form sometimes called midpoint interpolation. This is because the parameter, or t-value, at which the curve passes through the second point is arbitrary. The formula happens to be compact when t = 0.5.

Choosing a parameter value to interpolate the second point affects the placement of the middle Bezier control point. Since the control points form the set of geometric constraints for the curve, this is an example of a case where parameterization actually affects the shape of the curve.

The default parameterization for the Singularity Bezier2 class is based on chord-length. The t-value at which the quad. Bezier passes through the second point is determined by the fraction of the distance between the first and second points to the total chord length.

This example illustrates how choice of parametrization affects the shape of the interpolating curve. Midpoint, chord-length, and an arbitrary parameterization are all shown simultaneously.

To run the demo, click in the draw area to define the three points. Three curves are drawn. The 'red' curve illustrates the standard midpoint paramterization that may be familiar to many Flash users. The formula has been presented online and even in Moock's Essential Actionscript 3 (chapter 25). The yellow curve illustrates an interpolation using chord-length parameterization. A blue curve is drawn with t = 0.5. This curve represents an arbitrary parameterization.

To see how the shape changes with parameterization, move the slider to vary t between 0.2 and 0.8. The red (midpoint) and yellow (chord-length) curves remain fixed. The blue curve is redrawn, interpolating the three points so that the curve passes through the second point at the parameter value indicated by the slider.

This example requires the Flash™ 9 player.

You need to upgrade your Flash Player

This example requires the Flash™ 9 player.

Click the 'Reset' button to try again with a new set of points. Vary the spacing between the points to observe the results. Why is the arbitrary parameterization limited to the interval [0.2, 0.8]?

For further reading,

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

:: Cubic Bezier Curves - Cubic Bezier's and introduction to quadratic approximation. (to answer the above question)

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