Drawing Quadratic Curves (Q, T Commands)

[00:00] We’re going to move our pen to 10 by 10 and we’re going to create our first quadratic curve. Quadratic curve takes two sets of x and y coordinates. The first one is what’s called a control point and the second one is where do we want our curve to end. So we’re going to set our control point to a 10 by 100. We’re going to set our end point to 100 by 100 and we can see our curve there. Now just to illustrate what’s happening with this control point, I’m going to set our x on the circle to 10 and our y to 100 and our radius to 3 and now we can see this little circle here. So here’s our starting point at 10 by 10 and here’s our ending point at 100 by 100. So our curve is always going to go between those two points and this control point, the way I think about it is that it’s pulling this line towards this point in space. And we can see if we move that to say 10 by 200, we’ll move this guy as well. We can see how it creates a very different curve, but our starting and end points are the same.

[01:13] Now the quadratic command has a helper function or a helper command called T. I have no idea why it’s called T, but it stands for a smooth quadratic curve too. And what this will do is create a reflection of the previous control point. So we’re just going to go ahead and give it the end point, which is all it requires. So we’re going to say 200 by 200 and we can see that there, but just to illustrate somewhat what’s happening here, where this reflection is. Wrong spot. Reflection control point is somewhere right around here. It’s probably not equal on the Y coordinate, but something like that. So you can see our starting point is about here where other curve ended. And our end point is over here where we told it to end at 200 by 200. And that implied reflection control point is about right here. And you can see how that seems like it’s kind of pulling this curve that way, whereas this one is pulling this curve that way.

[02:14] Okay. So of course we’re using the capital Q and capital T commands here, which means they are absolute. And if we change our starting position, everything is going to get a little weird. So let’s go ahead and let’s copy this guy, comment these out for right now. And we’ll take a look at the relative version of this command. So it’s going to be a lowercase queue. And if we look here, we were going to 10 by 100. So to relatively get there from this preceding point, we’re going to say zero on the X because we’re not changing on the X and we’re going to say 90 on the Y. So that’s our control point relative to our starting point. Now our end point is also going to be relative. So we’re going to say 90 on the X and 90 on the Y, and that should give us our curve. I’m going to go ahead and let’s see, we’re going to bring back one of these circles, this guy here, so that we can see our control point. And then we’re going to go ahead and finish up with our T command. So here we can see we’re at 100 and 100 and we went to 200. The vital piece of information there is that relatively we moved to 100 pixels. So I’ll just say T 100 and 100, save that. And we can see we’ve recreated that curve. I’ll drop these circles back in so we can see our control points. And I’ll even drop this guy back in to show that we can now move this. We’ll go ahead and move it on the Y axis. And you can see that we can move this around or change our starting point and keep the curve intact.