The Cubic Bezier


The Cubic Bezier curve may be drawn, given two endpoints, and two "control points". It is a smooth curve that begins at one endpoint, ends at the other, and is "pulled away" from the straight line path towards the control points. It is often used in Graphic Design applications, because of its ability to provide a smooth bending curve between two fixed points. The curves are aesthetically pleasing, for some reason.

More technically, let the endpoints be (x0,y0) and (x3,y3), and the control points be (x1,y1) and (x2,y2). The curve is given by a parametric equation (x(t),y(t)), t � [0,3] where x(t) and y(t) are cubic polynomials such that x(0) = x0, x(3) = x3, x�(0) = x1-x0, and x�(3) = x3-x2, and similar conditions hold for y(t).

The net effect of this is that if one draws a line from P0 = (x0,y0) to P1 = (x1,y1), and another from P3 = (x3,y3) to P2 = (x2,y2), the Bezier curve will leave P0 in a direction tangent to the first line, and arrive at P3 in a direction tangent to the second line.

The DotPlacer Applet (on this site) allows you to place a the endpoints and control points on the screen, and have it draw the cubic bezier curve. You can also have the applet draw the lines that the curve is tangent to, and even move the points around, and watch the curve change. Try it!

The formula for x(t) (if t is taken to range from a to b instead of from 0 to 3) is

x(t) = x0 (b-t)3
(b-a)3
 +x1 3(b-t)2(t-a)
(b-a)3
 +x2 3(b-t)(t-a)2
(b-a)3
 +x3 (t-a)3
(b-a)3
 .

One way to help remember this is to notice that if x0 = x1 = x2 = x3 = 1, then x(t) reduces to 1, since 1 = (b-a)3/(b-a)3 = [(b-t)+(t-a)]3 / (b-a)3, which becomes

1 (b-t)3
(b-a)3
 +1 3(b-t)2(t-a)
(b-a)3
 +1 3(b-t)(t-a)2
(b-a)3
 +1 (t-a)3
(b-a)3
 .

For more information on cubic bezier curves, see this World of Mathematics article, where the construction of an nth degree polynomial Bezier curve with n-1 control points is described.

File translated from TEX by TTH, version 2.25.