The following is a transcript of the spoken commentary that accompanies the video. In addition, I have put some supplementary comments in bold inside brackets [] that reflect some suggestions given to me by viewers, as well as some additional points of clarification.

[This video describes] a web app for exploring Bezier and spline curves. Anyone who has internet access and who has a computer or mobile device with a reasonably modern browser can use this app the same way I am using it here. So, let us get started.

Bezier curves and spline curves are used quite a bit: in the design of airplanes, automobiles, and also, on a much smaller scale, fonts: every shape of every letter.

So this app enables you to use both Bezier curves and spline curves.

We will start with Bezier curves.

The red curve you see is a Bezier curve, and it is really just a polynomial. [Actually it is a parametric curve of the form C(t) = (x(t), y(t)) where x and y are each cubic polynomials]. But the main property that makes it unique here is that it is determined by the four control points that you see, which are shaded in blue.

So if I start the animation, as you see the yellow point move along the curve, the blue circles get larger and smaller as the point moves. [The yellow point is always located at the center of gravity of the four control points, where the mass of each control point is indicated by the area of the blue circle centered at that control point].

And, as the point moves, the parameter moves.

The size of each blue circle is determined by the value of the graph of the curve that is colored green [the green color does not show up very vividly in the video] right next to each control point. [These four graphs are each graphs of cubic polynomials (known as Bernstein polynomials) that play a prominent role in mathematics].

So now, let us stop the animation.

I can also move the control points, and, as you see, these move the curve. So, you can just click and drag to move the control points.

What you can also do is click and drag to move the point on the curve. [as you move the point on the curve, you will see the corresponding parameter value change, and you will also see the blue circles expand and contract].

Another thing that is a feature of this app is that you can click the Skeleton check box, and now we see only some straight lines [and some points], and there is a subdivision algorithm by De Casteljau [pronounced cas-tel-zho], which enables you to calculate the value [the (x,y) coordinates] of the yellow point given the current locations of the control points and given the parameter [the parameter is a number between 0 and 1]. So if I start the animation, you will see, as the yellow point moves along, the De Casteljau points and lines move. I explain a little bit more about what these are if you click the Help button [there are links to some Wikipedia articles].

So now, let us stop the animation, and let us uncheck the Skeleton box, and we get back to the Bezier curve.

Now let us click the Spline radio button.

So now, we have a situation that looks more complex than the one before. In the Bezier case we had four control points. In this case, which is a spline, we have eight control points, but the number [can be] arbitrarily large. It must be at least four though [for a cubic spline, which this is, the minimum number of control points is four]. And what this curve is - is a piecewise cubic polynomial [Actually it is a parametric curve of the form C(t) = (x(t), y(t)) where x and y are each piecewise cubic polynomials]. Where you see those black little rectangles on the curve, that is where we switch from one cubic polynomial to another. [Notice that the polynomial components join together quite smoothly].

So, if I do the Start Animation then we see the yellow point moves along the curve, and once again, as in the Bezier case, we see the blue circles expand and contract. But one critical difference here is that at most four of the circles have blue in them. So the yellow point is always at the center of mass of the four blue circles [as it was in the Bezier case]. So if we stop the animation, we can click and drag the various control points and we can see the curve move. [Actually, you can click and drag the control points even during the animation process]. You can also see the green graphs [unfortunately the green does not show up very vividly in the video] of the B-spline basis functions adjacent to each control point. [While the term "B-spline basis function" is in widespread use, the B in B-spline already stands for "Basic" so it is much better style to simply call each such object a B-spline (the name I. J. Schoenberg gave them).] [The current value of each B-spline corresponds to the current area of the corresponding blue circle, and that area can be zero].

And we can also drag the yellow point along the curve, and, as we do that, we see the little points on the graphs move, and we also see the blue circles expand and contract.

We can also click the Skeleton box, and this is analogous to the Bezier case. We are now seeing an algorithm in action that is being used to compute the yellow point, based on the parameter and based on the control points. [The algorithm also is based upon the parameter values at which we switch from one cubic polynomial component to the next. These parameter values are called knots]. This algorithm was developed by Carl de Boor.

So, anyway, we will now stop the animation and uncheck the Skeleton box, and if we Reset the Curve, it just puts it back to its starting shape and starting parameter.

[One important point is that this app demonstrates two different ways of obtaining the location of the yellow point on the curve. The first way is to interpret the location as being at the current center of mass of the blue control points, where the amount of blue (the weight) is governed by the values of the Bernstein polynomials in the Bezier case and by the B-splines in the spline case. The second way is to obtain the location by the algorithms depicted when you check the Skeleton box. It is the De Casteljau algorithm in the Bezier case and it is the de Boor algorithm in the spline case].

[Finally, note the following nice relationships between the mathematics of splines and Bezier curves in the special case where the spline consists of only one polynomial component (and therefore there are no interior knots, only multiple start and multiple end knots):


So I hope you will give this web app a try.

And here again is the URL of where you can find the web app and give it a try.

Enjoy using it!