Bézier curves are very common in computer graphics. They also interesting mathematical properties. This post will give a quick introduction to Bézier curves, describing them first in visual terms and then in mathematical terms.

There are different degrees of Bézier curves: linear, quadratic, cubic, etc. Linear Bézier curves are just straight lines. The most common kind of Bézier curve in drawing programs is the cubic and that’s the one I’ll describe below.

A cubic Bézier curve is determined by four points: two points determine where the curve begins and ends, and two more points determine the shape. Say the points are labeled P_{0}, P_{1}, P_{2}, and P_{3}. The curve begins at P_{0} and initially goes in the direction of P_{1}. It ends at P_{3} going in the direction of a line connecting P_{2} and P_{3}. If you move P_{1} further away from P_{0}, the curve flattens, going further in the direction of P_{1} before turning. Similar remarks hold for moving P_{2} away from P_{3}.

Now for equations. The cubic Bézier curve is given by

B(t) = (1-t)^{3} P_{0} + 3(1-t)^{2}t P_{1} + 3(1-t)t^{2} P_{2} + t^{3} P_{3}

for t running between 0 and 1. It’s clear from the equation that B(0) = P_{0} and B(1) = P_{3}. A little calculation shows that the derivatives satisfy

B'(0) = 3(P_{0} – P_{1})

and

B'(1) = 3(P_{3} – P_{2}).

Moving the points P_{1} and P_{2} further out increases the derivatives and thus makes the curve go further in the direction of these points before bending.

**Related post**:

Cool post, thanks for shedding some light on how these work.

Minor note: I think there’s a typo in the third paragraph: the second sentence begins with “The Say”, which doesn’t really make any sense. I’m guessing it was meant to start “The points are labeled…”

Thanks. I fixed the typo.

I think you might have switched the sign of the derivatives. Unless I’m mistaken, it should be B'(0)= 3(P1-P0) and B'(1) = 3(P3-P2).

Can you double check that?

Thanks. You were right. I’ve corrected the post.

You might also be interested in my Animated Bézier Curves demo.