Home > JavaSketchpad > Gallery > Bezier Curves

Bézier Curves

A Bézier curve is a type of spline: a curve defined by control points. These curves are used often in computer graphics, computer-assisted design, and typography. Pierre Bézier worked as a designer for Renault in the mid-20th century, and invented these curves to help model automobile bodies. Bézier curves can be defined algebraically by parametric polynomial equations. Here, though, we explore their geometric construction.

A linear, or first-order, Bézier curve, is the simplest, and is what all higher-order curves are built from. Begin with a parameter, t, which varies from 0 to 1. We represent t as a point on a line segment. However far t is along the segment, construct a point at that same distance ratio from P0 to P1. That point will trace out the Bézier curve from P0 to P1, in this case a line segment. Drag t in the applet below to construct the first-order Bézier curve from P0 to P1.

Sorry, this page requires a Java-compatible web browser.

Linear Bézier curve from P0 to P1


To construct a quadratic, or second-order, Bézier curve, begin with the same parameter, t, represented as a point on a line segment. Use the distance ratio defined by t to simultaneously construct a point at that same distance ratio from P0 to P1, and one from P1 to P2. Call these points Q0 and Q1. Now construct a point at the same distance ratio (defined by t) from Q0 to Q1. This is the orange point in the applet below. That point will trace out the second-order Bézier curve defined by P0, P1, and P2.

Drag t in the applet below to construct the second-order Bézier curve.

Sorry, this page requires a Java-compatible web browser.

Quadratic Bézier curve from P0 to P2


Higher order Bézier curves are similarly defined by constructing several internal first-order Bézier points that are all controlled by the same parameter t. Eventually, you end up with a single point that will trace out the curve. Below are third- and fourth-order Bézier curves.

Sorry, this page requires a Java-compatible web browser.

Cubic Bézier curve from P0 to P3


Sorry, this page requires a Java-compatible web browser.

Quartic Bézier curve from P0 to P4


Note that in each case the curve starts to P0, and its tangent at P0 is determined by the vector from P0 to P1. Likewise, the end of the curve is tangent to the vector determined by the last two given points. This is a notably desirable property that Bézier curves have over many other types of splines, since it enables the pasting together of multiple curves with varying degrees of continuity, as seen then the applet below. Note finally that the entire curve falls within the polygon defined by the three given points, so the curve can always be found within a predictably bounded region. This is, again, not a property that all splines have.

The more points you have controlling a particular Bézier curve, the less any one point influences the shape of the curve. This is desirable in certain cases, but not so in others. In the applet below, there are several different-order Bézier curves defined by six points. The lower-order curves are actually made up of multiple curves patched together at segment midpoints. You can see how much more you need to move the control points to change the shape of the fifth-order curve.

Sorry, this page requires a Java-compatible web browser.

First-, second-, third-, and fifth-order Bézier Curves from P0 to P5.
Can you make a circle with one or more of the curves?


—Kendra Lockman, March 2008

Return to Gallery