In part I and part II of this series, we saw that splines are essentially piecewise polynomials designed to fit a set of data points or knots. The spline is called a piecewise function as the definition of the curve depends on the ‘piece’ or segment. From the previous example with five knots, there are four polynomial functions, the definition of which depends on the segment. One polynomial is defined for the segment from knot 0 to knot1. Another is defined for the segment from knot 1 to knot 2, and so on. Another name for this type of curve is a composite curve as it is composed of multiple, independent constituent curves.

Believe it or not, you are probably already familiar with drawing certain types of splines with your previous Flash work. If you have ever drawn line segments between points using moveTo() and lineTo(), you just drew a piecewise linear spline that interpolates the points at each moveTo() and lineTo(). You did not have to define each (linear) polynomial as Flash did the drawing for you. A linear polynomial has two coefficients, i.e. y = c0 + c1*x. Two conditions are required to determine the coefficients. These are uniquely determined by having the line segment pass through each knot. So, one set of coefficients is determined by a line from knot 0 to knot 1. Another line segment is determined by having a line pass through knot 1 and knot 2. The process continues for each new knot.

A quadratic spline would be piecewise quadratic, meaning there would be one quadratic polynomial for each segment; knot 0 to knot1, knot 1 to knot 2, and so on. Three conditions would be required for each segment as there are three coefficients in a quadratic polynomial.

The cubic Bezier spline in Degrafa is piecewise cubic, meaning there is a unique cubic Bezier curve for each segment. If there are five knots, there are four cubic Bezier curves. Since each cubic is ‘well behaved’, this avoids the oscillation problems with high-order interpolating polynomials.

The cubic Bezier curve requires four control points to uniquely determine its coefficients. Two control points are fixed as the spline must interpolate the knots. So, for example, the outermost control points for the first cubic Bezier curve are knot 0 and knot 1. The outermost control points for the second cubic Bezier curve are knot 1 and knot 2.

We are free to choose how the other control points are chosen. I mentioned in part II that to achieve a smooth curve through each knot, certain continuity conditions are applied at the joins. The obvious continuity is that the curve pass through each knot. Otherwise, what’s the point of the spline in the first place? Technically, this is called geometric continuity.

The spline would be pretty worthless if there were cusps or ‘rough spots’ at the joins. Instead, we want the spline to look as if it were smoothly drawn through each point, almost as if by hand. Intuitively, this means we want the slope of the curve going into one join to be the same as the slope of the curve going out of the same join.

If you’ve taken calculus, you recognize this as continuity of first derivative at each join. If you haven’t taken calculus, think about the slope of the line segment at the end of the Bezier control cage going into a join and the slope of the line segment at the beginning of the Bezier control cage going out of the same join.

These control cages are sets of four points that determine a unique cubic Bezier curve. The line segments above are called in-tangents and out-tangents. They are illustrated for the first cubic Bezier segment in the following diagram.

By matching the in- and out-tangent at each join, the spline passes through each join as if it we drew a single smooth curve, even though it is comprised of completely independent Bezier curves.

Matching tangent direction alone does not supply enough information to completely determine a set of control points for each Bezier curve. Fortunately, this gives us some design flexibility in terms of a ‘tension’ parameter. If you are curious about the technical details, you can read this TechNote.

The next section will discuss why so much attention is devoted to cubic splines and why the cubic Bezier spline was the first to be ported to Degrafa.

Cool – how many parts to this series?

JT – perhaps six or seven; don’t really know. I want to cover everything from ‘what is a spline’ to how to create/manipulate the Degrafa cubic bezier spline in MXML and script.

regards,

– jim armstrong