Skip to main content

The Anatomy of a Spline

...Or, "Where is my Spline?"

info

There are a lot of different types of splines out there. For a nice overview, check out Steve's bonus lecture video on splines, which you can find on Canvas under the Steve's Lectures module. For this assignment, we will primarily focus on cubic Bezier splines, which are especially popular (because they are awesome).

Cubic Bezier Splines​

Here we answer the burning quesion of what to do if you ever find yourself at a party and someone yells "Quick! somebody derive the formula for cubic Bezier splines!". First of all: don't panic. Take a deep breath, have a sip of whatever exotic tea I assume they serve at such parties, and remember De Casteljau's algorithm.

Recall that we derived cubic Bezier splines in class by applying De Casteljau's algorithm to an ordered sequence of 4 control points. Below you will find a beautiful interactive visualization of the algorithm at work in an Observable by Mike Bostock, the creator of D3.js:

Interactive Observable by Mike Bostock visualizing De Casteljau's Algorithm for cubic Bezier splines. Click and drag to move control points.

You can refer back to the notes from our derivation in lecture if you need a refresher.

caution

In the assignment you will be asked to derive the velocity of a car driving along the spline curve. We did not derive this in class, but we did see how to express the spline as a polynomial function of our segment parameter, alpha. To find the instantaneous velocity of the car, you will need to compute the derivative of position with respect to alpha.

Control Points, Knots, and Segments​

Vocabulary around splines can be a bit inconsistent, in part because there are so many different types of splines out there. Here are the terms you should be familiar with:

  • Spline: The actual curve we are defining. It is given by the set of points that satisfy some spline function, which interpolates or approximates a set of control points.
  • Control Points / Values: An ordered set of points or other vector-valued things that control the spline.
  • Knots: Control points that get interpolated. Be warned: if you venture blindly into the Internet you will find those who use "knots" and "control points" interchangeably. Some of those people are talking about splines that interpolate all control points, and some of those people are talking lies... Ok, maybe that's too harsh, but just know that when we talk about knots in cubic bezier curves we are talking about the 1/3 of control points that are interpolated.
  • Segments: the individual spline functions that are chained together in a piece-wise fashion. For cubic Bezier splines, each segment has four control points, with the first and last being knots that are shared with adjacent segments.

Each of these concepts is labeled for a 2-segment cubic Bezier spline in the figure below:

Spline Explanation

Drawing Splines​

Cubic Bezier splines are probably the most popular type of spline in 2D graphics (unless you count linear splines...). This is because they are a basis of most curves in svg graphics. Here is an example of the pen tool in Adobe Illustrator, which is also based on cubic Bezier splines:

Illustrator Pen Demo

The controls you will use to draw tracks in A1 are designed in a very similar way. The first time you press down on the mouse while creating a new track, two vertices will be created at the location of your cursor. If you drag your mouse at this point, you will move the second control point. After that, each click will create three new control points; dragging will cause the last of which to move with your cursor, and the first of the three will move symmetrically to ensure that the three newly added control points remain in a straight line with the newly created knot in the middle. The process is illustrated below:

Spline Explanation

For the curious, you can also find the code that implements this functionality in the mouse callback functions defined in SplineCanvasSceneController.ts.