---
title: Curves and Surfaces
module: Geometry of Vector Spaces
moduleNumber: 9
lessonNumber: 5
order: 905
summary: >
  Bézier curves are affine combinations of control points with polynomial
  weights, so they lie in the convex hull of those points and bend toward them.
  The de Casteljau algorithm evaluates them by repeated interpolation, a matrix
  form factors them for computation, and matching endpoints and tangents joins
  segments into smooth curves and surfaces.
topics: [Geometry of Vector Spaces]
sources:
  - book: Lay
    ref: "Ch. 8 — The Geometry of Vector Spaces; §8.6 Curves and Surfaces"
draft: false
---

Design software stores a curved letter, a car panel, or a font glyph not as a
dense list of points but as a handful of control points. The curve is recovered
from them by a fixed rule, and moving one control point reshapes only a local
piece. Bézier curves are the rule that made this practical, and they are built
entirely from affine and convex combinations of the control points.[^lay-bez]

## Bézier curves

A **Bézier curve** is a combination of control points with polynomials in $t$ as
weights, for $0 \le t \le 1$. A quadratic curve uses three control points; a cubic
uses four:

$$
\mathbf{w}(t) = (1-t)^2\mathbf{p}_0 + 2t(1-t)\mathbf{p}_1 + t^2\mathbf{p}_2,
$$

$$
\mathbf{x}(t) = (1-t)^3\mathbf{p}_0 + 3t(1-t)^2\mathbf{p}_1 + 3t^2(1-t)\mathbf{p}_2
+ t^3\mathbf{p}_3.
$$

At each $t$ the polynomial weights are nonnegative and sum to $1$ — for the cubic,
$(1-t)^3 + 3t(1-t)^2 + 3t^2(1-t) + t^3 = 1$ by the binomial theorem. Every point of
the curve is a convex combination of the control points, so the curve lies inside
their convex hull. It passes through the first and last control points, at $t=0$
and $t=1$, but generally not through the interior ones; those pull the curve
toward themselves without lying on it.

$$
% caption: A quadratic curve on three control points and a cubic on four. Each
% curve stays inside the convex hull of its control polygon and touches only the
% end control points.
\begin{tikzpicture}[>=stealth, font=\footnotesize, scale=1.0]
\definecolor{acc}{HTML}{2F6DB5}
\definecolor{red}{HTML}{B23A48}
% quadratic
\coordinate (Q0) at (0,0);
\coordinate (Q1) at (1.1,2.2);
\coordinate (Q2) at (2.4,0.3);
\draw[black, dashed] (Q0) -- (Q1) -- (Q2);
\draw[acc, very thick] (Q0) .. controls (Q1) and (Q1) .. (Q2);
\fill[acc] (Q0) circle (1.7pt) node[anchor=north east] {$\mathbf{p}_0$};
\fill[red] (Q1) circle (1.7pt) node[anchor=south] {$\mathbf{p}_1$};
\fill[acc] (Q2) circle (1.7pt) node[anchor=north west] {$\mathbf{p}_2$};
\node[acc, anchor=north] at (1.2,-0.15) {quadratic};
% cubic
\begin{scope}[shift={(4.4,0)}]
\coordinate (C0) at (0,0.2);
\coordinate (C1) at (0.4,2.3);
\coordinate (C2) at (2.4,2.4);
\coordinate (C3) at (2.9,0.4);
\draw[black, dashed] (C0) -- (C1) -- (C2) -- (C3);
\draw[acc, very thick] (C0) .. controls (C1) and (C2) .. (C3);
\fill[acc] (C0) circle (1.7pt) node[anchor=north east] {$\mathbf{p}_0$};
\fill[red] (C1) circle (1.7pt) node[anchor=south] {$\mathbf{p}_1$};
\fill[red] (C2) circle (1.7pt) node[anchor=south] {$\mathbf{p}_2$};
\fill[acc] (C3) circle (1.7pt) node[anchor=north west] {$\mathbf{p}_3$};
\node[acc, anchor=north] at (1.4,-0.05) {cubic};
\end{scope}
\end{tikzpicture}
$$

The convex-hull property is inherited by any affine image of the curve. If $A$ is
a matrix, then $A\mathbf{x}(t)$ is the Bézier curve on the transformed control
points $A\mathbf{p}_0, \dots, A\mathbf{p}_3$, because matrix multiplication
distributes over the combination. Rotating, scaling, or shearing a curve amounts
to transforming four points and redrawing.

