Catmull-Rom Splines

When animators lay out a camera fly-through or game designers plot a racing line, they need a curve that is smooth and obedient: it must pass exactly through every waypoint they place, with no abrupt kinks at the joins.

That is precisely what Catmull-Rom splines deliver. Invented by Edwin Catmull and Raphael Rom in 1974, they belong to the family of interpolating splines — as opposed to the approximating Bézier curves, which only approach their control points without ever touching them. Every point you place on a Catmull-Rom path is a point the curve actually visits.

The secret ingredient is $C^1$ continuity: not only does the curve flow without breaks, but its tangent direction (the velocity vector) changes smoothly at every join. The resulting motion feels natural because it matches how a physical object — a camera, a car, a roller coaster — would actually travel through those positions.

Drag the waypoints on the canvas below. The curve passes through every colored dot — not just near them. Add a new point by clicking an empty area, or remove one by right-clicking it.

<!-- {{c_html_intro}} -->
<div class="toolbar">
  <button id="btn-tangents" type="button" class="toggle" aria-pressed="false">{{btn_tangents}}</button>
  <button id="btn-reset" type="button" class="ghost">{{btn_reset}}</button>
  <span class="hint-label">{{hint_click}}</span>
</div>
<canvas id="canvas" width="560" height="340" aria-label="{{canvas_aria}}"></canvas>
<div class="status" id="status">{{status_initial}}</div>

/* {{c_css_intro}} */
* { box-sizing: border-box; }
body { font-family: system-ui, sans-serif; margin: 0; background: #f5f7fa; color: #1d2b3a; }
.toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem 0 .4rem; }
button { font: 600 13px system-ui; padding: .35rem .8rem; border-radius: 7px;
         border: 1px solid #1d3557; background: #1d3557; color: #fff; cursor: pointer; }
button.ghost { background: #fff; color: #1d3557; }
button.toggle.active { background: #2a7d4f; border-color: #2a7d4f; }
.hint-label { font-size: .82rem; color: #556; margin-left: .25rem; }
canvas { display: block; border-radius: 10px; background: #fff;
         border: 1px solid #dde3ea; cursor: crosshair; touch-action: none; max-width: 100%; }
.status { font-size: .88rem; color: #556; margin-top: .4rem; min-height: 1.3em; }

// Code not found

Notice how the curve never has a sharp corner: each segment flows into the next with a matching slope. That smooth handoff is $C^1$ continuity in action. Toggle the tangent arrows to see the velocity vectors that make it work.

Under the hood, each segment of a Catmull-Rom spline is a cubic Hermite curve — a polynomial of degree 3 defined by two endpoints and two tangent vectors.

Given four consecutive control points $P_{i-1},\, P_i,\, P_{i+1},\, P_{i+2}$, the segment from $P_i$ to $P_{i+1}$ is drawn by setting the tangent at each end to:

$$\mathbf{m}_i = \frac{P_{i+1} - P_{i-1}}{2}, \qquad \mathbf{m}_{i+1} = \frac{P_{i+2} - P_i}{2}$$

With those two tangents locked in, the segment is a single cubic that can be written as a matrix product:

$$\mathbf{q}(t) = \begin{bmatrix}1 & t & t^2 & t^3\end{bmatrix} \begin{bmatrix}0&1&0&0\\-\tfrac{1}{2}&0&\tfrac{1}{2}&0\\1&-\tfrac{5}{2}&2&-\tfrac{1}{2}\\-\tfrac{1}{2}&\tfrac{3}{2}&-\tfrac{3}{2}&\tfrac{1}{2}\end{bmatrix} \begin{bmatrix}P_{i-1}\\P_i\\P_{i+1}\\P_{i+2}\end{bmatrix}$$

where $t \in [0, 1]$ walks from $P_i$ to $P_{i+1}$.

Algorithmic cost: for $n$ control points you get $n - 3$ interior segments (with two phantom end-points, or $n - 1$ segments with clamped ends). Each segment needs exactly four multiplications of a $4 \times 4$ matrix — the total work is $O(n)$.

Continuity: at every interior point the curve has matching position ($C^0$) and matching first derivative ($C^1$), but the second derivative can jump ($G^2$ is not guaranteed). For smoother results, the centripetal variant re-parameterises $t$ by $\sqrt{\lVert P_{i+1} - P_i \rVert}$, eliminating cusps and self-intersections that can appear with unevenly spaced points.

Catmull-Rom splines appear wherever a system needs to move smoothly through a set of prescribed positions:

• Film and game animation: camera rigs follow Catmull-Rom paths so cinematographers can place keyframes and trust the curve to interpolate a natural motion. Disney, Pixar, and virtually every 3-D game engine use them under the hood.
• Racing-line AI: in driving games and autonomous vehicles, the optimal path through a series of waypoints is often a Catmull-Rom spline — it guarantees the vehicle passes through each gate without a jerk.
• Robotics and drone flight: a quadrotor given a list of checkpoints plans its trajectory as a Catmull-Rom path, giving smooth velocity profiles that keep the flight stable.
• Map routing and GPS: some navigation systems smooth the sequence of road-network nodes into a Catmull-Rom curve before rendering the turn-by-turn polyline, removing the visual staircase effect.
• Font design and vector graphics: editors like Inkscape allow toggling between Bézier and Catmull-Rom handles so designers can lock points to the curve and let tangents compute themselves.

The common thread: whenever you have a list of positions and need a physically plausible motion through all of them, Catmull-Rom is often the first tool to reach for. See also convex hull and closest pair for related geometric algorithms.

Catmull-Rom splines solve a deceptively simple problem — connect a list of waypoints with a smooth curve — in the most elegant way: derive the tangents automatically from the neighbors. No manual handle-pulling, no unsatisfied points.

The result is a cubic curve that is $C^1$-continuous everywhere, computed in $O(n)$ time, and visually natural even for novice users. Fifty years after Catmull and Rom published their idea, it still ships in every major game engine, 3-D renderer, and animation tool on the planet.

The next time a camera glides through a scene, or a racing car hugs a series of gates, or a drone threads a sequence of checkpoints, there is a very good chance that four neighbors and a $4 \times 4$ matrix are quietly doing the work.