Bézier Curves

 

Bézier curves are named after Pierre Bézier who developed them while working as an engineer at the Renault car company. Bézier curves are cubic polynomials of the form

 
 

x(t) = axt3 + bxt2 + cxt + dx

 

y(t) = ayt3 + byt2 + cyt + dy

 

where 0 <= t <= 1

 

The Bézier curve is defined by 4 points, the two end points and two intermediate points that define the endpoint tangent vectors.

 

A Bézier curve defined by 4 points

 
 

With this information the coefficients of the equation can be calculated as follows

 
 

cx = 3(x1 - x0)

 

bx = 3(x2 - x1) - cx

 

ax = x3 - x0 - cx - bx

 

cy = 3(y1 - y0)

 

by = 3(y2 - y1) - cy

 

ay = y3 - y0 - cy - by

 

To animate an object along the curve, display it at the starting point of the curve. Then decide on the number of steps we want to use to move it to the end point and how long the animation should take. Divide the time taken by the number of steps and move the object to a new position on the path in increments of this time. The new positions are calculated using values of t incremented by 1/n for each step, where n is the number of steps.

 

To see this theory in action have a look at our Bezier tool designed for experimenting with the effect on the curve of changing the control points. This tool appears to draw the curve as well as animating the circle. In fact it is approximating the curve by joining up each calculated point with a straight line.