### Tangents at the endpoints

The control polygon governs the direction of the curve at its ends. For a
parametric curve, the tangent direction at $\mathbf{w}(t)$ is the derivative
$\mathbf{w}'(t)$, taken coordinate by coordinate.

> **Worked example.** Relate the tangent vectors of the quadratic curve
> $\mathbf{w}(t)$ to its control points at $t = 0$ and $t = 1$.
>
> Write the weights as polynomials and differentiate:
> $$
> \mathbf{w}(t) = (1 - 2t + t^2)\mathbf{p}_0 + (2t - 2t^2)\mathbf{p}_1 +
> t^2\mathbf{p}_2,
> $$
> $$
> \mathbf{w}'(t) = (-2 + 2t)\mathbf{p}_0 + (2 - 4t)\mathbf{p}_1 + 2t\mathbf{p}_2.
> $$
> Evaluate at the endpoints:
> $$
> \mathbf{w}'(0) = 2(\mathbf{p}_1 - \mathbf{p}_0), \qquad
> \mathbf{w}'(1) = 2(\mathbf{p}_2 - \mathbf{p}_1).
> $$
> The tangent at $\mathbf{p}_0$ points along the first edge of the control
> polygon, from $\mathbf{p}_0$ toward $\mathbf{p}_1$, at twice its length. At
> $\mathbf{p}_2$ the tangent points along the last edge. If $\mathbf{p}_1 =
> \mathbf{p}_0$, then $\mathbf{w}'(0) = \mathbf{0}$ and the curve degenerates to
> the segment from $\mathbf{p}_1$ to $\mathbf{p}_2$.

$$
% caption: The endpoint tangents run along the first and last edges of the control
% polygon, each twice the length of its edge.
\begin{tikzpicture}[>=stealth, font=\footnotesize, scale=1.0]
\definecolor{acc}{HTML}{2F6DB5}
\definecolor{red}{HTML}{B23A48}
\coordinate (P0) at (0,0);
\coordinate (P1) at (1.3,2.3);
\coordinate (P2) at (3.6,0.5);
\draw[black, dashed] (P0) -- (P1) -- (P2);
\draw[acc, very thick] (P0) .. controls (P1) and (P1) .. (P2);
\draw[->, red, very thick] (P0) -- ($(P0)!0.7!(P1)$);
\draw[->, red, very thick] (P2) -- ($(P2)!0.7!(P1)$);
\fill[acc] (P0) circle (1.7pt) node[anchor=north east] {$\mathbf{p}_0$};
\fill[black] (P1) circle (1.7pt) node[anchor=south] {$\mathbf{p}_1$};
\fill[acc] (P2) circle (1.7pt) node[anchor=north west] {$\mathbf{p}_2$};
\node[red, anchor=east, font=\scriptsize] at (0.55,0.95) {tangent};
\end{tikzpicture}
$$

## The de Casteljau algorithm

A Bézier curve can be evaluated without expanding any polynomials, using only
repeated linear interpolation between control points. At parameter $t$, replace
each consecutive pair of points by the point a fraction $t$ of the way between
them; repeat on the shorter list until one point remains, which is
$\mathbf{x}(t)$.

```algorithm
de Casteljau evaluation of a Bézier curve at parameter t
input: control points p[0..n], parameter t in [0,1]
for i = 0 to n do
    b[i] ← p[i]
for r = 1 to n do
    for i = 0 to n - r do
        b[i] ← (1 - t) · b[i] + t · b[i+1]
return b[0]
```

At $t = \tfrac{1}{2}$ every interpolation is a midpoint, which makes the
construction easy to follow. For a cubic with control points $\mathbf{p}_0,
\mathbf{p}_1, \mathbf{p}_2, \mathbf{p}_3$, the first round of midpoints is
$\mathbf{q}_i = \tfrac{1}{2}(\mathbf{p}_i + \mathbf{p}_{i+1})$; the second is
$\mathbf{r}_i = \tfrac{1}{2}(\mathbf{q}_i + \mathbf{q}_{i+1})$; the third is the
curve point $\mathbf{x}(\tfrac{1}{2}) = \tfrac{1}{2}(\mathbf{r}_0 +
\mathbf{r}_1)$.

