Math in the hand of the designer
Have you ever drawn a curve in Word or Powerpoint? Then you have unconsciously benefited from a modern mathematical idea - Bézier curves. Today, these curves are an indispensable tool for designers and animators alike. To understand what Bézier curves are, how they benefit from mathematics and why they are the designer's best friend, we need to go back in time. Back to a car factory in France.
Bézier’s problem
It's the early 1960s in France and Pierre Bézier, an engineer at car manufacturer Renault, has a problem. The car parts the factory produces, don't quite match the drawings. The lack of precision causes problems during assembly, costing the company both time and money. Components with straight edges are no problem - they can be created by taking precise measurements of distances and angles - but the curved contours of the car body are a challenge.
The problem, Bézier realises, is that the designers' drawings are done by hand. He wonders if these curves could be described mathematically. Then they would be encoded in a language that the manufacturing machines understand, and the result would be complete precision. But how do you translate the shape of a curve into mathematics?
Bézier curves
The problem of translating the shape of a curve into mathematics had been tackled several hundred years earlier, by French mathematicians René Descartes and Pierre de Fermat, among others. By placing the curve in a coordinate system, they were able to describe the position of each point (x, y) on the curve with a mathematical formula.
For example, the blue parabola below can be described by the formula y = 0.5x^2. The formula tells us that no matter which point on the curve we choose, the y-coordinate is always half of the x-coordinate squared. When you think about it, it's quite remarkable that you can encapsulate the entire appearance of the curve in a neat mathematical equation.
The formula y = 0.5x^2 describes that the y-coordinate of a point on the curve is always half of the x-coordinate squared. For example, the curve passes through the point (4, 8) where 8 = 0.5 * 4^2.
Using the ideas of Descartes and Fermat, the engineers at Renault could describe the curves on the designers’ drawings with mathematical formulas. But Bézier realised that the description would not be precise. The hand-drawn curves on the drawings were not standard mathematical curves, but had more complicated shapes, and any attempt to describe them using these methods would not have sufficient precision.
When making a mathematical model (purple) of a hand-drawn curve (blue), it is difficult to get them to match exactly.
Béziers' solution was to create a computer program where the designers could make their drawings. The program was named UNISURF. If the designer wanted to draw a curve, the appearance of the curve was determined entirely by the positions of a number of control points. By moving the control points, the designers could change the shape of the curve, until it matched their vision. The application below shows such a curve when the number of control points is four. You can move the control points P0, P1, P2 or P3 to modify the shape of the curve.
Bézier's genius was that he had found a way to mathematically describe the curve, using the coordinates of the control points. So, in whichever way the designers chose to change the appearance of the curve, Bézier had a mathematical description of their design. This mathematical description could then be used to program the machines that would produce the component in question. The computer program thus enabled the designers to formulate their drawings in a language that the engineers' machines could understand. This made for complete precision. No discrepancies.
Bernstein polynomials
Let's take a closer look at the mathematical description of a Bézier curve.
The position of each point on a Bézier curve is determined by the positions of the control points. More precisely, the coordinates of each point are a combination of the coordinates of the control points, in slightly different proportions. We can think of the control points as ingredients, which we add in different amounts to get each point on the curve.
The contribution of each control point is given by the numbers a, b, c and d. You can think of them as proportions, which together add up to 100%.
By dragging the slider t in the application below, you can see how each control point's contribution varies, as the black dot moves along the curve. Note that the sum of the contributions, i.e. the sum of a + b + c + d, is always equal to 1.
If you tried out the application above, you noticed that the numbers a, b, c and d vary when we let the point run along the curve. You can describe exactly how they vary, using special mathematical expressions called polynomials. This is what the polynomials look like when there are four control points that determine the curve:
You can think of the variable t as a time variable, varying between 0 and 1. By plugging in different values of t, you can find the value of a, b, c and d at that particular time, and hence the proportions in which the control points P0, P1, P2 and P3 contribute to the position of the point on the curve in that moment.
The polynomials above are called Bernstein polynomials after the Russian mathematician Sergei Natanovitch Bernstein (1880-1968). He discovered them in a completely different context in the beginning of the 20th century, but in the hands of Béziers they were given new life.**
The advantages of Béziers solution
The advantages of Béziers' construction were many. Firstly, the curves were created by moving control points, rather than by making complicated mathematical calculations, which made the tool intuitive even for designers who had no mathematical background. Secondly, each curve was uniquely determined by a few control points, making the method ideal from a data storage point of view - each curve required very little memory. Thirdly, the curves were easy to move, stretch and rotate - all that was required was to move, stretch or rotate the control points accordingly.
Bézier was not alone in his discovery. Around the same time, the same method was discovered by mathematician Paul de Casteljau at the rival company Citroën, but his discoveries were kept secret by the company and the curves now bear Pierre Bézier's name.
Curves, curves, everywhere
Today, Bézier curves are the graphic designers’ and artists’ best friend. On their digital drawing boards, Bézier curves help realize the curved contour of the bonnet, the smooth silhouette of your favourite armchair and the expensive curve of your designer glasses. Yes, if you've ever used Photoshop's pencil tool or drawn a curve in Word or PowerPoint, you've actually benefited from Bézier curves yourself.
The curves are also indispensable tools for computer game creators. The film clips below, show how they are used to create curved shapes in the computer games Planet Coaster and Flowstorm, and if you've ever had to fly through an animated game world, your camera's trajectory is sure to be a Bézier curve.
The fact is that Bézier curves have helped define the shape of the letters you're currently following with your eyes. The curves are, in fact, a tool in font design. The giant letter e of the Times New Roman font below, was created with Bézier curves. You can change the shape of the letter yourself, by moving the red crosses.
What started as an idea in a car factory in France, is now a digital tool in everyone's hands. Behind the scenes, as so often, is a mathematical idea - this time a bunch of cubic polynomials. It is often when mathematics is at its most invisible, that it is most useful. That's part of the strength of mathematics, that it can work so covertly that it remains invisible to those who use it. But it also sometimes blinds us to its impressive usefulness.
Notes:
* Note that the starting point of the curve is P0, that the end point of the curve is P3, and that the control points P1 and P2 define the direction of the tangent at the start and end points of the curve.
** When the curve is determined by four control points, the Bernstein polynomial is of degree 3 and the curve is called a cubic Bézier curve. When the curve is determined by three control points, the Bernstein polynomial is of degree 2 and the curve is called a quadratic Bézier curve. In general, the degree of the Bernstein polynomial is the number of control points minus 1.
References and further reading
Buss, Samuel R. (2003) 3D Computer Graphics. A Mathematical Introduction with OpenGL. Cambridge University Press.
jdhao (2020) The Mathematics behind Font Shapes --- Bézier Curves and More. Blog.
Laurent, P.J & Sablonnière, P. (2001) Pierre Bézier: An engineer and a mathematician. Computer Aided Geometric Design 18 (2001) 609–617
Rabut, Christophe (2001) Petite historie d’une idée bizarre: Les courbes et surfaces de Bézier.
Solai, Pavithra (2015) What the Bezier?! Medium.com
Wikipedia: Paul de Casteljau
Wikipedia: Pierre Bézier
Filmer:
Holmér, Freya (2021) The Beauty of Bézier Curves, YouTube
Shiach, John (2015) Bézier Curves. YouTube.
Wild Egg (2018) De Casteljau Bezier Curves, YouTube