# Riding the BÃ©zier wave

When working on 2D/3D graphic applications, animating various objects and moving them across the screen is very often a requirement. As a programmer or designer, sometimes you would like to have the freedom to move objects not only along straight, but also along curved lines. Solution to this problem – the BÃ©zier curve – has been known for decades. Still, people unfamiliar with curves may find them a bit confusing at first. This article is not intended to be a comprehensive analysis of BÃ©zier curves; rather, it should give a beginner just enough knowledge to get her/him started.

For now, we’ll focus on cubic BÃ©ziers – they provide enough control over the curve and are simple to calculate at the same time. Every cubic curve is defined by four control points: *P _{0}(x_{0}, y_{0})*,

*P(x*,

_{1}, y_{1})*P*and

_{2}(x_{2}, y_{2})*P*.

_{3}(x_{3}, y_{3})*P*is the start point,

_{0}*P*is the end point. The curve passes through

_{3}*P*and

_{0}*P*, but not through

_{3}*P*and

_{1}*P*. All points on the curve are defined with:

_{2}`C(p) = âˆ‘ P`_{i} B_{i,n}(p) iâˆˆ[0,n]

Note that this expands to two equations – one for *x*, and one for *y* coordinate. Since the curve is cubic, *n* = 3:

`C`_{x}(p) = âˆ‘ P_{xi} B_{i,3}(p)
C_{y}(p) = âˆ‘ P_{yi} B_{i,3}(p)

In each equation, *B _{i,3}* is one Bernstein polynomial. Bernstein polynomials have all kinds of nice properties – but we’re currently not interested in them, so we’ll just write down all four polynomials of third degree:

`b`_{0,3}(p) = (1 - p)^{3}
b_{1,3}(p) = 3p (1 - p)^{2}
b_{2,3}(p) = 3p^{2} (1 - p)
b_{3,3}(p) = p^{3}

So, what exactly is going on? Parameter *p* gradually changes from 0 to 1. For each value of *p*, we evaluate the polynomials, then multiply each polynomial with the coordinate of its corresponding control point. Finally, we add all these values to obtain the *x* coordinate of curve point at *p*:

`C`_{x}(p) = âˆ‘ P_{xi} B_{i,n}(p)
= x_{0} b_{0,3}(p) + x_{1} b_{1,3}(p) + x_{2} b_{2,3}(p) + x_{3} b_{3,3}(p)

Calculating the *y* coordinate is the same, except that *y* coordinates of control points are used instead of *x*. To speed things up, previous equation can be expanded, and the terms rearranged:

`C`_{x}(p) = a_{x }p^{3} + b_{x} p^{2} + c_{x} p + d_{x} (*)

where:

`a`_{x} = x_{3} - 3x_{2} + 3x_{1} - x_{0}
b_{x} = 3x_{2} - 6x_{1} + 3x_{0}
c_{x} = 3x_{1} - 3x_{0}
d_{x} = x_{0}

Now, as soon as you are given four control points, you can calculate *a _{x}*,

*b*,

_{x}*c*and

_{x}*d*. After that, all you have to do is vary the value of

_{x}*p*from 0 to 1, and use it to evaluate (*). Then, repeat the procedure for

*y*coordinates. Smaller changes of

*p*will result in more calculations, but the curve will appear smoother. And that’s all there is to it.