What the Bezier?!
Beziers are one of the seriously mis-understood curve creatures of Math. For the uninitiated, Beziers with their perplexing formulae look daunting to read about and understand. And what little motivation you have to get know them better, gets thwarted with its complex explanations. So here is a sincere attempt to explain Beziers with basic math, in a easier way.
Let's start with the simplest of all use-cases of Beziers, one that is staring at us, right now. Beziers are used for designing fonts (the very words you are reading are displayed on the screen using them).
A letter (of a Font typeface) is basically a series of curves, as shown below.
If you are to modify this letter ‘e’ or if you are creating a new font, you have to pull, stretch and create new curves to give the ‘letter’ its shape.
So in order to draw curves, let’s get started with the simplest of them all — a simple straight line.
To draw a line, we plot it on the x and y axis. When computing points for a line, the value for y is given by the value of x.
You can say it as: y is a function of x or y = f(x)
When y = x, it results in a diagonal line with x and y having the same values. If x = 2, then y = 2.
And as we increase the order of x (increasing the power of x to it's square and cube), you will find that the line becomes a curve.
To draw a curve, we need x to be expressed as x² or x³. Or in higher orders of x. Curves using x² are quadratic curves and x³ are cubic.
As discussed earlier, a designer conceptualizes the curves in a font, visually. But a computer captures curves as mathematical formulae, that can be reproduced anywhere. Let’s consider the curve below.
In order to draw it, we would need the mathematical function for it. We can represent this as a quadratic curve, as
y = ax² + bx + c (where a, b and c are coefficients)
So to produce this curve, we have to compute the mathematical function, which in this case, will be: y = 0.101x² — 1.6x + 7
Well, that's good. A formula that a computer can understand to draw the desired curve. But what if the designer wants to invert the curve and draw it again, like this.
What will the function of this new curve be?
So, now we need to compute its function again. And for every change a designer makes, a new curve has to be computed. This takes more time making the whole process of dealing with curves, cumbersome.
In other words, it becomes hard to visually change the structure of a curve. And it becomes impossible, without knowing the math behind it. But, a French Engineer Pierre Bezier, who was designing automobiles at Renault, popularized an elegant solution in 1962. He used special curves to specify how he wanted automobile parts to look like. Named after him, these special ‘Bezier curves’ were found to be an easy, effective and efficient tool in Computer Graphics and Computer Aided Design to draw and control curves.
A Bezier curve is defined by ‘control points’.
It starts at the first control point, ends at the last, but it does not go through all the other control points. The other control points are called off-curve control points. And these points act as ‘weights’, which direct the flow of the curve.
Let’s take a Bezier with three control points. Two control points define the start and end of the curve. And the middle point acts as a weight, influencing its curvature. It looks as if the curve is attracted towards the off-curve control point. And by moving the off-curve control point, we can change the shape of the curve with real ease.
When a Bezier has four control points (like the one above), two of its control points are on-curve (start and end) and two are off-curve, that act as weights. So, if you are to invert this curve, it will be as easy as flipping its off-curve points.
The number of control points in a Bezier curve, defines the degree of the curve. A two-point Bezier curve has degree 1. It has no off-curve points and so is a straight line. A three-point Bezier has degree 2; a four-point Bezier has degree 3. For a Bezier curve of degree n, it has n + 1 control points.
Coming back to our initial question, how do we design fonts with Beziers? For a font designer, a letter is shown as a series of Beziers and straight lines. So if we are to change the curvature of the eye of the letter ‘e’, then we can use the off-curve control points to get the shape desired.
Let's say, if we have to change the eye of the letter 'e'. This can be done by dragging the off-curve control points. These off-curve control points marked in brown, are connected to their nearest on-curve point, coded in red. (The off-curve control points, are closer to the curves to maintain the curvature of the letter. Also this is a suggestive experiment on font designing, which indeed is a more intricate technique.)
The applications of Beziers just doesn’t stop here. Bézier curves are often employed to smoothen the animation of an object.
Let’s take a simple animation where a ball moves up, stays there for a moment and then comes down. If we use linear motion (a straight line), you will find the movement to be jerky and mechanical. As the blue ball moves, its speed changes abruptly and hence the rigidity in its motion.
If its movement were to be controlled by a bezier curve instead, the red ball would accelerate swiftly at first and then slow down, making the movement more fluid and natural. So, instead of lines depicting the motion of the object, if we use Beziers (in this case there are two, one controlling the ball moving up and the other moving it down) it would be easier to depict and manipulate realistic motion.
Also, Beziers are used in vector art for representing curves. SVG uses Beziers. And if you’ve worked with popular graphics and design applications, such as Photoshop, Illustrator, Flash, or InDesign, you would have used Bezier curves as “paths.”
Now that we do have a basic understanding of Beziers, let’s delve into the math of Beziers in the next blog post. Let’s take a better look at curves and splines and the construction of Beziers.
Till then, ciao!
P.S: Graphs created using www.fooplot.com. Animated beziers inspired by Jason Davies.Thanks to Google for illustrating the concept of authentic motion and Renan Gross for your wonderful article on Beziers.
Originally published at blog.kint.io.
