skip to Main Content

Animation & Digital Puppets

Bézier curve

Bézier handle

Bézier [BEH-zee-ay] curves are mathematically generated curves using parametric equations, which are equations that map out the point coordinates of a geometric object1Bézier curves are used in creating computer generated vector images2, fonts, controlling time in animation (e.g. After Effects’ speed graph), as well as applications outside of art and animation.

The curves in vector graphics are created by moving control points called Bézier handles, or tangents. Each vector point can have one or two handles, that are themselves line segments projected out from each vector point. By stretching and changing the angle of the handle or handles a curve is created.

line segment

A line segment3 is drawn between two end points. In vector graphics, images are constructed from a series of points connected by line segments. In geometry lines and line segments are made up of an infinite amount of points. Outside of the context of math, line segments and lines are usually both referred to as lines.

Curves can be formed by using a tool in many graphics and animation programs which activates a vector point’s Bézier handles. These handles are usually visible only when working directly with the tool and selected line segment.

Bezier curve diagram

Anatomy of a Bézier curve.

How do Bézier handles work?

A Bézier handle only affects the curve on one side of joined line segments. To see how this works, I’ll start with a single line segment.

Single Bezier handle

 A single line segment only needs a single Bézier handle at one end point to create a curve.

Two single handles

A second Bézier handle on the opposite end point gives more control over the shape of the curve.

Line segment with double handles

Oppostie Bézier handles were added to create double handles at each end point. Note that the upper part of handle B has been moved independently of its partner (it’s partner, as you know, is controlling the curve of the line segment), yet the line segment has not changed from the example above it. This is because these added handles will only have an effect if a second line segment is attached to the end point as demonstrated in the example below.

Point added to line segment

Adding a point to the line segments creates two line segments joined at the new center point. The program, in this case Adobe Illustrator, automatically created double inline Bezier handles and placed them in such a way as to keep the original shape of the curve.

Move the handles as a pair

The default movement in Adobe Illustrator is to move double Bézier handles inline, not all programs behave the same. While handles A and B are in line, you’ll notice that handle A is shorter than B casing the left line segment to curve a bit differently than the right line segment.

Handles in center point not alined

In Illustrator, you can hold the option key down while moving one handle and its opposite will stay stationary giving you many possible variations in the curves you create. In this example handle B was moved while handle A was kept in its original position.

Other applications of the Bézier curve in animation

Two of the most common uses of Bézier curves beyond art work are motion paths and controlling speed.

Screenshot AE motion path

Screenshot of a motion path in After Effects. The two end points represent the starting and ending keyframes.  The Bézier handles allowed me to create a smooth curve for the red ball to follow. You can add more vector points to a motion path by using the pen tool, then use those new points to create changes in the path’s direction.

Note: Clicking on the image to enlarge it makes it easier to see the small dots on the motion path. These dots represent the frames between the keyframes.

After Effects screenshot of Bézier curve in graph editor.

This is the speed graph in After Effect’s Graph Editor of the red ball’s motion path. The Bézier handles allowed me to create a custom ease-in motion (speeding up) of the falling ball. This can be seen in the increasing space between the frame points in the motion path in the image of the red ball.

For you math fans: The Bézier curve is named after Pierre Bézier who was the first person to apply the Bernstein polynomials to graphics. Bézier used this method of drawing in the 1960s to design Renault cars.

1Going into the specifics of the mathematics is beyond the scope of this entry (and my mathematical prowess) as that would be akin to learning how automobile engines work so that you can drive a car. Useful information, but unnecessary to get from point A to point B. If you’re interested in the mathematics here’s a good place to start.

2See the entries on vector image and raster image for a comparison of these two formats.

3For clarity I’m trying to use the strict meaning of line and line segment in this glossary entry. As you remember from elementary geometry, while both are defined by two points, lines are infinite while line segments end at their two defining points.

Back To Top