Curves & Surfaces

Splines & Bézier Curves

From interpolation to approximation: Creating smooth curves for graphics and data.

1

Splines: A Quick Review

Linear Spline (Degree 1)

Simply connect the dots.

$S_i(x) = y_i + \frac{y_{i+1}-y_i}{t_{i+1}-t_i}(x-t_i)$

Continuity: $C^0$ (Value only).

Linear Spline

Quadratic Spline (Degree 2)

Parabolas. Requires $S'(x)$ continuity ($C^1$).

One extra constraint needed (e.g., $S'(t_0)$).

Cubic Spline (Degree 3)

The standard for smoothness. Requires $C^0, C^1, C^2$ continuity.

$S_i(x) = a_{0,i} + a_{1,i}x + a_{2,i}x^2 + a_{3,i}x^3$

Two extra degrees of freedom. Options: Natural ($S''=0$), Clamped ($S'$ fixed), Not-a-knot.

2

Natural Cubic Spline Derivation

How do we actually find the coefficients? We solve for the curvatures $z_i = S''(t_i)$.

Step 1: Assume we know $z_i$. Since $S_i(x)$ is cubic, $S''_i(x)$ is linear.
$S''_i(x) = \frac{z_i}{h_i}(t_{i+1}-x) + \frac{z_{i+1}}{h_i}(x-t_i)$
Step 2: Integrate twice to get $S_i(x)$. Use interpolation conditions ($S(t_i)=y_i$) to find constants.
Step 3: Enforce slope continuity: $S'_i(t_i) = S'_{i-1}(t_i)$.

The Tridiagonal System

\[ h_{i-1}z_{i-1} + 2(h_i+h_{i-1})z_i + h_{i}z_{i+1} = 6(b_i-b_{i-1}) \]

Where $b_i = \frac{1}{h_i}(y_{i+1}-y_i)$. Solve for $z$ using $\mathcal{O}(n)$ algorithm!

3

Bézier Curves

Unlike splines which interpolate (pass through) points, Bézier curves approximate using control points.

  • Used in Fonts (TrueType, PostScript).
  • Vector Graphics (SVG, Illustrator).
  • Curve stays within the convex hull of control points.
Control Points Hull
Quadratic Bezier

Quadratic (3 Points)

1 Control Point

Cubic Bezier

Cubic (4 Points)

2 Control Points

Higher Order

Convex Hull Property

Curve stays inside.

4

Bernstein Polynomials

Bézier curves are defined parametrically using Bernstein basis polynomials:

\[ P(t) = \sum_{i=0}^n \binom{n}{i} (1-t)^{n-i} t^i P_i \]

$t$ goes from 0 to 1.

Cubic Bézier ($n=3$)

Uses 4 points: $P_0, P_1, P_2, P_3$.

$x(t) = (1-t)^3 x_0 + 3(1-t)^2 t x_1 + 3(1-t)t^2 x_2 + t^3 x_3$
$y(t) = (1-t)^3 y_0 + 3(1-t)^2 t y_1 + 3(1-t)t^2 y_2 + t^3 y_3$

Key Properties:

  • Interpolates endpoints: $P(0)=P_0$, $P(1)=P_3$.
  • Tangent at start ($t=0$) is along line $P_0 \to P_1$.
  • Tangent at end ($t=1$) is along line $P_2 \to P_3$.
Cubic Bezier Properties

🧠 Final Challenge +20 XP

Which of the following is TRUE about a Cubic Bézier curve defined by points $P_0, P_1, P_2, P_3$?