Degrafa – Introduction to Splines Part I

This is the first part in a multi-part series introducing Degrafa splines.  Splines are a new feature in Degrafa Beta 3.  While there is currently a single offering (a cubic Bezier spline), plans are in place to provide more capability in future releases.

Computational geometry can be confusing, especially if you have little math background and prefer to work with applications at the MXML level, not with low-level script (where there is a closer correlation between mathematical algorithms and code).  So, let’s start at a high level.  First question – just what is a spline?

You are used to drawing lines and curves in Flex; the curves are implemented as quadratic Beziers (curveTo). A quadratic Bezier requires three points to specify the shape of the curve; two endpoints and a middle control point.  The quad. Bezier passes through (interpolates) the endpoints and its shape is influenced by the middle point.

What if you wanted to draw a smooth curve between multiple points?  You can interpolate three points with a quadratic Bezier and four points with a cubic Bezier.  The math for the former is completely discussed in this TechNote and illustrated in this online demo. The four-point cubic Bezier interpolation is illustrated in this online demo.

What if you wanted to create a smooth curve that passed through five or six points? Your first thought might be to interpolate a quadratic Bezier through sets of three points; one quad. Bezier through the first three points, another through the second three points, and so on.  But, what to do when there is not an even multiple of three points? Then, would the curve actually be smooth?  You would find that in general, there would be ‘kinks’ in the curve at the interior interpolation points.

In the days before computer-aided design and manufacturing, shipbuilders faced this same problem when designing/building a ship’s hull.  Cross-sections of the hull need to be manufactured to fit smooth curves, but how does one design such a curve?  The answer was thin strips of flexible material from which weights were hung at certain points.  The material elasticity causes it to bend with minimum energy to support the weight, leading to a smooth outline that passes through specific points.  The points can be adjusted by altering the weight and the position at which the weight is hung from the material.

The strip of material was called a spline and the specific points to which weights were attached were called knots.  The term knot was borrowed from a similar procedure where knots were tied into rope that was allowed hang from two endpoints to serve as a quick guide for placing points through which a wooden spline would eventually pass.

This process was studied in the early days of computer graphics to create procedures by which curves could be mathematically constructed to fit a set of knots or interpolation points.  Jacob Schoenberg is generally credited for applying the term ‘spline’ to a class of mathematical curves that are smooth and interpolate or are influenced by a predetermined set of points.

For purposes of drawing in Degrafa, we are interested in interpolative splines; that is curves that exactly pass through a specific set of knots.  These points are also frequently called interpolation or control points.

That’s a bit of the history.  Tomorrow, we will look at how splines differ from interpolating polynomials and add a couple more fancy terms for you to throw out at your next Flex meeting 🙂


5 thoughts on “Degrafa – Introduction to Splines Part I

  1. (I had a previous comment held for moderation — perhaps I write like a spammer!)

    Thank you for a very interesting series of articles on splines.

    I recently wrote an article introducing Bezier curves and splines using Geogebra, and think this series is a perfect place to point people to if they want to know more of the history and technical details.

Comments are closed.