Yavor Atanasov web portfolio

Weblog

2010
03.03

bezier curve actionscript image

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:

bezier curves formula

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.

8 comments so far

Add Your Comment
  1. Great great great!!!
    Me being an advertising producers, and having to deal with animatics in After Effects, such a peer overview is invaluable indeed.

    The action scripting is a very simple and precise overview of what the ease effects actually do.

    Great job!
    Waiting for more:)

  2. Glad you liked it, Mr. Twig ;)

  3. As someone who knows nothing of math and graphics, I find this astonishing! A definite candidate for the Museum of Science and Industry.

  4. this is awesome! probably the most precise definition.

  5. Thank you man, you really made my day!!!
    During the last years I had several attempts to understand how the bezier formula works. Now, with your great visualization I got it!
    Thanks alot

  6. This is great. Thank you!

  7. Hi,
    I am a student in AS 3.0
    i am embarrassed to say that i don’t know how to emplacement the code in Flash so that it work on mouse click.
    all i did is import Bezier in a new line in an fla document.
    so what should i do next?
    sorry if my question was stupid

  8. Very nice. The graphic makes understanding the algorithm simple!

Your Comment