Béziers: curves for vector images
Bézier didn’t invent Bézier curves. But he ran away with them, so to speak, polished them up for use in the design of Renault cars, and now his name lives on in the heads of many a desperate designer who can’t figure out how to work with them.
Now what the hell is a Bézier curve? It’s just a way to tell a computer how to draw a bended line. You know about the difference between bitmap and vector images, I imagine. (If not, here’s a useful tutorial on the subject.)
Well, Béziers work for vector images. How do you tell a computer to draw a curved line? It’s got to be a fairly compact instruction, so the vector image will remain small in size. A Mr. De Casteljau thought of a clever way. Allow me to explain.
Flash: quadratic Béziers
Flash works with Bézier curves that have one so-called control point. This control point determines just how your curve is going to run from point A to point B. Many programs work with two control points; the resulting curves are called “cubic Béziers“. You can have as many control points as you like, with Béziers. But Flash has chosen to work with one. Its Béziers are called quadratic Béziers. You may forget that entirely.
So let’s draw 2 points, P1 and P2, and a control point, which we call C:
How does the Bézier system work? How does it use point C to draw a curve from P1 to P2? Well, if you look up the mathematics, it’s quite daunting for a moron. But the idea of Béziers is actually pretty simple. Allow me to show it to you.
In the picture above, we’re going to draw two help-lines. One from P1 to C, and one from P2 to C:
Algorithm
That’s all very well. But how will our curve run? What “algorithm” did dear Casteljau apply to draw a curve between P1 and P2?
Well, this was his recipe, somewhat rephrased:
Supposing you’d draw this curve over time. Let’s say it takes you 100 seconds. That oould be true if you had Parkinson’s, say, so it’s not at all an unrealistic example.
Now you’re going to apply the same fraction for a lot of things. I’m choosing, as a first fraction: one tenth. So -
say I am at 1/10 of the time; then put a little mark (we’ll call it Q1) at 1/10 of the line P1 to C. Also put a little mark (let’s call it Q2) at 1/10 of the line from C to P2. Now draw a line from Q1 to Q2 and mark 1/10 distance of that line. This last mark I will call B, for Bézier. You’ll soon see why.
Here’s what we’ve done in the above paragraph:
Time progresses! And so, let us say we are now at one fifth. We’ll make a little mark at 1/5 of the line from P1 to C – I’d call it Q3, but we’ll get so crowded that you won’t see the forest for the trees. So it will remain nameless, the poor thing. We also make a little mark at 1/5 of the line from C to P2. And then we draw another bridging line between these two new marks. Finally, we mark off 1/5 of this bridging line, and call that point B2.
Here we are:
I think if I do one more, the purpose of this exposé will become nicely visible.
So let’s say we’re now at half time. I’m marking off 1/2 of the line P1-C and 1/2 of the line C-P2, drawing a line between my two new marks and marking off 1/2 on that one for our third B point:
Now…what if I draw a line through all the B points we have so far? (The very start, by the way, at Point P1, when 0 time has elapsed and everything else is zero, also counts as a B point. Everything is still zero, there.) Well, here’s what:
Ok, that’s pretty badly drawn. There was no money in my family for all the children to go to art school. But maybe you can “intuit”, from this, that the red line is going to be…a curve.
I’ve drawn a picture of ten such “Q to Q” lines in actionscript – Flash has a steadier hand than I do, probably because it drinks less.
In this picture, even though there are only 10 straight lines, you can clearly see the pretty curve forming. Let’s make a movie which shows this happening. Believe me, I found it hard to program this motion. But I live for others, so I worked until I got it. And there we are: over time, the curve gets drawn.
Bézier curve drawn in real-time
Isn’t it pretty? I dare you to say that wasn’t pretty!
The curve looks perfectly rounded, but in fact it is a bunch of straight segments. Now if you make those straight segments very very small, then you get something which is very very rounded, indeed. So below, I’ve divided our two main lines up into much smaller segments, which allows you to see a pretty much perfect Bézier curve growing:
The same curve, refined
Personally, I get tears in my eyes from watching this. But if you don’t feel the same way, I understand. Sort of. Let’s not argue about it, anyway.
Now you understand more about Bézier curves than the vast majority of people who draw with them.
For working with them in Actionscript, you use the CurveTo() method. In its parentheses, that CurveTo() method takes 3 elements. I bet you can guess what they are.
Yes, that’s right – our points P1 and P2, or, in other words, the two points between which you want a curve drawn. In Actionscript, they’re called the anchor points. And then the control point. That is, as you’ve seen in the above, the point that our curve bends towards, without ever actually touching it. How sad!
The CurveTo() code
To draw the curve which you’ve been looking at in the two tear-jerking movies, code the following:
var ourCurve:Shape = new Shape();
ourCurve.graphics.lineStyle(2, 0×000000);
ourCurve.graphics.moveTo(100, 220);
ourCurve.graphics.curveTo(210, 50, 430, 260);
addChild(ourCurve);
Visually, this is what you’re telling Flash:
And this code results in:
So drawing a Bézier curve, in short, works like this:
var ourCurve:Shape = new Shape();
ourCurve.graphics.lineStyle(lineThickness, lineColor);
ourCurve.graphics.moveTo(anchor1.x, anchor1.y);
ourCurve.graphics.curveTo(control.x, control.y, anchor2.x, anchor2.y);
addChild(ourCurve);
You’ll have to experiment a bit to see how curves run when you move the Control Point this way or that. Let me know how it goes!
