Bézier curves become more and more important when working with rounded shapes. Since this also means 3D objects (eg. "splines" in 3ds) and even smooth animations ("tweening" in Flash) you should at least know what they do and how to use them. Following the traditions I have to tell you that this technique was invented by Pierre Bézier and Paul de Casteljau (independent from each other) around the year 1960. However Bézier first release his work and thus cought the name. The most used kind of Bézier curves are those defined by 4 points. In this tutorial I'll shortly teach you how to use them.
When defining a straight line all you need is 2 points, obviously called start point and end point. Now that we want to draw a Bézier curve we need additional information telling us where and how strong the bows are. As mentioned before this is done by 2 additional points called the control points, resulting in 4 total points to define the curve.
If you ever worked with CAD/Flash/3ds/whatever the picture to the right will be quite familiar to you. For all others I'll try to shortly explain what happens:
Both, start and end point, are connected to their control points by a grey line. As you can clearly see the control points pull the curve into their direction while the distance is equal to the pull strength. Note that you can form nearly any curve that has 2 bows like this. Putting several lines and curves together you can even form any kind of line with this concept.
Now that we know how the curve is defined we can go on drawing it. The following formula contains the whole magic and you probably won't understand the mathematics behind it. But you don't care about that. All you need to know is how to use the formula and this I'll explain afterwards.
For the code I used p1, p2, p3 and p4 as in the picture above. Each of these points has a .x and .y property which means obviously it's coordinates.
'Calculate position PointX = p1.x * (1-A) ^ 3 + p2.x * 3 * A * (1-A) ^ 2 + p3.x * 3 * A^2 * (1-A) + p4.x * A^3 PointY = p1.y * (1-A) ^ 3 + p2.y * 3 * A * (1-A) ^ 2 + p3.y * 3 * A^2 * (1-A) + p4.y * A^3
Phew, heavy stuff eh? Well as mentioned before - just take it as it is. It'll do the job if you use it correctly.
So what is A in this code? Simply enough it's the slider value but instead of 0% to 100% it goes from 0 to 1. Well that's it already, knowing this fact you can put the code in a loop to draw a Bézier Curve.
However, if you try this already you'll notice that the curve is not closed (see picture on the right). To fill the gaps you need to draw lines instead of points, thus keeping each point's position in memory. The final code looks like the following:
Dim A as Single
Dim NewX as Long
Dim NewY as Long
Dim LastX as Long
Dim LastY as Long
'Get start point
LastX = p1.x
LastY = p1.y
For A = 0 To 1 Step 0.02
'Get curve point
NewX = p1.x * (1-A) ^ 3 + p2.x * 3 * A * (1-A) ^ 2 + p3.x * 3 * A^2 * (1-A) + p4.x * A^3
NewY = p1.y * (1-A) ^ 3 + p2.y * 3 * A * (1-A) ^ 2 + p3.y * 3 * A^2 * (1-A) + p4.y * A^3
'Draw line
Line ( LastX, LastY ) - ( NewX, NewY )
LastX = NewX
LastY = NewY
Next
'Connect last point
Line ( LastX, LastY ) - ( p4.x, p4.y )
Note that we need to connect the last line to the end point manually. Well, however, now you're done with the coding part and ready for the real-world usage of Bézier curves.
First imagine your Bézier curve being flat, that is all points have the same y-position. Then remove the connected lines again so we get a dotted curve. The result will look something like this:
What the hell is it good for you ask? Well what you see is a curve drawn in 20 steps (points) where the first 10 points have smaller gaps (distance) than the last 10 points. Now think of the points being frames in your animation ... got it? Using Bézier curves you can smoothly control the speed of your animation for example. Okay, want another? Look at the following:
Don't get it? Okay I'll tell you: Imagine the bottom line being black (or invisible). The higher the points get the brighter (or more visible) the screen / object becomes. Got it yet? Using Bézier curves you can smoothly blend-in and out any value just as you like. Use it to fade objects, mix colors or brighten the screen, whatever! The example pictures just says: "First blend in straight until we reach the top, then fastly blend out again and smooth to zero". Well I guess you get the point.
Bézier curves are a very simple way to create complex curves that can be used everywhere. Instead of just displaying the curve you can combine it's values with colors to achieve blending effects. Other aproaches would be scaling, moving, turning, stretching or whatever. Short said, wenever you need non-linear values you could use Bézier curves to get them.
Well, we're done for now. I hope you enjoyed the world of bowed curves and can use this in your projects! The sample code below allows you to play around with the curve, just use the mouse buttons and shift to move the points around.