How Cubic Bézier Curves Work
October 3, 2014 6:43 AM Subscribe
Have you ever wondered how Cubic Bézier Curves work in digital graphics programs? Peter Nowell created an interesting video to go "under the hood" and show the underlying geometry of the process. He has more discussion of Bézier Curves here.
Interesting video. Would have been useful to see him do the same process on a "weird" Bezier curve.
posted by smackfu at 7:06 AM on October 3, 2014
posted by smackfu at 7:06 AM on October 3, 2014
The linked video doesn't seem accurate. My understanding was that bezier curves were rendered recursively i.e., cutting the curve in half over and over again, until the peices were small enough to translate into pixels. A quick google seem to indicate that this is the case: http://web.cs.wpi.edu/~matt/courses/cs563/talks/surface/bez_surf.html
I'm also not sure why software would bother doing that weird triangle thing, when the bezier curve is represented as a parametric equation. Why not just increment t?
posted by ceebee at 7:22 AM on October 3, 2014
I'm also not sure why software would bother doing that weird triangle thing, when the bezier curve is represented as a parametric equation. Why not just increment t?
posted by ceebee at 7:22 AM on October 3, 2014
I'm also not sure why software would bother doing that weird triangle thing
I thought the premise was that this was a visualization of the formula that the software is using.
posted by smackfu at 7:31 AM on October 3, 2014 [1 favorite]
I thought the premise was that this was a visualization of the formula that the software is using.
posted by smackfu at 7:31 AM on October 3, 2014 [1 favorite]
One thing he doesn't explain is how anybody would come up with this construction; one way is to generalize some facts about (arcs of) parabolas, which are quadratic (rather than cubic) Bezier splines. If you like Euclidean geometry, here's some notes (pdf) I wrote some years ago on the subject. (The quadratic Bezier stuff itself is on page 6; the previous pages build up to it using only elementary geometry.)
posted by stebulus at 7:34 AM on October 3, 2014 [1 favorite]
posted by stebulus at 7:34 AM on October 3, 2014 [1 favorite]
Well, Wikipedia states this method represents De Casteljau's Algorithm, apparently? I mean, I dunno - still magic to me (and my "Int" is quite low, so I often fail a roll on this magic!)
posted by symbioid at 7:34 AM on October 3, 2014 [1 favorite]
posted by symbioid at 7:34 AM on October 3, 2014 [1 favorite]
I think it's interesting that you could do the curves this way, if you wanted to.
posted by SpacemanStix at 7:37 AM on October 3, 2014
posted by SpacemanStix at 7:37 AM on October 3, 2014
Here are some tips for manipulating Bézier curves. I learnt them about a half a year into my love affair with Illustrator, and they have made the ensuing fourteen years a lot easier.
1. Never turn more than about 90° between two control points.
2. Pull curve handles out to about 1/3 of the length of the curve segment they control.
3. Eschew S-curves between two control points.
Follow these rules and you can quickly pull out smooth, pleasing curves, which are easy to edit.
posted by egypturnash at 7:39 AM on October 3, 2014 [2 favorites]
1. Never turn more than about 90° between two control points.
2. Pull curve handles out to about 1/3 of the length of the curve segment they control.
3. Eschew S-curves between two control points.
Follow these rules and you can quickly pull out smooth, pleasing curves, which are easy to edit.
posted by egypturnash at 7:39 AM on October 3, 2014 [2 favorites]
The under-the-hood stuff is fascinating to me (if still somewhat baffling).
For more practical tips, there are some additional worthwhile articles buried in the FPP links. In his medium article, Nowell mentions Dave Coleman's So What’s the Big Deal with Horizontal & Vertical Bezier Handles Anyway? Coleman, in turn, links to the handy Illustrator’s Pen Tool: The Comprehensive Guide by Ian Yates.
All-in-all a lot more helpful than that friggin Bezier Game.
posted by Kabanos at 7:47 AM on October 3, 2014
For more practical tips, there are some additional worthwhile articles buried in the FPP links. In his medium article, Nowell mentions Dave Coleman's So What’s the Big Deal with Horizontal & Vertical Bezier Handles Anyway? Coleman, in turn, links to the handy Illustrator’s Pen Tool: The Comprehensive Guide by Ian Yates.
All-in-all a lot more helpful than that friggin Bezier Game.
posted by Kabanos at 7:47 AM on October 3, 2014
I am terrible at that Bezier Game. I can't even complete the tutorial.
posted by smackfu at 7:49 AM on October 3, 2014 [2 favorites]
posted by smackfu at 7:49 AM on October 3, 2014 [2 favorites]
2. Pull curve handles out to about 1/3 of the length of the curve segment they control.
I learned this from Teri Pettit, Illustrator engineer and it was probably the biggest quantum leap in a long history of learning design and illustration. I can't stress it enough.
posted by Brainy at 8:15 AM on October 3, 2014
I learned this from Teri Pettit, Illustrator engineer and it was probably the biggest quantum leap in a long history of learning design and illustration. I can't stress it enough.
posted by Brainy at 8:15 AM on October 3, 2014
Y'all sound like a bunch of NURBS.
posted by RobotVoodooPower at 8:50 AM on October 3, 2014 [8 favorites]
posted by RobotVoodooPower at 8:50 AM on October 3, 2014 [8 favorites]
One thing he doesn't explain is how anybody would come up with this construction...
Yes. For me, that video raised a lot more questions than it answered. Which can be fun in an "unknown unknowns" kind of way, but in this case leaves me feeling that I really don't know any more than when I started. Of course, for all I know it could just be one of those things -- like magnetism, it seems -- where there's very little middle ground between "it's useful magic" and "study these basics for a semester then we'll talk".
posted by metaBugs at 9:27 AM on October 3, 2014
Yes. For me, that video raised a lot more questions than it answered. Which can be fun in an "unknown unknowns" kind of way, but in this case leaves me feeling that I really don't know any more than when I started. Of course, for all I know it could just be one of those things -- like magnetism, it seems -- where there's very little middle ground between "it's useful magic" and "study these basics for a semester then we'll talk".
posted by metaBugs at 9:27 AM on October 3, 2014
Before Bézier, engineers used to design curves. Now, designers can engineer curves.
posted by grog at 9:49 AM on October 3, 2014
posted by grog at 9:49 AM on October 3, 2014
Hmm.. just watched the video and while it is interesting mathematically, I don't think it will actually help designers. It does show one principle that I think is crucial, but doesn't focus on it: the curve is always tangent to the handles, at the endpoints. This is basically the only curve issue you must deal with every time, the rest you can kind of fake as you drag out the handles and get a visual sense of how it works.
Oh BTW, I don't think I ever showed my very first CG bezier curves. Back in those days, if you wanted beziers, you had to type in numeric values for the control points. Now get off my lawn!
posted by charlie don't surf at 9:55 AM on October 3, 2014
Oh BTW, I don't think I ever showed my very first CG bezier curves. Back in those days, if you wanted beziers, you had to type in numeric values for the control points. Now get off my lawn!
posted by charlie don't surf at 9:55 AM on October 3, 2014
I don't know how cubic Bezier curves work, as that is my husband's business, not mine. But when I met Bezier in Utah years ago, he bowed, clicked his heels, and kissed my hand! He was indeed a gentleman and a scholar.
posted by mermayd at 11:10 AM on October 3, 2014 [2 favorites]
posted by mermayd at 11:10 AM on October 3, 2014 [2 favorites]
This is bugging me. The goal is "Give people an idea of how the control points mathematically influence the curve". Here's what you do:
There are two math concepts that you bite the bullet on: interpolation and tangent line.
Interpolation - as a number runs from 0% to 100% you smoothly transition between two states. Use the example of people's coffee drinks. They exist between two states: black coffee and sugar milk. A Dunkies mochalatta is about 75% of the way to sugar milk. Throw out a few more examples.
Show how a direct line between two points interpolates position. Then show how bad and clunky this looks on a curve. Draw some tangents on the curve and point out how badly the tangents on the interpolating curve behave. (People intuitively understand what the line tangent to a curve is; you just need to give them the terminology.)
Now for the beautiful part of a Bezier curve: We are going to go from point A to point B, interpolating not just the position but also the tangent line. Go back to the smooth curve, pick two points and draw their tangent lines. "How do we interpolate between two tangent lines?" Pull the two tangents over to a unit circle and show a third line rotating between the two slopes. "Like this."
"What do the control points do? They define the tangent lines at the start and end of the curve, the tangents we are going to interpolate between." Most of the details in that video don't provide understanding of how it work, just how to implement it computationally, so you can skip them. But that inner, third line segment is useful — you can see how it interpolates between the two tangent lines, rotating from one to the other. So do show that animation of the curve being drawn, and freeze it at four or five points to show how our tangent is rotating between the two positions.
The question "what does the length do" is left hanging. The viewer's patience for math is probably exhausted for now, so I'd punt on that, maybe mentioning egypturnash "1/3 the length controlled" advice as a good default.
posted by benito.strauss at 11:16 AM on October 3, 2014
There are two math concepts that you bite the bullet on: interpolation and tangent line.
Interpolation - as a number runs from 0% to 100% you smoothly transition between two states. Use the example of people's coffee drinks. They exist between two states: black coffee and sugar milk. A Dunkies mochalatta is about 75% of the way to sugar milk. Throw out a few more examples.
Show how a direct line between two points interpolates position. Then show how bad and clunky this looks on a curve. Draw some tangents on the curve and point out how badly the tangents on the interpolating curve behave. (People intuitively understand what the line tangent to a curve is; you just need to give them the terminology.)
Now for the beautiful part of a Bezier curve: We are going to go from point A to point B, interpolating not just the position but also the tangent line. Go back to the smooth curve, pick two points and draw their tangent lines. "How do we interpolate between two tangent lines?" Pull the two tangents over to a unit circle and show a third line rotating between the two slopes. "Like this."
"What do the control points do? They define the tangent lines at the start and end of the curve, the tangents we are going to interpolate between." Most of the details in that video don't provide understanding of how it work, just how to implement it computationally, so you can skip them. But that inner, third line segment is useful — you can see how it interpolates between the two tangent lines, rotating from one to the other. So do show that animation of the curve being drawn, and freeze it at four or five points to show how our tangent is rotating between the two positions.
The question "what does the length do" is left hanging. The viewer's patience for math is probably exhausted for now, so I'd punt on that, maybe mentioning egypturnash "1/3 the length controlled" advice as a good default.
posted by benito.strauss at 11:16 AM on October 3, 2014
Why not just increment t?
Because incrementing t by a given amount moves you an unpredictable* distance along the curve; there is no single correct value for your t-increment. If you arbitrarily choose some fraction of the total, say 1%, and iterate from t=0 to t=1, you'll find that sometimes it will barely move you along the curve at all (and you'll waste time drawing pixels that are so close together they're indistinguishable), and other times it will rocket you too far along the curve (and when you connect your new position to your previous one, your approximation of the curve will not appear smooth).
Hence, the recursive-subdivision approach, which sleazes its way through life, trying to use the largest t it can get away with at a given position along the curve.
* Of course it's not unknowable - but it's not trivial to calculate, either.
posted by Rat Spatula at 12:08 PM on October 3, 2014
Because incrementing t by a given amount moves you an unpredictable* distance along the curve; there is no single correct value for your t-increment. If you arbitrarily choose some fraction of the total, say 1%, and iterate from t=0 to t=1, you'll find that sometimes it will barely move you along the curve at all (and you'll waste time drawing pixels that are so close together they're indistinguishable), and other times it will rocket you too far along the curve (and when you connect your new position to your previous one, your approximation of the curve will not appear smooth).
Hence, the recursive-subdivision approach, which sleazes its way through life, trying to use the largest t it can get away with at a given position along the curve.
* Of course it's not unknowable - but it's not trivial to calculate, either.
posted by Rat Spatula at 12:08 PM on October 3, 2014
Oddly enough, you have had the tools to generate similar curves and maybe you had a cool math teacher who had you do this with string when you were in grade school (I remember doing this in 4the grade).
You started by making some evenly marked axes.
Then you connect the highest point on one axis to "1" on the other and repeat with the next highest and so on.
When you've connected them all, there is a curve defined by the points, which is a section of a hyperbola.
This is a very similar process to De Casteljau's Algorithm. So much so that I can get that curve bang on the money with exactly one cubic Bezier with control points at the 15s and then 2/3 of the distance to the origin on each axis (which is exactly what I did in Illustrator. Neat, huh?
posted by plinth at 12:09 PM on October 3, 2014 [1 favorite]
You started by making some evenly marked axes.
Then you connect the highest point on one axis to "1" on the other and repeat with the next highest and so on.
When you've connected them all, there is a curve defined by the points, which is a section of a hyperbola.
This is a very similar process to De Casteljau's Algorithm. So much so that I can get that curve bang on the money with exactly one cubic Bezier with control points at the 15s and then 2/3 of the distance to the origin on each axis (which is exactly what I did in Illustrator. Neat, huh?
posted by plinth at 12:09 PM on October 3, 2014 [1 favorite]
>Why not just increment t?
Because incrementing t by a given amount moves you an unpredictable* distance along the curve; there is no single correct value for your t-increment.
Actually, incrementing exactly how they do it. The increment can be set on PostScript RIPs as the Flatness value. And there is a theoretical limit to how small the increment has to be, in order to exceed the resolution of the output device. You don't need to know the optimum value for the increment, just the minimum.
posted by charlie don't surf at 1:31 PM on October 3, 2014 [1 favorite]
Because incrementing t by a given amount moves you an unpredictable* distance along the curve; there is no single correct value for your t-increment.
Actually, incrementing exactly how they do it. The increment can be set on PostScript RIPs as the Flatness value. And there is a theoretical limit to how small the increment has to be, in order to exceed the resolution of the output device. You don't need to know the optimum value for the increment, just the minimum.
posted by charlie don't surf at 1:31 PM on October 3, 2014 [1 favorite]
Maybe we misunderstand each other. In my experience, the typical implementation does have a 'granularity' or 'smoothness' adjustment, but this is not the increment itself; it's the threshold distance (in pixels) that's permitted between the actual midpoint of a Bezier segment and the midpoint of a straight line connecting the endpoints of that segment.
posted by Rat Spatula at 2:21 AM on October 4, 2014
posted by Rat Spatula at 2:21 AM on October 4, 2014
Let's go to the PostScript Red Book and see if you interpret this the way I do. I will quote a section of page 565, I'll manually transcribe the superscripts and subscripts and omit our usual italics for quotations:
Mathematically, a cubic Bézier curve is derived from a pair of parametric cubic equations:
x(t) = axt3+bxt2+cxt+x0
y(t) = ayt3+byt2+cyt+y0
The cubic section produced by curveto is the path traced by x(t) and y(t) as t ranges from 0 to 1.
posted by charlie don't surf at 4:53 AM on October 4, 2014
Mathematically, a cubic Bézier curve is derived from a pair of parametric cubic equations:
x(t) = axt3+bxt2+cxt+x0
y(t) = ayt3+byt2+cyt+y0
The cubic section produced by curveto is the path traced by x(t) and y(t) as t ranges from 0 to 1.
posted by charlie don't surf at 4:53 AM on October 4, 2014
I agree completely that the curve is defined in just that manner. But the software implementations that actually draw the curve don't do so by plugging in steadily-increasing values of t. Instead, they recursively subdivide the curve in the manner of de Casteljau's algorith, breaking the starting Bezier into a continuous chain of smaller ones again and again until each sub-Bezier is indistinguishable from a straight line segment at the output resolution. Segments of the original Bezier which bend sharply must be subdivided many times to get a smooth result, but nearly-straight segments may not need but a handful.
posted by Rat Spatula at 7:29 AM on October 4, 2014
posted by Rat Spatula at 7:29 AM on October 4, 2014
Well, we are quibbling here, but then, that's what math is all about, I suppose. And this math is of particular professional interest to me (and others, as is apparent from this and previous Bezier discussions, as well as the profusion of tutorials like this FPP).
I used to debug RIP output at my job (which is why I always go straight to the Red Book) and I saw many bezier curves that had incorrect flatness and they were output as a series of line segments. But it has been a while since I worked on that level with RIPs, and there may be significant differences in implementations in different RIPs, and of course the on-screen representation in the drawing app may be significantly different than the actual RIP output (which was where I usually got involved).
The flatness settings are used to set an increment for t, and the output is a straight line between points on the curve. The trick is to set the increments high enough that they are seen as a continuous curve at the output resolution, set it too low and you see the line segments. If you increase the resolution of the output device but the flatness settings end up below the required increment, you can go in with a magnifier and see the curves are made of line segments. In practice, this is good enough (especially when PostScript first started out, on low power CPUs) but it definitely isn't perfect. The trick is to get the "good enough" settings up high enough that you can't tell it's not perfect at that output resolution.
posted by charlie don't surf at 12:14 PM on October 4, 2014
I used to debug RIP output at my job (which is why I always go straight to the Red Book) and I saw many bezier curves that had incorrect flatness and they were output as a series of line segments. But it has been a while since I worked on that level with RIPs, and there may be significant differences in implementations in different RIPs, and of course the on-screen representation in the drawing app may be significantly different than the actual RIP output (which was where I usually got involved).
The flatness settings are used to set an increment for t, and the output is a straight line between points on the curve. The trick is to set the increments high enough that they are seen as a continuous curve at the output resolution, set it too low and you see the line segments. If you increase the resolution of the output device but the flatness settings end up below the required increment, you can go in with a magnifier and see the curves are made of line segments. In practice, this is good enough (especially when PostScript first started out, on low power CPUs) but it definitely isn't perfect. The trick is to get the "good enough" settings up high enough that you can't tell it's not perfect at that output resolution.
posted by charlie don't surf at 12:14 PM on October 4, 2014
« Older Welcome to the 1099 economy | My new desktop image. Newer »
This thread has been archived and is closed to new comments
x(t) = axt3 + bxt2 + cxt + x0
x1 = x0 + cx / 3
x2 = x1 + (cx + bx) / 3
x3 = x0 + cx + bx + ax
y(t) = ayt3 + byt2 + cyt + y0
y1 = y0 + cy / 3
y2 = y1 + (cy + by) / 3
y3 = y0 + cy + by + ay
posted by sammyo at 7:00 AM on October 3, 2014 [2 favorites]