This interactive web app enables you to explore the relationship between the following objects that are related to a curve C that can either be a Bezier curve or a spline curve.

• The control points P[i]
• The parameter value t
• The blending functions b[i](t) (Bernstein polynomials or B-splines)
• The point on the curve C(t) = sum{P[i]*b[i](t)}

This part of the program enables you to explore some properties of cubic spline curves.

To get help with exploring Bezier curves click here

A spline curve (as shown in this app) is a parametric curve C(t) = (x(t), y(t)), where x(t) and y(t) are each real-valued spline functions.

A spline function is made up of pieces, each of which can be represented by a polynomial. The pieces typically join together smoothly.

In this app, each polynomial is of degree three.

On the graph of the red spline curve you will see little black rectangles. These represent locations where we switch from one (x(t), y(t)) pair of polynomials to the next. The parameter values associated with these locations are called knots.

The yellow circle on the red cubic spline curve is always at the center of mass of the blue control points, where the mass of each control point is equal to the area of the blue circle.

The number next to this yellow circle (the parameter) varies between 0 and 1.

As this number varies, the yellow circle moves along the red curve, and the blue control points increase or decrease in area, with at most four of the control points having some blue for any parameter.

The areas of the four blue circles always add up to 1.

These areas are equal to the values of the functions whose green graphs are drawn next to the blue circles.

These functions are called B-splines.

The black polyline connecting the blue control points is the control polygon for the spline curve. NOTE: The spline curve is always tangent to its control polygon at the endpoints, no matter how you move the control points.

Finally, the brown lines connecting the small orange circles illustrate de Boor's algorithm for evaluating a point on the spline curve at a particular parameter value.
If you select the box labeled Skeleton, you will see only the details of de Boor's algorithm.
Starting with only those edges of the control polygon for which the end points are participating, an orange circle is placed along that edge at a position determined by the current parameter value according to a somewhat complex formula.
Then new edges are created connecting successive orange circles, and the process is repeated, creating new orange circles and brown edges, until we finally arrive at the point on the curve.

Press the Start Animation button to start the animation.

Press the Stop Animation button to stop the animation.

At any time, you can also do your own exploration as follows:

• You can click on any control-point circle and drag it around to change the shape of the curve. The parametric position of the yellow circle will not change.
• You can click on the yellow circle and drag it along the curve and watch the areas of the blue circles change accordingly. The locations of the centers of the blue circles will not change.
• In most browsers you can grab the slider Parameter Range near the bottom and move it to make the yellow circle move.

You can switch from Spline to Bezier by clicking the radio button next to Curve Type, and you can get help with exploring Bezier curves here.

---

You can also view the explanatory YouTube video at https://youtu.be/-aiErrvLRfE

Here is the transcript of the commentary that accompanies the YouTube video (together with several corrections and additional remarks).

Here is a related article: https://medium.com/@rdfuhr/exploring-bezier-and-spline-curves-a8261b3c7a8b

Here is a list of development tools and resources that I used to develop the web app.

Here are some Frequently Asked Questions (and answers) about the web app.

Here is a brief discussion of some Spline Terminology that is related to the web app.

Here is a quick look at some math topics related to both Bezier and spline curves.

---

Please send your questions or comments to the software developer at richard.fuhr@gmail.com.

Follow me on Twitter at @rdfuhr.