$$
% caption: The de Casteljau construction at $t=\tfrac12$. Midpoints of the control
% edges give $\mathbf{q}_i$, midpoints of those give $\mathbf{r}_i$, and their
% midpoint is the curve point.
\begin{tikzpicture}[>=stealth, font=\footnotesize, scale=1.05]
\definecolor{acc}{HTML}{2F6DB5}
\definecolor{red}{HTML}{B23A48}
\definecolor{grn}{HTML}{3C7A55}
\coordinate (P0) at (0,0);
\coordinate (P1) at (0.7,2.6);
\coordinate (P2) at (3.4,2.6);
\coordinate (P3) at (4.2,0.2);
% control polygon
\draw[black, dashed] (P0) -- (P1) -- (P2) -- (P3);
% first midpoints
\coordinate (Q0) at ($(P0)!0.5!(P1)$);
\coordinate (Q1) at ($(P1)!0.5!(P2)$);
\coordinate (Q2) at ($(P2)!0.5!(P3)$);
\draw[red!70] (Q0) -- (Q1) -- (Q2);
% second midpoints
\coordinate (R0) at ($(Q0)!0.5!(Q1)$);
\coordinate (R1) at ($(Q1)!0.5!(Q2)$);
\draw[grn!80] (R0) -- (R1);
% curve point
\coordinate (X) at ($(R0)!0.5!(R1)$);
\draw[acc, very thick] (P0) .. controls (P1) and (P2) .. (P3);
% control points
\fill[acc] (P0) circle (1.6pt) node[anchor=north east] {$\mathbf{p}_0$};
\fill[acc] (P1) circle (1.6pt) node[anchor=south east] {$\mathbf{p}_1$};
\fill[acc] (P2) circle (1.6pt) node[anchor=south west] {$\mathbf{p}_2$};
\fill[acc] (P3) circle (1.6pt) node[anchor=north west] {$\mathbf{p}_3$};
\fill[red] (Q0) circle (1.5pt) node[anchor=east, font=\scriptsize] {$\mathbf{q}_0$};
\fill[red] (Q1) circle (1.5pt) node[anchor=south, font=\scriptsize] {$\mathbf{q}_1$};
\fill[red] (Q2) circle (1.5pt) node[anchor=west, font=\scriptsize] {$\mathbf{q}_2$};
\fill[grn] (R0) circle (1.5pt) node[anchor=east, font=\scriptsize] {$\mathbf{r}_0$};
\fill[grn] (R1) circle (1.5pt) node[anchor=west, font=\scriptsize] {$\mathbf{r}_1$};
\fill[black] (X) circle (1.8pt) node[anchor=north, font=\scriptsize] {$\mathbf{x}(\tfrac{1}{2})$};
\end{tikzpicture}
$$

The construction also splits the curve. The points $\mathbf{p}_0, \mathbf{q}_0,
\mathbf{r}_0, \mathbf{x}(\tfrac{1}{2})$ are the control points of the piece from
$t=0$ to $t=\tfrac{1}{2}$, and $\mathbf{x}(\tfrac{1}{2}), \mathbf{r}_1,
\mathbf{q}_2, \mathbf{p}_3$ control the piece beyond. Repeated subdivision
produces control polygons that converge to the curve, the basis for drawing a
Bézier curve as a short chain of line segments.

## Joining curves

Complex outlines are built from many short Bézier segments joined end to end. The
smoothness of a join is graded by how much the two segments agree at the shared
point.

- **$G^0$ (geometric) continuity**: the segments meet, with the terminal point of
  the first equal to the initial point of the second. Without more, a corner may
  appear.
- **$G^1$ continuity**: the tangent vectors at the join point in the same
  direction, though their lengths may differ. No corner, but the parameterization
  may jump in speed.
- **$C^1$ (parametric) continuity**: the tangent vectors at the join are equal,
  not merely parallel. The strongest of the three, and the usual target.

$$
% caption: A $G^0$ join can show a corner where the tangents disagree; a $C^1$
% join matches tangents so the segments meet smoothly.
\begin{tikzpicture}[>=stealth, font=\footnotesize, scale=1.0]
\definecolor{acc}{HTML}{2F6DB5}
\definecolor{red}{HTML}{B23A48}
% G0 corner
\draw[acc, very thick] (0,0) .. controls (0.3,1.6) and (1.0,1.8) .. (1.6,1.8);
\draw[acc, very thick] (1.6,1.8) .. controls (2.0,1.8) and (2.1,0.6) .. (2.4,0.2);
\fill[red] (1.6,1.8) circle (1.7pt);
\node[red, anchor=south, font=\scriptsize] at (1.6,1.9) {corner};
\node[black, anchor=north] at (1.2,-0.1) {$G^0$};
% C1 smooth
\begin{scope}[shift={(4.2,0)}]
\draw[acc, very thick] (0,0) .. controls (0.5,1.7) and (1.3,2.0) .. (2.0,2.0);
\draw[acc, very thick] (2.0,2.0) .. controls (2.7,2.0) and (3.5,1.5) .. (3.9,0.3);
\fill[acc] (2.0,2.0) circle (1.7pt);
\node[acc, anchor=south, font=\scriptsize] at (2.0,2.1) {smooth};
\node[black, anchor=north] at (1.9,-0.1) {$C^1$};
\end{scope}
\end{tikzpicture}
$$

The continuity conditions translate into constraints on the control points.

> **Worked example.** Two quadratic curves $\mathbf{x}(t)$ and $\mathbf{y}(t)$
> have control points $\{\mathbf{p}_0, \mathbf{p}_1, \mathbf{p}_2\}$ and
> $\{\mathbf{p}_2, \mathbf{p}_3, \mathbf{p}_4\}$, joined at $\mathbf{p}_2 =
> \mathbf{x}(1) = \mathbf{y}(0)$. What do $G^1$ and $C^1$ continuity require?
>
> From the tangent formulas, $\mathbf{x}'(1) = 2(\mathbf{p}_2 - \mathbf{p}_1)$ and
> $\mathbf{y}'(0) = 2(\mathbf{p}_3 - \mathbf{p}_2)$.
>
> - **$G^1$**: $\mathbf{y}'(0) = k\,\mathbf{x}'(1)$ for some $k > 0$, so
>   $\mathbf{p}_3 - \mathbf{p}_2 = k(\mathbf{p}_2 - \mathbf{p}_1)$. Setting $t =
>   (k+1)^{-1}$ rearranges this to $\mathbf{p}_2 = (1-t)\mathbf{p}_1 +
>   t\mathbf{p}_3$: the point $\mathbf{p}_2$ lies on the segment from
>   $\mathbf{p}_1$ to $\mathbf{p}_3$.
> - **$C^1$**: $\mathbf{y}'(0) = \mathbf{x}'(1)$, so $\mathbf{p}_3 - \mathbf{p}_2 =
>   \mathbf{p}_2 - \mathbf{p}_1$, giving
>   $$
>   \mathbf{p}_2 = \tfrac{1}{2}(\mathbf{p}_1 + \mathbf{p}_3).
>   $$
>   The join is the midpoint of $\mathbf{p}_1$ and $\mathbf{p}_3$.

$$
% caption: For $C^1$ continuity the shared control point is the midpoint of its
% two neighbors, so the three points $\mathbf{p}_1$, $\mathbf{p}_2$, $\mathbf{p}_3$
% are collinear and evenly spaced.
\begin{tikzpicture}[>=stealth, font=\footnotesize, scale=1.0]
\definecolor{acc}{HTML}{2F6DB5}
\definecolor{red}{HTML}{B23A48}
\coordinate (P0) at (0,0.3);
\coordinate (P1) at (1.4,2.2);
\coordinate (P2) at (2.6,1.5);
\coordinate (P3) at (3.8,0.8);
\coordinate (P4) at (5.2,2.0);
\draw[acc, very thick] (P0) .. controls (P1) and (P2) .. (P2);
\draw[acc, very thick] (P2) .. controls (P2) and (P3) .. (P4);
\draw[red!70, dashed] (P1) -- (P3);
\fill[acc] (P0) circle (1.6pt) node[anchor=north] {$\mathbf{p}_0$};
\fill[black] (P1) circle (1.6pt) node[anchor=south] {$\mathbf{p}_1$};
\fill[red] (P2) circle (1.8pt) node[anchor=south, font=\scriptsize] {$\mathbf{p}_2$ midpoint};
\fill[black] (P3) circle (1.6pt) node[anchor=north] {$\mathbf{p}_3$};
\fill[acc] (P4) circle (1.6pt) node[anchor=west] {$\mathbf{p}_4$};
\end{tikzpicture}
$$

Matching second derivatives as well gives $C^2$ continuity, which is possible for
cubics but tightly constrains the control points. B-splines relax this by sharing
three control points between adjacent segments, gaining $C^2$ smoothness at the
cost of no longer passing through any control point.

## Matrix form

