Bézier surface

Transcription

This is Coding Math, Episode 19, Bezier Curves. I'm going to take a break from all the physics stuff and explore some other topics for a few weeks. So today we're going to take a deep dive into Bezier curves. Now the most important thing to know about Bezier curves is how to pronounce "Bezier". When I'm alone in my head, it's usually "Bezier" because I was taught that "e r" is "er". But if you're out with your educated friends and you say Bezier, they'll all laugh at you. The trick is to pretend you are french for that one second it takes you to say it. Bezier, s'il vous plait. Anyway, Bezier curves are all about linear interpolation, which we covered some weeks ago. Basically, you take a value from 0 to 1 and a range of numbers, and you find the value in that range that corresponds to that initial number. So, say we have two points, one is at an x position of 100 and another at 200. And we have a value between 0 and 1. We'll name that "t". Now if t is 0, then the output value we'll get is 100. If it's .5, we'll get 150, and if t is 1, we'll get 200 as an output. If you have any question about what that all means, check out Coding Math Mini #2. Next, let's throw the y axis in there as well. We'll use the same t to interpolate between x and y at the same time. Now as we build this up, it's going to get a bit complex, so rather than try to demonstrate what's going on with my crappy drawings, I've gone and made a demo using modern computer graphics. So we have two points, p0 and p1. p0 is at position 100, 500, and p1 is at 600, 200. As we go through this, we'll get interpolated values for x and y, which we'll use to make a new point, pA. When t is 0, pA will be the same as p0. When t is increased to 0.1, pA will move one tenth of the way from p0 to p1, which will put it at 150, 470. As we move t through 0.2, 3, 4 and into 0.5, pA moves to the halfway position between p0 and p1, which is 350, 350. And as we continue to increase t up to 1.0, pA moves until it sits exactly at p1. And, you can see that as it has moved, it's drawn a line. Not surprising that a linear function drew a line, I guess. Next, let's add a third point, p2. It's at 1000, 400. Now, we'll continue doing exactly what we were doing, moving pA between p0 and p1 based on the value of t, but we're also going to add a new interpolated point, pB. This is going to move between p1 and p2. It's also going to use t to interpolate, so it will be right in sync with pA. Now, when t is 0, pA is at p0, and pB is at p1. When t goes to 0.1, pA moves one tenth of the way towards p1 and pB moves one tenth of the way towards p2. I guess I don't need to beat this to death, you know the rest. So this has drawn two lines. But now, instead of rendering the lines that each interpolated point is making as it moves, let's draw the line that goes between them. We do that for 0, 0.1, 0.2, 0.3 and so on up to 1. Well that's interesting. We're starting to get something curve like. It's kind of like that string art you did as a kid. Your mom said she loved it, but one day it wasn't hanging on the wall anymore. Now this is where things get "meta". We're interpolating between p0 and p1 and p1 and p2 to get pA and pB. Now we're going to interpolate between pA and pB to get pFinal. In this final demo, I'll show pFinal in red. We start with t at 0. So pA is at p0 and pB is at p1. We use the same t to interpolate between pA and pB, which puts pFinal at pA. At t = 0.1, pA moves one tenth towards p1, pB moves one tenth towards p2, and pFinal moves one tenth of the distance between pA and pB. As t continues to increase, we'll track the position of pFinal. And what do you know? We have a curve. It's pretty low res at this point because we're drawing it with only ten steps, but if you move t between 0 and 1 with smaller increments, that will smooth right out. The important thing to take note of here is that the curve starts at p0, ends at p2, and moves towards, but does not reach, p1. If we move p1 and run through this again, the curve changes to move towards p1. So we call p1 the control point. It controls the shape of the curve. Now this is actually what we call a quadratic bezier curve. And we'll see why we call it that in a moment. Let's first go into our utils.js file and create a quadraticBezier function. This will take three points, p0, p1, and p2, and a value for t. It's going to return a point, so we'll create pFinal as a generic object that we can add x and y properties to. Next, we have to calculate the x and y for pFinal. We could use utils.lerp to interpolate between p0.x and p1.x to get a pA x, then use lerp again to interpolate between p1 and p2 x for pB x, then use lerp again to interpolate between pA x and pB x to get pFinal x. And then do the same thing all over again for y. And that would actually work just fine. In fact, that's basically what I did to create the demos you see here. But that's more lerping than anyone should ever be doing in a single function. If we replaced the lerp calls with the actual formulas that lerp uses, we'd wind up with a big long expression. And if we reduced that expression as much as we could, what we would wind up with is: pFinal.x = Math.pow(1 - t, 2) * p0.x + (1 - t) * 2 * t * p1.x + t * t * p2.x; And the same thing for y. // pFinal.y = Math.pow(1 - t, 2) * p0.y + (1 - t) * 2 * t * p1.y + t * t * p2.y; Now feel free to work this all out on your own, but that is the standard function for Bezier curves. So, be because the highest power in those formulas is 2 (we have a couple terms being squared), it's a second order function or a quadratic. Thus, quadratic bezier curve. So, you pass in the three points and a t and it returns a new point. The only thing that bothers me about this is that every time you call it, it's creating a brand new point. Since you will probably be calling this function many, many times for single curve, this could be a problem. So I'm going to add an optional final parameter, pFinal and say pFinal = pFinal OR a new object. This allows the user to pass in a single point each time. That point will just have its x and y properties set with the calculated values. Another option would just have the function take single values instead of points, and return a single value. So you'd call it once to get the final x value, and again for the final y. I had to choose one, so I chose to use points in the function. If you prefer it the other way, go for it. I won't argue. Now the other common Bezier curve is the cubic Bezier curve. As you'll see soon, this has powers of 3, or cubes, in its formula. Like the quadratic Bezier, the cubic has two end points, but it has two control points. This allows for more complex curves and a lot more control over how the curve moves. This just adds on one more initial point, p3. Then you interpolate from p2 to p3 to get another intermediate point, pC. Then from pA to pB for something like pN and pB to pC for pM, then pN to pM for pFinal. So, interpolation, three levels deep. It looks pretty cool in motion, so I'll just let this one animate for a while. There's a lot going on all at once there. To get a feel for it, first watch the three green dots as they move back and forth along the gray lines. Then follow the two blue dots as they move along the green lines. Finally, watch the red dot as it moves back and forth on the blue line. And finally, see how the path of the red dot forms the Bezier curve. Now let's create the cubicBezier function. This takes four points, p0 through p3, a t and an optional pFinal. And again, we could go all lerp-crazy here. But this, too, distills down into a standard formula which you can see here. Again, you can derive this by yourself, or just trust that I copied it over correctly. OK, now we have these nifty functions, but what can we do with them? Well, we could draw some Bezier curves. But most graphics systems already have functions to draw quadratic and cubic curves. Canvas has context.quadraticCurveTo and context.cubicCurveTo. These are no doubt more optimized than what we just created, and much easier to use, so that doesn't make sense. But ours can do things theirs can't. In the file, main1.js, I've set up four points (plus a final point) and randomly placed them on the canvas. I then draw circles for each point and use quadraticCurveTo to draw a curve between them. Then I loop t from 0 through 1 in increments of 0.01. In that loop, I'm calling utils.quadraticBezier with all the obvious parameters. Then I'm drawing a small circle at pFinal x and y. Here's the result of that. So you can use this to draw Bezier curves with shapes instead of just a line. Or to look at it another way, you can use it to distribute shapes along a Bezier curve. You can also animate the drawing of a curve with these functions, something you can't do with the build in curve functions. The file main2.js has a similar set up with four random points. But then uses a requestAnimationFrame loop to create an animation. This increments a variable called maxT and uses the utils.cubicBezier function to draw a curve from 0 to whatever maxT is. When maxT exceeds 1, it gets set back to 0. Here you can see the curve as it is being drawn, rather than just having it appear all at once. For one final example, main3.js has an object moving along a Bezier path. Same basic setup, but the curve is drawn with the built-in cubicCurveTo function, then a point on the curve is calculated using the current value of t. A circle is drawn at that point and t is incremented. When t goes past one or zero, the increment value reverses, so what we get is... An object moving back and forth along the curve. So, there you go, BeziER, I mean Bezier curves. I've only given you a few quick examples of how you can use them. I hope you find it useful. Also, the code for all the initial demos will be included in the usual github repo for this episode. It's not very pretty, as I just hacked it together for the demo, but you might find that interesting as well. See you next week.