Skip to main content

The Anatomy of a Spline

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

There are a lot of different types of splines out there. For a nice overview, you can 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 discussed how to derive Bezier splines from De Casteljau's algorithm in class. You can also review derivations for the matrix forms of quadratic Bezier splines and cubic Bezier splines in the course notes, and 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.

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, Interpolated Control Points, 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 we will use:

  • 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.
  • Interpolated Control Points: Control points that get interpolated, meaning our spline will include them by construction. Note that it's possible to arrange our control points such that a regular control point ends up on our spline, but that doesn't make it an intepolated point. Interpolated control points will always be on our spline no matter where we put the rest of our control points. When we talk about interpolated control points in cubic bezier curves we are talking about the 1/3 of control points that are always 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 interpolated control points 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 interpolated control point 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.

Segment Index, Continuous Segment Index, and Progress

Your spline is a piecewise cubic Bezier curve, meaning that it starts at one interpolated control point and extends through a sequence of connected segments before ending at another interpolated control point. If we interpret our spline as a trajectory, global progress along that trajectory happens by making local progress along individual segments in a sequence. In lecture, we used alpha to describe the local progress along each segment. In A1, you will have to convert from global progress along a spline to a continuous segment index, where the integer part is the order index of the segment we are currently on, and the decimal part corresponds to the value of alpha that maps to the current location on the current segment.