Home > Flash, Flex, Math > Cubic Bezier Interpolation Part V

Cubic Bezier Interpolation Part V

September 11, 2008

The online demo (and source code) are now available. In addition to interpolating the four points selected in the drawing area, the demo shows the cubic Bezier control points in red.  From the two examples below, you can see that the ‘size’ of the control cage is relatively large compared to the bounding volume of the interpolated points.

Cubic Bezier interpolation example 1

Cubic Bezier interpolation example 1

Cubic Bezier interpolation example 2

Cubic Bezier interpolation example 2

As you work with the demo, make small changes in the interpolation points and note the much larger perturbation in the distribution of the control points. In fact, it is very easy to generate control points that are outside the boundaries of the demo.  This is why you would use a composite curve or spline to fit multiple points as opposed to using a k-th order Bezier to interpolate k+1 points.

This behavior results from using the cubic Bezier for a task for which it was not originally designed.  Bezier curves were designed to interpolate only endpoints.  The interior control points influence shape of the curve, which is designed to be smooth and eye-pleasing.  The lack of specific local control is one reason for the popularity of B-splines.

This raises the question of what applications might benefit from defining a Bezier curve by pure interpolation?  I’ve personally used 3-point quadtratic interpolation extensively for trajectories and route arcs that are constructed at run-time.  The four-point cubic interpolation is useful for animation paths containing an inflection and drawing simple runtime-generated boundaries for game visuals.  The cubic Bezier is ideal for shapes that need to be generated dynamically and drawn at run-time because of the ability to quickly subdivide and approximate with quads.  For any shape that needs to be defined dynamically, it is often much easier to create rules for interpolation points than Bezier control points.

I’ve had some questions regarding the use of this interpolation as a tweener.  As you can see from the demo, it’s much easier to build a specific shape passing through four points for tweening a property such as alpha than tweaking control points.  The y-at-x method can be used to generate interpolation values.  Some computer animation packages provide Bezier tweening, however, the implementation uses tangent handles and is more along the lines of cubic Hermite curves.

Although workable, Beziers often do not make good general-purpose interpolants. That’s simply not the purpose for which the curve was designed. For animation parameters in which there is a 1-1 mapping for x->y, a natural cubic spline is a much better interpolant.  The spline can also fit an arbitrary number of points, providing much better flexibility for local control of animation parameters.  This may be a good topic for a future demo.

In the mean time, you can download the latest version of Singularity and view the cubic bezier interpolation demo here.

  1. JT
    September 11, 2008 at 8:52 am

    Interesting – I’m taking linear algebra this semester, so I might try coding this in C++.

  1. No trackbacks yet.
Comments are closed.
%d bloggers like this: