Bézier curves

Bézier curves are widely used in computer graphics to generate animation paths, smooth interpolations between values, modeling of shapes and so on. Below, a general way to compute Bézier curves of arbitrary degree is shown in Casteljau’s algorithm, and after that, the explicit equations for solving Bézier curves of degree 1, 2 and 3 are given.

Casteljau’s algorithm

In the following chunk of code we can see how computeBezierPoints generates n points belonging to the curve defined by a list of points controlPoints.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
// It generates the point at time t in the bezier
// curve by recursively interpolating line segments
vec2 interpolate(
  float t, // Time
  size_t ini, // First control point to interp.
  size_t end, // Last control point to interp.
  const vector &controlPoints)
{
  if (ini == end -1) {
    // Base case
    const vec2 &p1( controlPoints[ini] );
    const vec2 &p2( controlPoints[end] );
    return p1 + (p2-p1)*t;
  } else {
    // interpolate the curve (without
    // the last control point)
    const vec2 p1 = interpolate(
                      t,
                      ini,
                      fin-1,
                      controlPoints);
    // interpolate the curve (without
    // the first control point)
    const vec2 p2 = interpolate(
                      t,
                      ini+1,
                      fin,
                      controlPoints);
    return p1 + (p2-p1)*t;
  }
}

// It generates n points in the bezier curve
vector computeBezierPoints(
  size_t n, // Number of points generated
  const vector &controlPoints)
{
  vector curvePoints;

  // Check: at least two control points
  if (n >= 2 && controlPoints.size() >= 2) {
    size_t ini = 0;
    size_t end = controlPoints.size() - 1;

    // Generate n points
    for (size_t i = 0; i < n; ++i) {
      float t = static_cast(i)/(n-1);
      vec2 point = interpolate(
                      t,
                      ini,
                      end,
                      controlPoints);
                      curvePoints.push_back(point);
    }
  }
  return curvePoints;
}
Linear v2 Linear v2
Linear v2 Linear v2
Bézier curves: 1. lineal; 2. quadratic; 3. cubic; 4. quartic.
Images taken from Wikipedia.org

For a better explanation of Casteljau’s algorithm see Bezier curve in Wikipedia.

Linear Bezier Curves (2 points)

The special case where there are only two control points is a straight line.

1
2
3
4
5
6
// It calculates a point in the bezier curve at the
// time t. c1 and c2 are the 2 control points
vec2 bezier1(float t, const vec2 &c1, const vec2 &c2)
{
  return (1-t)*c1 + t*c2;
}

Quadratic Bezier Curves (3 points)

The special case where there are three control points is a smooth curve whose points are calculated with the next function.

1
2
3
4
5
6
7
8
9
10
// It calculates a point in the bezier curve at the
// time t. c1, c2 and c3 are the control points
vec2 bezier2(
  float t,
  const vec2 &c1,
  const vec2 &c2,
  const vec2 &c3)
{
  return (1-t)^2*c1 + 2*(1-t)*t*c2 + t^2*c3;
}

Cubic Bezier Curves (4 points)

Finally, the function to compute points of a Bézier curve of degree 3.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// It calculates a point in the bezier curve at the
// time t. c1, c2, c3 and c4 are the control points
vec2 bezier3(
  float t,
  const vec2 &c1,
  const vec2 &c2,
  const vec2 &c3,
  const vec2 &c4)
{
return   (1-t)^3*c1 +
       3*(1-t)^2*t*c2 +
       3*(1-t)  *t^2*c3 +
                 t^3c4;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>