Bezier curves, invented by french engineer Pierre Ã‰tienne BÃ©zier, play a crucial role in the world of computer graphics (and not only). They are used to create smooth and infinitely scalable curves (and surfaces in 3D) in vector graphics. In addition, in computer animation they are used to describe and control the velocity of an object, so that a more natural motion can be achieved via ease-in and ease-out effects. Those are just some of the applications of Bezier curves.
Understanding how Bezier curves work, however, can be mind-boggling if you just stare at the neat little formula that is used to describe them:
I have always loved breaking complex things down into their smallest bits to bring out the beautiful simplicity hidden behind their intimidating mathematical facade. Do not get me wrong, I am not a math freak, not at all, but I always strive to actually see how things work. Therefore I dug a bit deeper into Bezier curves (just a bit) and I did some Actionscripting to create this simple interactive visualization that shows the mechanical beauty of the scary formula:
The maximum possible order number you can enter is 9, because higher degree curves get really expensive in terms of calculation. If you crank up the value to 9 you can notice how sluggish the application becomes (this of course depends on your machine’s characteristics). In general, the most commonly used Bezier curves in computer graphics are of order 2 and 3 (quadratic and cubic curves). If a more complex shape is required, Bezier curves are patched together forming paths.
The smoothness of the curve depends on how close the approximation is to the continuous interval [0,1]. This reflects the number of calculated points from the curve that get connected with a line segment. The more the points, the bigger their density and the smoother the raster curve.
The Actionscript behind the application
Those of you curious to see the Actionscript behind the application can check out the Bezier Actionscript class I wrote here.