Exploring Bezier and Spline Curves
Bezier and spline curves and surfaces are widely used in the design of cars and airplanes. On a much smaller scale, Bezier curves are used to represent the shape of letters, including the font definitions used for this article you are now reading.
Here is a link to an interactive web app that I developed, which will enable you to explore some of the properties of both Bezier and spline curves.
https://richardfuhr.neocities.org/BusyBCurves.html
The purpose of this article is to provide an introduction to the app and to describe some of the mathematical properties of the curves that you will see.
In order to best understand this article and the app, you should be reasonably comfortable with the concept of polynomial. For instance, a cubic polynomial is of the form f(x) = ax³ + bx² + cx + d. You should also be familiar with the concept of a parametric curve in the plane, which can be written in the form C(t) =(x(t), y(t)).
A Bezier curve is a parametric curve, usually in 2D or 3D. Here we will be looking at 2D curves. So a Bezier curve can be written in the form
C(t) = (x(t), y(t))
and an additional requirement is that the x(t) and y(t) be polynomials. Here we will be looking at the case where the degree of the polynomials equals three, and we call these cubic Bezier curves. A final requirement is that the x(t) and y(t) not be expressed in the familiar form that we learned in high school: at³ + bt² + ct + d, but rather in the rather cryptic form
x(t) = X0*B0(t) + X1*B1(t) +X2*B2(t) + X3*B3(t)
y(t) = Y0*B0(t) + Y1*B1(t) + Y2*B2(t) + Y3*B3(t)
where
B0(t) = (1-t)³
B1(t) = 3(1-t)²*t
B2(t) = 3*(1-t)*t²
B3(t) = t³
and B0(t), B1(t), B2(t), B3(t) are known as the Bernstein polynomials of degree 3. It turns out that these Bernstein polynomials form a basis for the space of all cubic polynomials, which means that every cubic can be expressed uniquely as a linear combination of the four Bernstein polynomials.
We can express the (Xi, Yi) above as points Pi in the plane so that
a Bezier curve C(t) = (x(t), y(t)) can be written in the form
C(t) = P0*B0(t) + P1*B1(t) + P2*B2(t) + P3*B3(t)
If all of this looks a bit daunting, well, it is, but it is not required to understand all the gory details of the math in order to work with Bezier curves. It is also not the purpose of this article to derive all the underlying mathematical properties; there are many books on the subject. I provide links to some Wikipedia articles if you click Help in the app.
You might still be asking: why are we representing the good old familiar cubic polynomials from high school days in terms of these relatively obscure and messy looking functions B0, B1, B2 and B3?
Well, it turns out that, when we express C(t) in this way, in terms of the control points P0, P1, P2 and P3, and the Bernstein polynomials B0, B1, B2 and B3, then the computing and the graphics work out very nicely. For instance, points along the curve can be computed in an efficient and stable manner. Also, the shape of the curve is directly and intuitively related to the positions of the control points.
This implementation was first done, independently and at about the same time, by Pierre Bézier, who worked at Renault, and by Paul de Casteljau, who worked at Citroën
A picture is worth 1000 words, and an animation is worth 1000 pictures, so this will all become clearer when you run the app, start the animation, or directly manipulate the control points P0, P1, P2 and P3.
When you start the web app, the first screen that you see will look something like what is shown below.
For starters, click the Start Animation button and see how the four blue control points expand and contract as the yellow point on the red curve (the Bezier curve) moves back and forth along the curve.
The most important thing to remember here is that the yellow point is always at the center of gravity of the four blue circles.
The little green graphs next to the four blue circles are the graphs of the four cubic Bernstein polynomials, and the areas of the four blue circles are governed by the current values of the corresponding Bernstein polynomials.
After viewing the animation, try manipulating the control points or the point on the curve by clicking and dragging one of the circles. You can get more information by clicking the Help button.
After you have experimented with the Bezier curve for a while, click the radio button labeled Spline, and you will see a screen that looks something like the one below.
What you see here is the graph of a cubic spline, which is similar to a cubic Bezier curve, only more complex. This time, instead of the red curve being a cubic parametric polynomial, it is made up of five (in this case) separate cubic parametric polynomials, which connect to each other at locations represented by the small black rectangles. The parameter values that correspond to these connecting points are known as knots.
Also, this time, instead of four control points, there are eight! But, for each location of the yellow point on the curve, only four of the eight control points determine the location of the yellow point, as denoted by the areas of the blue circles inside the white circles.
To see this in action, click the Start Animation button and observe the blue circles expanding and contracting, and their areas are always determined by the values of the functions whose graphs are next to the corresponding control point circles. These functions are called B-splines.
As with the simpler Bezier curve, in the case of the spline curve, the yellow point is always at the center of gravity of the four blue circles. This time, there will always be four circles that do not participate in controlling the location of the yellow point. But all the circles get their chance to participate as you vary the parameter value, as can be seen through the animation or by directly dragging the yellow point.
Many people have contributed to the development of splines in computer graphics and other fields. Isaac Schoenberg was (as far as I know) the first to use the term “spline” as the name for this mathematical object, using the name of the flexible wooden or metal strip (also called a spline) that can be bent and used to trace a smooth curve. Schoenberg developed much of the basic theory of splines. Later, Carl de Boor developed many of the algorithms that are in use today, and his book, “A Practical Guide to Splines,” covers the theory in incredible detail.
Since the app is a web app, it should run on most browsers on most desktop and laptop computers, running Windows, macOS, Linux, and ChromeOS. It should also run on tablets and smartphones.
The URL for the app is https://richardfuhr.neocities.org/BusyBCurves.html
I wrote this web app using a combination of HTML5 and TypeScript. If you are able to view the source code of the app in your browser, you will see the JavaScript generated from the TypeScript. Would SVG be a viable alternative for implementing this sort of app? I don’t know.
If you have thoughts on this, or any other questions, please post in the comment section below.
Thanks!
