Help With Exploring Bezier Curves

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 Bezier curves.

To get help with exploring spline curves click here

A Bezier 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 polynomials.

What distinguishes a Bezier curve from the better-known form (where polynomials are expressed in the form a + bt + ct^2 + dt^3) is that we express Bezier curves in terms of control points and Bernstein polynomials.

The yellow circle on the red cubic Bezier 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.

The areas of the four blue circles always add up to 1. NOTE: In this demo, the areas of the circles are rounded to two decimal places, so there can be cases where the sum of these rounded areas does not equal 1.

The number near each blue circle is the area of that circle.

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

These functions are called Bernstein basis polynomials.

The black polyline connecting the blue control points is the control polygon for the Bezier curve. NOTE: The Bezier 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 DeCasteljau's algorithm for evaluating a point on the Bezier curve at a particular parameter value.
If you select the box labeled Skeleton, you will see only the details of DeCasteljau's algorithm.
Starting with each edge of the control polygon, an orange circle is placed along that edge at a position determined by the current parameter value.
For instance, if the current parameter value is 0.38, then each new orange circle is placed 38% of the way along that edge.
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 labeled Parameter Range near the bottom and move it to make the yellow circle move.

You can switch from Bezier to Spline by clicking the radio button next to Curve Type, and you can get help with exploring spline 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 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 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.