1 00:00:01,740 --> 00:00:06,150 OK, in this video, we want to start to bring together the two things we've already learned, creating 2 00:00:06,150 --> 00:00:07,950 lines and using the mouse. 3 00:00:08,200 --> 00:00:14,760 So I'm going to start out by commenting out our two cross lines that we created earlier. 4 00:00:15,150 --> 00:00:21,150 And now whenever we click the mouse button, as we learn in the last video and move the mouse, we're 5 00:00:21,150 --> 00:00:22,920 going to run this paint function. 6 00:00:22,920 --> 00:00:25,800 And right now, all we're doing is changing the color of this to black. 7 00:00:25,800 --> 00:00:26,460 And let's get rid of this. 8 00:00:26,460 --> 00:00:27,840 We don't actually want to do that. 9 00:00:28,080 --> 00:00:29,690 What we want to do is start to draw. 10 00:00:29,700 --> 00:00:33,570 So let's copy this whole line here and just paste it in. 11 00:00:35,020 --> 00:00:46,120 And let's comment this draw on the canvas now, I'm going to change this back to X one, Y one. 12 00:00:47,450 --> 00:00:52,830 X two and Y two, and for now, we're just going to keep this is red. 13 00:00:53,370 --> 00:01:03,410 Now let's come up here and define our X1 and our Y one and R X two and Y two. 14 00:01:05,420 --> 00:01:15,160 And let's say starting exposition or let's just say starting position and let's call this ending position 15 00:01:15,170 --> 00:01:20,350 so it's a good idea to comment your code, I always forget, but try and do it here. 16 00:01:20,360 --> 00:01:26,480 Now, remember, we're passing an event in here and the event happens to be wherever the mouse is. 17 00:01:26,630 --> 00:01:31,740 So as we're moving the mouse around, because this is B one motion, right? 18 00:01:31,970 --> 00:01:36,710 Motion is movement as that's moving around, where is it on the canvas? 19 00:01:36,950 --> 00:01:39,860 Well, this E keeps track of it for us. 20 00:01:40,130 --> 00:01:49,580 So we can we can call positions by just calling E dot x the exposition of the event or. 21 00:01:50,860 --> 00:01:53,050 We can go e y. 22 00:01:54,230 --> 00:01:56,540 And we can do the same thing down here, IDEX. 23 00:01:58,250 --> 00:02:07,850 And E, why these correspond, so this is why four Y, two X, four X to eat out, Y for Y one, X for 24 00:02:07,850 --> 00:02:08,330 X one. 25 00:02:08,330 --> 00:02:12,890 So X goes with X, Y goes with Y, but this needs to be slightly different. 26 00:02:12,890 --> 00:02:17,900 So our starting position, we want whatever position it is, minus one. 27 00:02:18,710 --> 00:02:19,090 Right. 28 00:02:19,490 --> 00:02:22,850 And same thing for y we want whatever position is minus one. 29 00:02:23,360 --> 00:02:26,960 And then when we move it to its final position we want to add one. 30 00:02:28,490 --> 00:02:29,660 There we go, add one. 31 00:02:30,650 --> 00:02:38,900 And that will help us sort of say it started here and ended here, but minus one as it moves because 32 00:02:38,900 --> 00:02:39,860 as we're moving it. 33 00:02:40,990 --> 00:02:46,150 It moves and it creates one, so we want to subtract that one that we just moved and that's how we get 34 00:02:46,150 --> 00:02:48,020 the starting point, if that makes sense. 35 00:02:48,150 --> 00:02:49,600 And same thing with the ending point. 36 00:02:49,600 --> 00:02:53,770 When we get to the end, we want to add one and add one for the X and the Y. 37 00:02:54,010 --> 00:02:59,320 So now if we kind of just save this and see what we've got here, come back over here and run this thing 38 00:02:59,320 --> 00:02:59,730 again. 39 00:03:01,820 --> 00:03:07,130 So I'm going to click and start to move, and when I do, I can draw. 40 00:03:08,150 --> 00:03:10,280 I'm holding down the mouse button. 41 00:03:13,960 --> 00:03:20,620 As I do it, and it's very small, so it looks kind of jagged and stuff, and we can give this some 42 00:03:21,190 --> 00:03:22,450 other parameters here. 43 00:03:22,450 --> 00:03:25,030 So if we look at our code, we've just got this. 44 00:03:25,030 --> 00:03:26,520 Phil equals red. 45 00:03:26,770 --> 00:03:30,210 We can change this and we can also add smooth to equal. 46 00:03:30,380 --> 00:03:31,150 True. 47 00:03:31,470 --> 00:03:33,500 This will help smooth it out a little bit. 48 00:03:33,770 --> 00:03:38,800 It might still be too small yet to notice that, but let's run it again just to see. 49 00:03:40,220 --> 00:03:42,080 Here, I'm going to click the button and hold. 50 00:03:44,950 --> 00:03:50,590 It's a little bit smoother, but it will become more apparent as we change the brush size and make this 51 00:03:50,590 --> 00:03:52,090 bigger, which will do pretty soon here. 52 00:03:52,100 --> 00:03:54,370 So that's it, we're done. 53 00:03:54,370 --> 00:03:56,890 We've now created something that allows us to draw. 54 00:03:56,890 --> 00:04:02,110 The rest is just sort of changing parameters to make it bigger or smaller, change the brush size, 55 00:04:02,350 --> 00:04:07,360 change the color, change the width of the brush itself. 56 00:04:07,690 --> 00:04:10,150 And really, that's that's pretty easy. 57 00:04:10,150 --> 00:04:11,650 That's the easy stuff, right. 58 00:04:11,980 --> 00:04:14,500 The hard stuff is this. 59 00:04:14,500 --> 00:04:16,600 And we just did it and it wasn't hard at all. 60 00:04:16,900 --> 00:04:20,590 And the hardest thing is sort of wrapping your brain around this. 61 00:04:20,770 --> 00:04:26,230 But if you start to think about the the grid system and the positional system, this will make more 62 00:04:26,230 --> 00:04:30,390 sense if it doesn't just say, OK, this is just how you do it. 63 00:04:30,400 --> 00:04:30,800 Right. 64 00:04:31,090 --> 00:04:34,420 You take your beginning position for X, subtract one. 65 00:04:34,780 --> 00:04:37,630 And when you and when you end, you add one back on. 66 00:04:38,050 --> 00:04:40,240 And that's just how it works. 67 00:04:40,240 --> 00:04:40,490 Right. 68 00:04:40,720 --> 00:04:45,850 And again, here we're just passing then these variables into our position here. 69 00:04:45,850 --> 00:04:50,110 Just like when we created our straight lines, we had one x one. 70 00:04:50,110 --> 00:04:51,580 Why one X two? 71 00:04:51,580 --> 00:04:55,240 And why do something here X one, Y one, X, do Y two. 72 00:04:55,510 --> 00:04:56,500 And that's all there is to it. 73 00:04:56,500 --> 00:04:57,940 So that's all for this video. 74 00:04:57,940 --> 00:05:04,360 In the next video, we'll start to add some different things to this to make it bigger size and different 75 00:05:04,360 --> 00:05:05,590 brush types and things like that. 76 00:05:05,740 --> 00:05:07,570 And we'll start to look at those in the next video.