Bezier Curves

Bezier curves are very special curves. The math and the idea behind them blew me away and you should get ready to be blown away too.

Since you’re reading this I assume you are a designer or a developer and have dealt with Bezier curves before, especially Cubic Bezier curves, we’ll get to what Cubic Bezier curves are in a second. Now these curves are used in a variety of places, to create vector graphics, animation paths, animation easing curves e.t.c only because they are so easy to control. You don’t need to know a whole lot of Math, none at all to bend these curves to your whims. Think if Bezier curves didn’t exist and people had to come up with unique Mathematical functions for curves for let’s say drawing vector graphics like fonts for example, a nightmare of course.

Math 😱

Alright, time for some Math. I’ll start with the general formula for Bezier curves, it's quite daunting at the first sight, but we’ll make our way through.

General formula for Bezier curve of degree n

“Whoa! Whoa! Whoa! Einstein!”. Hey wait, don’t click away. It’s easy, look, I made it so colorful 🙂.

Let us start breaking the formula down. You can skip over the parts you already know.

B(t)

B because it’s a Bezier curve. As mentioned earlier in the article about parametric form of curves, t is a parameter. You plug in t and out comes x and y, a point. We’ll soon see how that works with the equation above. It’ll be good to mention here that for Bezier curves the value of t should be between 0 and 1, both included.

Σ / Sigma

This symbol, Σ, in Mathematics is called the summation operator. The way it works is like this, on the right of this symbol is an expression with a variable i, and i can only hold integer values. On the top and bottom of the symbol we write the limits of i. For each value of i the expression to the right is evaluated and added to the total until i reaches n.

Here are some examples.

Just a shorter notation for something longer.

Alright, looks like we’re clear with sigma.

nCi

This C here, is the C from Permutations and Combinations. Let’s have an impromptu Combinations lesson shall we. Now, in the formula this part is what is called a Binomial coefficient. The way to read nCi is like this, n Choose i. Which is to say given n items in how many ways can you choose i items out of it ( n is always greater than or equal to i). Okay, that might not have made a lot of sense, consider this example : I have 3 items a circle, a square and a triangle. Therefore here, n = 3. In how many ways can I choose 2(i = 2) items out of the 3. In the language of Mathematics that would be written as 3C2 ( 3 Choose 2). The answer is 3.