A Bézier curve is a linear combination of control points with polynomial weights,
so it factors into a matrix product. For the cubic, collect the control points
into a **geometry matrix** $G = [\,\mathbf{p}_0\; \mathbf{p}_1\; \mathbf{p}_2\;
\mathbf{p}_3\,]$ and the powers of $t$ into $\mathbf{u}(t) = (1, t, t^2, t^3)$:

$$
\mathbf{x}(t) = G\,M_B\,\mathbf{u}(t), \qquad
M_B = \begin{bmatrix} 1 & -3 & 3 & -1 \\ 0 & 3 & -6 & 3 \\ 0 & 0 & 3 & -3 \\ 0 & 0
& 0 & 1 \end{bmatrix}.
$$

The **Bézier basis matrix** $M_B$ holds the coefficients of the blending
polynomials $(1-t)^3$, $3t(1-t)^2$, $3t^2(1-t)$, $t^3$, expanded in powers of $t$.
Multiplying $M_B\mathbf{u}(t)$ recovers the four weights; multiplying by $G$
applies them to the control points. Other cubic families reuse the same factored
form with a different basis matrix: a Hermite curve replaces $M_B$ by a Hermite
basis matrix and stores tangent vectors instead of interior control points, and a
B-spline uses the B-spline basis matrix.

## Bézier surfaces

A surface patch is the two-parameter analogue. Take a $4 \times 4$ grid of control
points $\mathbf{p}_{ij}$ and let each of the four rows control a Bézier curve in
the parameter $t$; the four resulting curves are then blended by a second Bézier
combination in a parameter $s$. The patch is

$$
\mathbf{x}(s,t) = \sum_{i=1}^{4}\sum_{j=1}^{4} b_i(s)\,b_j(t)\,\mathbf{p}_{ij},
$$

with $b_1, \dots, b_4$ the four cubic blending polynomials. The sixteen control
points form a web that the surface bends toward, and the surface stays inside
their convex hull.

$$
% caption: A bicubic Bézier patch is controlled by a $4\times4$ web of sixteen
% points; the surface passes through the four corners and is drawn toward the
% interior twelve.
\begin{tikzpicture}[>=stealth, font=\footnotesize, scale=1.0]
\definecolor{acc}{HTML}{2F6DB5}
\definecolor{red}{HTML}{B23A48}
% a 4x4 warped grid of control points
\foreach \i in {0,1,2,3} {
  \foreach \j in {0,1,2,3} {
    \pgfmathsetmacro{\x}{\i*1.35 + \j*0.5}
    \pgfmathsetmacro{\y}{\j*1.15 + 0.28*sin(\i*70) + 0.22*\i}
    \coordinate (N\i\j) at (\x,\y);
  }
}
% grid lines
\foreach \i in {0,1,2,3} {
  \draw[black] (N\i0) -- (N\i1) -- (N\i2) -- (N\i3);
}
\foreach \j in {0,1,2,3} {
  \draw[black] (N0\j) -- (N1\j) -- (N2\j) -- (N3\j);
}
% interior points
\foreach \i in {0,1,2,3} {
  \foreach \j in {0,1,2,3} {
    \fill[acc] (N\i\j) circle (1.5pt);
  }
}
% highlight corners
\fill[red] (N00) circle (2.1pt);
\fill[red] (N03) circle (2.1pt);
\fill[red] (N30) circle (2.1pt);
\fill[red] (N33) circle (2.1pt);
\node[red, anchor=north, font=\scriptsize] at (N00) {corner};
\node[acc, anchor=west, font=\scriptsize] at (N33) {16 control points};
\end{tikzpicture}
$$

The essential structure remains the affine combination. A Bézier object is a
weighted average of control points with weights that are nonnegative and sum to
one, which places every curve and surface in the convex hull of its control net
and returns the geometry of this module to the algebra of
[affine combinations](/linear-algebra/geometry-of-vector-spaces/affine-combinations).

[^lay-bez]: **Lay**, _Linear Algebra and Its Applications_, §8.6 — Curves and
Surfaces: quadratic and cubic Bézier curves and the convex-hull property, tangent
vectors (Example 1), $G^0$/$G^1$/$C^1$ continuity and the joining conditions
(Example 2), the matrix form $\mathbf{x}(t) = G M_B \mathbf{u}(t)$, and the
bicubic surface patch. The de Casteljau algorithm is the repeated-interpolation
form of the recursive subdivision discussed there.