How Bézier curves really, truly work

- [Instructor] All right, now, every once in awhile I'll get a question from somebody along the lines of, gosh, this is great information, but I'd like to know what's going on under the hood. Which is why I decided to create this movie. How Bezier Curves Really, Truly Work. Now, I'll warn you in advance that it contains the mathematical equation. And it's not just math, it's advanced algebra. And I know a lot of you don't have any interest in that whatsoever. But if you stick with me, I think you'll find that it's going to make sense. All right, so this is how things work in Illustrator, InDesign, Photoshop, any other Adobe applications. And so, once again we've got a curved segment, we've got a couple of Anchor points. We've got two Control handles. And these levers that connect the Control handles to the Anchor point. And they are going to become very important to this discussion. And this is true for any application that supports cubic bezier curves. And so, here is that dreaded equation that I was talking about. Now, the most important item is P, which represents the coordinate position of the points. Including the Anchor points, the Control handles, and all the points along the curve. So here's how it works. This guy right here, Pi, i equals zero in the case of the first Anchor point. One and two in the case of the Control handles. And three for the second Anchor point. And so, imagine just for a moment that P0 and P1 were coincident. That is to say, there is no Control handle. And P2 and P3 are coincident as well. In other words, there's no Control handle over here. In that case, we get a straight segment. How about if we have just one Control handle, the one that is actually numbered one. In that case P2 and P3 are coincident. And that results in flatness in the curve. Which is why you never want this. The rule of thumb is that you get great curvature if you have two Control handles for a segment. Or you get no curvature, you get a straight segment, if you have no Control handle. But you never want one for a segment. And I'll go into more detail about that in the next chapter. But for now, just know that's the case. All right, so, for those of you who don't have the vaguest idea what's going on with this equation, I've gone ahead and factored it out here, which might help some of you. The reason I've done this is because I want you to see that t minus one is cubed at a point. And t, the variable t, is cubed as well. Hence the fact that we're working with cubic bezier curves. All right, now, the t in Pt is time. And so, we're calculating the curve over time. And this t variable can be greater than or equal to zero, and less than or equal to one. In other words, it goes from 0% to 100%. And it ends up looking like this in 10% increments. And that's what Pt is all about. Hence the curve. The problem is, however, that for some of you I'm just not going to make this equation make sense. After all, we are graphic designers, not mathematicians. Which is why I'm going to show how things work graphically. And so, let's start knowing that this is the motion of the path. Going from point one to point three. And we have visible Levers connecting the Control handles to their Anchor points in the form of Levers 1 and 3. But there also happens to be an invisible Lever 2 that connects the two Control handles. And that brings us to what I call the 3-2-1 rule. So, imagine that we have three time dots, which I've color-coded orange, and they start at the first Anchor point as well as the two Control handles. And then they travel along the Levers. And so, let's imagine the variable t is 0.3, which means we're 30% into things. And so the dots have traveled 30% the way over their Levers. And so this guy's moved farther, because his Lever is longer. Then what we want to do is connect these dots with time lines. All right, next we have the tangent dots, which are also 30% the way in. And so this guy, which I've color-coded green, has moved 30% its way in the time line. And so has this one. And next we want to connect those two dots with a tangent line. And then finally, the one in the 3-2-1 rule is the bezier dot, which I've colored blue. And it's moved 30% the way on its tangent line. And that tells us the location of the curve at 30% the way in. And there it is at 50% traveling along. And there we see it at 80%. And that's how I figured out these 10% increments with the orange time lines and the green tangent lines. And that, folks, is how bezier curves really, truly work, across Illustrator, InDesign, Photoshop, and any other application that supports the cubic variety of bezier curves.