## Bézier Splines: Continuity

We provide a tool to explore the continuity of Bézier splines interactively on the web. Bézier splines can be created and modified at will. Different continuity conditions can be enforced. Notably, the first and second derivative vectors are visualized to illuminate the connection between their values and the continuity of the spline.

## About Bézier Splines and their Continuity

Given a control polygon consisting of *n* + 1 Bézier points,
Bézier **curves** interpolate the first and last point while approximating all other points.
They are polynomial curves of degree *n*.
Moving any Bézier point changes the entire curve, i.e., local control is missing.

Bézier **splines** consist of several Bézier curves that have been joined consecutively.
This alleviates the issue of a high polynomial degree
and provides local control in most circumstances.
Bézier splines can have different levels of continuity
at the joint, which can be characterized using the first and second derivative (velocity and acceleration):

*C*^{0}-continuity refers to adjacent Bézier curves actually ending and starting at the same point.*C*^{1}-continuity is given when the curve is*C*^{0}and the first derivative vectors of both curves coincide at the joint.*C*^{2}-continuity is given when the curve is*C*^{0},*C*^{1}, and the second derivative vectors coincide at the joint.*G*^{1}- and*G*^{2}-continuity refer to conditions where an appropriate parametrization of the joined curves will achieve*C*^{1}- or*C*^{2}-continuity, respectively.

C^{0}-continuity: continuous curve, discontinuous velocity and acceleration |
G^{1}-continuity: continuous curve, semi-discontinuous velocity, discontinuous acceleration |
C^{1}-continuity: continuous curve and velocity, discontinuous acceleration |
C^{2}-continuity: continuous curve, velocity, and acceleration |

Using the picture from above, we make the following observations:

- A merely
*C*^{0}-continuous joint creates a notable kink in the curve. The velocity plot shows that the first derivatives do not attain the same value at the joint. The same goes for the acceleration (second derivative). *G*^{1}-continuity requires that the**directions**of the velocity vectors coincide at the joint. This puts mild constraints on the Bézier points before and after the joint: the so-called handles (the black lines around the joint) need to be aligned, but not necessarily of the same length. The velocity plot still shows a discontinuity, but notice how the red derivative ends parallel to the*x*-axis, and the blue derivative starts parallel to the*x*-axis. In other words, the derivatives have the same direction, but not length. An appropriate parametrization of the curves (in this case, moving slower through the red curve) leads to the first derivatives being continuous.- A
*C*^{1}-continuous joint appears visually smooth. The velocity vectors of both Bézier curves coincide at the joint, but not the acceleration vectors. - A
*C*^{2}-continuous joint is required to achieve smooth animations along the spline, since smooth animations require continuous velocity and acceleration. Note that this restricts the positions of all but the interpolated points. The shown spline uses the so-called*natural end condition*where the spline reaches zero curvature at its end points. The used knot vector is a simple [0, 1, 2], which means we take the same amount of time to move between adjacent interpolated points.

## User Interface

The top of the user interface provides buttons to enforce different continuity conditions. It is also possible to clear all curves, and to show a single Bézier curve (instead of a spline) through all input points.

The main part of the user interface provides a large canvas on the right to draw a Bézier spline, and the corresponding velocity and acceleration plots on the left side.

- Click on the canvas to add a point.
- Ctrl-Click on a point to remove it.
- Move a point by dragging it with the left mouse button.
- Hover with the mouse pointer near the spline to see the velocity vector aka. the tangent vector. It is displayed using a black arrow. The same vector is displayed in the velocity plot, where it is anchored at the origin. The velocity plot then also shows its tangent, which is the second derivative of the spline. The acceleration plot shows this vector anchored at the origin.

## Authorship and Acknowledgements

This tool has been created by Jule Schmidt and Tino Weinkauf for the course DH2320/DD2258 at KTH Royal Institute of Technology, Stockholm, Sweden.

Our work is inspired by Freya Holmér's video The Continuity of Splines. The setup presented in our tool is similar to what is shown at 20:42 in the video.
Note, however, that our *C*^{2}-continuous spline uses a different setup: we restrict the ends of the spline using the natural end condition, which makes it rather well-behaved. The *C*^{2}-continuous spline in the video yeets off because the constraints are set differently.

We use Bryce Wilson's code for solving *C*^{2} and *G*^{2} Bézier splines.
The latter are obtained through a knot vector representing the distance ratios between the knots.

We use Plotly to visualize the velocity and acceleration.