An adventure in Splines

Intro

Recently, I had to learn how to use and create Splines.

In my game “Jumping the Gun”, we have lights which hang from the ceiling. These lights are made using soft joints with points. Connecting these points with a line looked very sharp, so I wanted another way to connect the points.

This is where Splines come in. Splines, which are often used in game design and graphics design, are a way of turning a set of points into a curve. There are different types of splines, but the one I used and will be talking about is called “Catmull-Rom”.

Researching splines

Before this, I had a limited understand of Splines. There wasn’t much good information explaining how splines worked visually, but there are a few good resources I found:

Understanding splines

Catmull-Rom splines, explained at 48:22 in the first video, are a way of creating splines without using control points. You just feed it some points you want the curve to pass through and it creates a very nice curve.

To make these, we need to give each segment 4 points. The first and last points are control points, while the middle 2 are the start and end of the segment.

The most difficult part is creating a curve based on these points. To do this, we need some math. At 49:30 in “The Continuity of Splines”, we get an equation for the Catmull-Rom spline.

The exact equation is as follows:

Now, the difficult part is understanding what in the world this equation means.

Well, the equation is made of matrices. Simply put, a matrix is a way of mapping some value (or set of values) into another value (or set of values).

Matrix math

When we multiply a matrix by a number (like 0.5), we just multiply each value in the matrix by that number.

When we multiply a list by a matrix, we take each item of the list and match it to a row. The first item in the list matches to the top row. Last item to the bottom row. Then, we multiply each value across. Finally, we add all the values in each column so we get a list equal to the width of the matrix.

Using splines

We’re almost ready to actually generate the spline, but there’s one issue. At the start point, there isn’t a point before it to use for the segment. Same for the end point, except the point we’re missing is after.

To fix this, we can just mirror the other point around the point we’re having the issue with.

For the start point, we mirror the point after it, giving us a point before the start point. For the end point, we mirror the point before it, giving us a point after the end point.

We only generate the points for the spline, and then we delete them.

To mirror a point around another point, we can use the following equation:

Now, putting it all together, we should get a Catmull-Rom spline.

First, we get all the points we want to use in the Catmull-Rom spline and add them to a list.

Next, we loop over each group of 4 points.

For our special cases, we check if the start or end of the segment is the start or end of the list.

Finally, we feed the segment and control points into the spline equation.

Now, we want to get a bunch of points along the spline, so we also feed it a bunch of t values going from 0 to 1.

We can connect all these points and we get a beautiful curve!

Here is an example of the equation made in the Desmos graphing calculator:

https://www.desmos.com/calculator/j35sg1r4ng