Quadratic and Bezier Curves

[Think Vitamin Membership, membership.thinkvitamin.com] 0:00 [HTML5 Canvas Quadratic and Bezier Curves with Jim Hoskins 0:07 In the previous video, we used arcs to add fixed-radius 0:13 curves to our shape. 0:16 Now we're going to create some more free-form curves by utilizing Bezier 0:18 curves and quadratic curves. 0:21 Now the two methods that allow us to draw more free-form curves 0:23 are called quadratic curves and Bezier curves. 0:26 In this demo I have both of them drawn out. 0:30 At the top we have what we call a quadratic curve. 0:33 And a quadratic curve is defined by a beginning point, 0:36 and ending point, and a single 0:39 control point. 0:42 Now the curves will normally be only this black line, but in this demo I've 0:44 highlighted both the control points, as well as the lines 0:47 to and from the start and control points. 0:50 So we define it by beginning a start and an end point 0:53 and a control point. 0:56 Now by manipulating this demo, you can see how the control point 0:58 affects the curve. 1:01 So if we pull the curve more down and towards the right, we 1:03 get this long beginning curve and then a short 1:06 tight curve towards the end. 1:09 You can see that our curve to begin with starts with the curve being very 1:12 parallel with the line being drawn from the beginning point to 1:15 the control point and then begins to diverge. 1:18 The same thing happens towards the end, and it becomes 1:21 more and more parallel to the point from the control point 1:24 to the ending point. 1:27 So a common use of a quadratic curve is maybe a corner in a box, 1:29 where you would normally have a right angle. 1:32 Now instead of drawing your lines all the way to the corner, 1:35 what you might want to do is draw your line almost to the edge 1:38 and start a curve and place your 1:41 control point right where the lines would intersect, and then place your ending 1:44 point some distance away from that point again. 1:47 This will give you a nice curved point, and 1:50 you can see how easy it is to define your points relative 1:53 to a normal corner. 1:56 Now let's look at the code that we use to create this curve. 1:59 Our quadratic curve starts like any other path with a 2:03 begin path call. 2:06 The I create a moveTo call that moves to a 2:08 start X and Y, which would be the first point in our curve. 2:11 Next, we call the quadtraticCurveTo method. 2:15 [.quadraticCurveTo(cpX, cpY, Y)] 2:18 This takes a control point, X and Y, 2:20 and an ending point, X and Y. 2:23 So the control point is this blue point right here, which will be 2:26 invisible in your actual curve, and your ending point will be 2:29 where your curve actually ends. 2:32 So the further that your control point is out 2:34 from the line drawn from your start to your end, 2:37 the bigger of a curve there will be. 2:40 Finally, we can just stroke it and we see our curve. 2:43 Now similar but different to our quadratic curve, 2:47 is what we call a Bezier curve. 2:50 It differs in that it has two control points-- 2:52 a control point for the beginning and a control point for the end. 2:55 So as we move the different control points around, 3:00 you can see that we have a different sort of curve evolving. 3:03 Again, you can see how the curve becomes more and more parallel 3:07 with the line drawn from the end point to the control point 3:10 or the start point to the control point. 3:13 That's really useful when you want to connect the two line segments 3:16 or two different shapes and have the curve 3:19 be parallel or perpendicular 3:22 to a certain point. 3:25 Let's say we had another corner. 3:27 We could do a similar thing where, if we had a line going 3:29 here and across, we could place our start 3:32 point on that line and our first control point 3:35 as an extension of that line. 3:38 So if our line was going to the right, we'd draw our control 3:40 point as an extension of that. 3:43 Then we can place our end point at the corner, 3:46 and if our ending line is going up and down, we can 3:49 place our second control point directly above 3:52 and that will create a nice angle. 3:55 But compared to the quadratic curve, we have a lot more control. 3:58 For instance, if we moved our control points much closer, 4:02 you can see we get a longer 4:05 section in the middle with a less tight corner. 4:08 You'll notice that we still--if we have 4:11 a line coming out from here--we still have our curve 4:13 be a natural extension of that line because it starts going off in the same direction 4:16 as the line instead of having some sharp corner 4:19 like it would if we were going from here down to here. 4:22 Now since we have two control points, we can create 4:26 much more complex shapes by manipulating 4:29 the control points into different directions. 4:32 With the quadratic curve we can only have really one curve. 4:35 We can adjust its sharpness in the different areas, 4:38 but you can't have it curve one way and then the other. 4:41 With a quadratic curve, we have all sorts of different options. 4:44 So for instance, we can curve down and then curve the other way. 4:49 This is great for maybe connecting two different shapes. 4:52 We can see the usefulness of a quadratic curve in this 4:56 example here, where we want to connect two different 4:59 divs together with a flowing line. 5:01 So in this case, I want our line to come out of the right side, 5:04 so I want it to appear that the wire is coming directly 5:07 out of the box. 5:10 So in this case, I put my beginning point right at the edge of the box here, 5:12 add a control point some distance out, but 5:15 directly out from the first point. 5:18 Similarly, the endpoint is right here, but the control point 5:21 for this exists somewhere out here. 5:24 So that allows us to create a line that appears to be going 5:26 directly into and out of our boxes. 5:29 Now with a little bit of change in the code, I can change how the two 5:32 boxes are connected. 5:35 Instead of the point coming out with a rightward direction, I can now 5:37 create a curve that goes this way. 5:40 So in this case, I still have my beginning point at the edge of the box, 5:43 but now my control point is downwards, creating a 5:46 downward-looking curve. 5:49 These curves can be integrated into any other shape. 5:51 If for instance, I began with a 5:53 moveTo to the origin of 00 5:56 and I instead draw a lineTO 5:59 the beginning point, and 6:02 at the end of our curve I draw a lineTo 6:05 600, 400, 6:08 we can see that we integrate a line with our curve. 6:13 So a line going from here to here/ 6:17 Then we can easily draw a curve and then continue drawing more 6:19 and more lines. 6:22 And the same thing can be done with our quadratic curve 6:29 and maybe even integrate it into a shape. 6:32 So here I've created a shape from 50, 100, 6:36 and then to our beginning point, a curve to our end point 6:39 and a line to another point, 6:42 and I close out the path. 6:45 If we flip over, we can see we now have a shape we can manipulate. 6:47 Now we've seen how to draw all sorts of different shapes using the canvas. 6:54 In the next video, we'll look at how to use transformations to make it eaiser 6:57 to draw shapes anywhere on our canvas. 7:00 [Think Vitamin Membership, membership.thinkvitamin.com] 7:03

You need to sign up for Treehouse in order to set up Workspace

Sign up