1 00:00:00,660 --> 00:00:06,090 Will come back again in this lesson we're going to use a combination of the things that we learned in 2 00:00:06,090 --> 00:00:11,280 the past few lessons as well as the things that we learned when we were dealing with touches and gestures 3 00:00:11,610 --> 00:00:14,890 to make a busy path curved. 4 00:00:14,910 --> 00:00:18,630 So let's first have an understanding of what that actually is. 5 00:00:18,630 --> 00:00:24,630 If you do a quick Google search on bezier pads you will end up with results such as these ones which 6 00:00:24,630 --> 00:00:26,450 are essentially curves. 7 00:00:26,560 --> 00:00:32,670 I think such as this one that they have control points that those control points essentially decide 8 00:00:32,670 --> 00:00:34,720 about the curvature of the curve. 9 00:00:34,920 --> 00:00:42,180 If you're familiar with software such as Adobe Photoshop or Adobe Illustrator or any 3D software you 10 00:00:42,180 --> 00:00:48,750 probably have seen these kind of controlled cherub's a lot of times and that's essentially what you're 11 00:00:48,750 --> 00:00:51,410 going to do in this application. 12 00:00:51,420 --> 00:00:58,080 Now before I jump into coding I want to actually show you the final outcome which is a curve like this. 13 00:00:58,080 --> 00:01:03,540 So I have a little control point which is a circle and that circle has a direct line to the beginning 14 00:01:03,540 --> 00:01:04,470 of the curve. 15 00:01:04,590 --> 00:01:11,380 And I can actually control the different portions of the curve or the curvature of the curve using that. 16 00:01:11,490 --> 00:01:18,070 Now in my example I'm only controlling one side of the curve and I leave it to you to find out you know 17 00:01:18,090 --> 00:01:24,720 how you could switch between different corners and for every point or what we call every knot on the 18 00:01:24,730 --> 00:01:27,960 curve you could have different controls. 19 00:01:27,990 --> 00:01:30,990 So that's essentially the goal of the lesson. 20 00:01:31,050 --> 00:01:33,930 And as you can imagine we have to draw the curve. 21 00:01:34,020 --> 00:01:38,440 We have to draw the straight or the direct line and we have to draw the circle. 22 00:01:38,610 --> 00:01:42,570 So with all of that in mind let's get thought that in court. 23 00:01:42,630 --> 00:01:48,670 So I'm going to go in here say I have a busy a curve. 24 00:01:50,410 --> 00:01:56,420 And in here just like the last time I'm going to do everything inside the one you view. 25 00:01:56,530 --> 00:02:02,620 I'm not going to add anything into my actual view controller so I'm actually going to close this one 26 00:02:02,620 --> 00:02:11,220 down and I'm going to have a class which is this Colyandro view just like the last time you live you 27 00:02:11,620 --> 00:02:18,640 and it has a function that you're overriding called draw and that's the part that really matters to 28 00:02:18,640 --> 00:02:19,260 us. 29 00:02:19,270 --> 00:02:24,300 So let's go ahead and start with the right thing different things that we need for here. 30 00:02:24,310 --> 00:02:30,120 The first thing I'm actually going to write is essentially drawing that little circle to do that. 31 00:02:30,130 --> 00:02:37,850 I'm going to go ahead and say let's get ourselves a point let's call this fun or QUANTRILL point or 32 00:02:38,030 --> 00:02:39,640 handle point. 33 00:02:39,970 --> 00:02:47,610 So time that point becomes a C.G. point and I'm like give it an initial value of let's say the initial 34 00:02:47,610 --> 00:02:53,280 one is out of 100 and hundred fifty somewhere around here. 35 00:02:53,280 --> 00:02:54,520 At the very beginning. 36 00:02:54,670 --> 00:02:57,330 So I have those two values taken care of. 37 00:02:57,490 --> 00:03:00,100 Then in my draw I'm going to get a context. 38 00:03:00,100 --> 00:03:07,900 I'm going to say let context to be your graphics card and context you could of course when you fled 39 00:03:07,940 --> 00:03:12,770 but I know that context is going to work within the drawing so I don't need to really do that. 40 00:03:12,910 --> 00:03:18,710 And then I'm going to get myself a an ellipse or essentially a circle based on here. 41 00:03:18,880 --> 00:03:28,590 So I'm going to say context dot filled lips and that's going to be a CGU raked hand that seizure is 42 00:03:28,600 --> 00:03:29,650 going to be. 43 00:03:29,830 --> 00:03:34,840 Let's go ahead and say he's got X light weight and height. 44 00:03:34,930 --> 00:03:42,700 I'm going to say X and Y if he's going to be over this handle point is it's 100 point x 100 point that 45 00:03:42,700 --> 00:03:43,250 y. 46 00:03:43,510 --> 00:03:51,600 And let's give it a man 1 or a static width and height of let's say 20 20 units or 20 and 20 point zero. 47 00:03:51,790 --> 00:04:00,140 And then the next thing that I want to remind you is that these two values are quietly on the left corner 48 00:04:00,160 --> 00:04:03,950 or the top left corner of of the ellipse. 49 00:04:04,000 --> 00:04:07,310 So it helps if you subtract half of it from it. 50 00:04:07,330 --> 00:04:09,120 So they become the center. 51 00:04:09,270 --> 00:04:12,460 So I'm going to say minus 10 and there's an error in here. 52 00:04:12,520 --> 00:04:14,540 Oh Dot why. 53 00:04:15,800 --> 00:04:18,340 Ten point zero. 54 00:04:18,440 --> 00:04:25,430 So this essentially makes sure that my circle instead of being drawn from the top left corner of the 55 00:04:25,430 --> 00:04:31,940 handle point is drawn on top of the handle points with a handle point becomes the center of it. 56 00:04:31,940 --> 00:04:34,950 Now I also have to set the color for this. 57 00:04:34,950 --> 00:04:40,940 I'm When I say context Dart said fill color and I'm going to say give it to you. 58 00:04:40,940 --> 00:04:46,130 I corner dot Orange that was orange wasn't it. 59 00:04:46,130 --> 00:04:48,970 Yes orange dot color. 60 00:04:49,040 --> 00:04:54,560 Not that it really matters but I thought it would be better if you were consistent with the original 61 00:04:54,560 --> 00:04:55,110 design. 62 00:04:55,280 --> 00:04:59,320 So by now we should be able to see at least that little circle. 63 00:04:59,420 --> 00:05:06,610 And the way you can test this just like the last time I can go to my main storyboard have a view and 64 00:05:06,630 --> 00:05:09,850 then drop this you I view may be around here. 65 00:05:10,210 --> 00:05:13,180 I'm going to give it a little bit of a different background color. 66 00:05:13,760 --> 00:05:19,800 And I'm going to say it's class E's draw we'll just like the last time we had done it. 67 00:05:19,970 --> 00:05:24,100 And let's go ahead and run this application. 68 00:05:24,130 --> 00:05:28,780 So now we have that little orange circle showing up somewhere in the screen. 69 00:05:28,780 --> 00:05:35,170 But obviously it's not really doing anything for us because we haven't really managed that part just 70 00:05:35,170 --> 00:05:35,650 yet. 71 00:05:35,650 --> 00:05:41,120 So to do that but I'm going to do is I'm going to go ahead and add a touch move method. 72 00:05:41,290 --> 00:05:47,800 So I'm going to go to my draw of you or my drawing class essentially and I'm going to say touches move 73 00:05:48,550 --> 00:05:51,100 and that's a function of the UI kit. 74 00:05:51,100 --> 00:05:53,990 So it's also within the body of the class. 75 00:05:54,100 --> 00:05:55,990 So it has to be overridden. 76 00:05:55,990 --> 00:06:02,560 So I'm going to say if the touch has moved beyond anything that you might want to do here is one thing 77 00:06:02,650 --> 00:06:11,280 I know I have to do and that is self which is the same drove you not set and needs display. 78 00:06:11,470 --> 00:06:16,240 So I have to tell him that hey something has changed redraw. 79 00:06:16,600 --> 00:06:18,960 That's the most important part right now. 80 00:06:18,970 --> 00:06:24,280 The other thing that they want to do is I want to say well when you're redrawing changed his handle 81 00:06:24,280 --> 00:06:36,070 point to where ever I am so I'm going to say handle point becomes touches dart first dart location in 82 00:06:36,240 --> 00:06:41,850 view and the location I'm looking for is within here within self itself. 83 00:06:42,040 --> 00:06:45,660 Now I might get an error for the option on my other in here. 84 00:06:45,820 --> 00:06:47,650 And that's that's perfectly fine. 85 00:06:47,650 --> 00:06:55,000 So they have to do is I have to say this is definitely an existing location because this touch has landed 86 00:06:55,230 --> 00:07:03,270 within this view simply because I am inside the same draw of view and I'm inside an instance of that. 87 00:07:03,430 --> 00:07:05,930 So let's go ahead and check this one out. 88 00:07:07,480 --> 00:07:12,700 And now if I touch I can actually carry around that object to me. 89 00:07:12,890 --> 00:07:18,150 Now this is an important distinction and sometimes I've seen a students are struggling with it. 90 00:07:18,200 --> 00:07:24,230 You have to understand that this isn't the same stance of of a circle that it was before. 91 00:07:24,440 --> 00:07:30,420 Every time we move we redraw the scene so dysfunction gets a recall. 92 00:07:30,530 --> 00:07:36,300 So everything gets cleared out and at least another group of objects they get drawn back. 93 00:07:36,320 --> 00:07:41,060 So it's a redrawing of the scene is not the same distance anymore. 94 00:07:41,150 --> 00:07:45,940 So you have to be very careful about not supporting anything within the body of the draw. 95 00:07:45,950 --> 00:07:52,130 It is not the same as using an instance of a of a view for instance. 96 00:07:52,190 --> 00:07:56,870 So now you have that taken care of and we have the drawing we have the first circle. 97 00:07:56,990 --> 00:07:59,020 Let's go ahead and draw our. 98 00:07:59,120 --> 00:08:02,030 So far I'm going to say let's pass. 99 00:08:02,030 --> 00:08:06,650 Just like the last time you a busy airport just like the last time. 100 00:08:06,740 --> 00:08:12,950 And I'm going to say Pat Dodd line it or it's let's make it five this time. 101 00:08:12,950 --> 00:08:19,750 I'm also going to have to give it a color so I'm going to say you're white color dot black for instance 102 00:08:20,180 --> 00:08:22,400 dot set a stroke. 103 00:08:22,460 --> 00:08:25,250 So that becomes the color of the pants. 104 00:08:25,670 --> 00:08:30,380 And then I'm going to say pants doth move to point. 105 00:08:30,380 --> 00:08:32,500 Let's move it to somewhere. 106 00:08:32,720 --> 00:08:42,920 C.G. point of I think locations such as I don't have that up anymore but I think somebody like maybe 107 00:08:42,960 --> 00:08:49,680 a hundred and a hundred would do because my handle appointee's at a hundred and hundred fifty so that 108 00:08:49,700 --> 00:08:51,390 stuff somehow working for me. 109 00:08:51,570 --> 00:08:57,350 So I moved it there and then I'm going to go ahead let me get myself a little bit better space in here. 110 00:08:57,360 --> 00:08:59,330 So you know what you're working on. 111 00:08:59,820 --> 00:09:02,450 And then I'm going to go ahead and say pass. 112 00:09:02,700 --> 00:09:07,480 Not that not linear line. 113 00:09:07,540 --> 00:09:17,520 I'd quite careful to eat to the point that I want to add to it is let's say C.G. point of three hundred 114 00:09:18,660 --> 00:09:29,370 and three hundred and a control point is the sky pandal point what we have done is we have drawn a new 115 00:09:29,400 --> 00:09:30,360 bezier path. 116 00:09:30,370 --> 00:09:39,870 But this time it is a curved one and it starts at 100 hundred and it ends at 200 and 300 and it has 117 00:09:39,870 --> 00:09:43,540 this object in the middle of feet as the control point for it. 118 00:09:43,590 --> 00:09:48,200 And of course we have to do a path stroke at the end so path is stroke. 119 00:09:48,290 --> 00:09:49,810 Now let's run this code. 120 00:09:49,830 --> 00:09:58,600 Now I now if I try to move that little circle every time I do it it's going to redraw itself. 121 00:09:58,650 --> 00:10:03,030 It's going to redraw the curve between that point and this point. 122 00:10:03,030 --> 00:10:07,680 But with this control vertex and that is exactly what you wanted. 123 00:10:07,700 --> 00:10:10,170 Well they did have into regional design. 124 00:10:10,170 --> 00:10:16,780 I had a little care at direct one going between the starting point of the curve and the circle. 125 00:10:16,910 --> 00:10:22,920 So actually going to go ahead and add that one as well which is the easiest part of all I would say 126 00:10:22,920 --> 00:10:32,720 let's pass or actually have used power before so let's call it let's let direct part be a few busy parts 127 00:10:33,960 --> 00:10:35,450 just like the last time. 128 00:10:35,610 --> 00:10:39,750 And then I'm going to be able to copy a lot of this stuff so 129 00:10:42,630 --> 00:10:51,000 let's make it one and then DeCarlo let's may create a green maybe so we can see it is here and then 130 00:10:51,000 --> 00:10:57,510 I'm going to say direct parts move it to exactly the same place because we have to start it from that 131 00:10:57,510 --> 00:11:06,210 place and then I'm going to say direct parts add the line but the line we want to do want to add it 132 00:11:06,210 --> 00:11:07,800 to the handle point. 133 00:11:07,800 --> 00:11:14,610 So we want to always go between the starting point and the underlying point which is the handle point 134 00:11:14,610 --> 00:11:16,590 end point which is the handle point. 135 00:11:16,590 --> 00:11:20,180 And of course I have to say that the. 136 00:11:20,400 --> 00:11:25,860 Just so I can make things a little bit easier for myself and perhaps for you I'm actually going to put 137 00:11:25,950 --> 00:11:31,770 these two values at the point of the beginning and the ending into two variables. 138 00:11:31,880 --> 00:11:41,650 So I'm going to say let the starting point to be a CGU point of and the value for it is this. 139 00:11:41,660 --> 00:11:44,070 That is the value for it. 140 00:11:44,100 --> 00:11:45,440 So that's one. 141 00:11:45,780 --> 00:11:50,760 And I'm going to say ending point is going to be. 142 00:11:50,920 --> 00:11:53,190 It's easier to get like this. 143 00:11:53,190 --> 00:11:54,980 Two hundred and three hundred. 144 00:11:55,140 --> 00:11:58,150 So I'm going to start between this starting point. 145 00:11:58,200 --> 00:12:06,540 So they both start at the same starting point and one of them at the quad the one the one that is actually 146 00:12:06,690 --> 00:12:12,310 curve that 20 is going to be ending at the end point with this control point. 147 00:12:12,480 --> 00:12:15,900 And this one ends at the handle point itself. 148 00:12:15,900 --> 00:12:22,290 Let's go ahead and read on this application and if it all works we should be able to see what we have 149 00:12:22,290 --> 00:12:27,750 at the very beginning which is exactly like the. 150 00:12:27,900 --> 00:12:35,310 So that's it may change a bezier a chair shape line and we cover the local Afghans in it. 151 00:12:35,310 --> 00:12:39,300 We redid some of our graphics context. 152 00:12:39,330 --> 00:12:41,330 We did another direct part. 153 00:12:41,330 --> 00:12:49,740 We did a curved path and we also added the touches moved within the body of a of a view which is really 154 00:12:49,740 --> 00:12:51,230 helpful at times. 155 00:12:51,270 --> 00:12:55,250 So let's keep it up to here and we'll move on to our next lesson.