Piecewise Cubic Bézier Curves

Written by Paul Bourke
March 2000

Given four points p0, p1, p2, and p3 in 3D space the cubic Bézier curve is defined as

p(t) = a t3 + b t2 + c t + p0

where t ranges from 0 (the start of the curve, p0) to 1 (the end of the curve, p3). The vectors a, b, c are given as follows:

    c = 3 (p1 - p0)

    b = 3 (p2 - p1) - c

    a = p3 - p0 - c - b

In the following examples the green markers correspond to p0 and p3 of each section. The blue markers correspond to p1 and p2. The grey curve is the Bézier curve sampled 20 times, the samples are shown in red. The coordinates for each vertex is shown on the right.

Example 1
This is a single minimum piece of a piecewise Bézier curve. It is defined by 4 points, the curve passes through the two end points. The tangent at the end points is along the line to the middle two points.

0 0 1
0.5 0 1
1 0 0.5
1 0 0

Example 2
Multiple curve pieces can be joined together to form longer continuous curves. The curve is made continuous by the setting the tangents the same at the join. Note that each piece of the curve is defined by t ranging from 0 to 1.

0 0 1
0.5 0 1
1 0 0.5
1 0 0

1 0 0
1 0 -0.5
2 0 0
2 0 0.5

Example 3
By changing the tangent points between two curve pieces, sharp transitions can be created.

0 0 1
0.5 0 1
1 0 0.5
1 0 0

1 0 0
1.5 0 0
2 0 0
2 0 0.5

Example 4
The "strength" at the end points is controlled by the length of the tangent lines. The longer the line the more effect that tangent has. If the curve is being used for animation steps then the strength also controls the velocity, note the samples shown in red are further apart for the long tangent vectors.

0 0 1
1.75 0 1
1 0 0.5
1 0 0

1 0 0
1 0 -0.5
2 0 -0.5
2 0 1

Example 5
Straight line geometry can readily be made by aligning the tangent vectors along the line. While this may seem a frivolous use, it can be put to good effect in animations applications. By adjusting the tangent points p1 and p2 the velocity along the line can be controlled.


0 0 1
0.25 0 1
0.75 0 1
1 0 1

1 0 1
1 0 0.75
1 0 0.25
1 0 0

Notes

  • Piecewise cubic Bézier curves like their most general Bézier counterparts cannot exactly represent a circle.

  • Except in the trivial case of a straight line, it isn't possible to create a Bézier curve that is parallel to another.

  • There is no closed solution to finding the closest point on a Bézier curve to another point. The usual method is some kind of subdivision of t until some error tolerance is met.

Source code

/*
   Piecewise cubic bezier curve as defined by Adobe in Postscript
   The two end points are p0 and p3
   Their associated control points are p1 and p2
*/
XYZ CubicBezier(XYZ p0,XYZ p1,XYZ p2,XYZ p3,double mu)
{
   XYZ a,b,c,p;

   c.x = 3 * (p1.x - p0.x);
   c.y = 3 * (p1.y - p0.y);
   c.z = 3 * (p1.z - p0.z);
   b.x = 3 * (p2.x - p1.x) - c.x;
   b.y = 3 * (p2.y - p1.y) - c.y;
   b.z = 3 * (p2.z - p1.z) - c.z;
   a.x = p3.x - p0.x - c.x - b.x;
   a.y = p3.y - p0.y - c.y - b.y;
   a.z = p3.z - p0.z - c.z - b.z;

   p.x = a.x * mu * mu * mu + b.x * mu * mu + c.x * mu + p0.x;
   p.y = a.y * mu * mu * mu + b.y * mu * mu + c.y * mu + p0.y;
   p.z = a.z * mu * mu * mu + b.z * mu * mu + c.z * mu + p0.z;

   return(p);
}

FAQ

A common application for these curves in computer graphics is the creation of a smooth flight path that passes through keyframe points in space. The basic issue is how to derive the tangent vectors for each piece of the curve. There are two ways one might achieve this that are illustrated in the drawings below. The first approach is easiest but often lends to unnecessary "swerving", the second method is "smoother". In what follows the keyframes and points p0 to p5, in order to use the Piecewise Cubic Bézier for each section (between points pi and pi+1) one needs to find the tangent vectors shown in red. Note that for continuity between the points the tangent vector at the end of one piece is the negative of the tangent at the start of the next piece.

In this first case the tangent vectors are just the differences between subsequent keyframe points. So for example, for the segment between p1 and p2 the four points use for the Bézier would be p1, p2, 2p2-p3, p2. Depending on the length scaling for the tangent vectors, the resulting Bézier curve between points p1 and p3 is shown in blue.

A generally better method is shown below, again one needs to find the red tangent vectors. The exact implementation will be left up to the reader but the approach I've used is to find the cross product between the vectors to each neighbour, that is a vector coming out of the page (or into the page) in the diagram below. The tangent vectors (red) are found by taking the cross product of that with the green normal vectors. The main reason for using this approach is that it overcomes a mirror symmetry problem that occurs if one simple tries to rotate the green normal vectors +- 90 degrees. Note that the case of 3 colinear points needs to be treated as a special case.

An improvement by Lars Jensen is illustrated below. It uses a normal that bisects the two vectors to the neighboring points along with way of limiting the tangent lengths.

The only remaining comment is how one deals with the first and last point, normally there are some ad hoc approaches that are application specific.