1 00:00:01,690 --> 00:00:05,230 OK, in this video, I'm going to show you how to draw a line on the canvas and we're not going to use 2 00:00:05,230 --> 00:00:06,970 the mouse right away in this video. 3 00:00:06,980 --> 00:00:11,440 I just want to show you how to draw a straight line on the canvas just to give you an idea of the coordinate 4 00:00:11,440 --> 00:00:14,350 system of the canvas and how to draw basic shapes. 5 00:00:14,570 --> 00:00:18,480 So to do that, we can just come down here and let's call our canvas. 6 00:00:18,480 --> 00:00:22,330 So my underscore canvas and we want to call the create line function. 7 00:00:22,330 --> 00:00:25,120 So let's create underscore line. 8 00:00:25,120 --> 00:00:27,510 And this is a function and this takes some parameter. 9 00:00:27,520 --> 00:00:32,830 So I'm going to call an X one Y one X too, and Y two. 10 00:00:32,830 --> 00:00:34,570 And we'll talk about what these aren't just a second. 11 00:00:34,810 --> 00:00:38,080 And then finally, we can call Phil and we can pick a color. 12 00:00:38,080 --> 00:00:40,600 What color does our line is our line going to be? 13 00:00:40,750 --> 00:00:41,780 Let's just call this red. 14 00:00:41,800 --> 00:00:47,290 So what are these X one and why one X two and Y two things? 15 00:00:47,320 --> 00:00:48,870 Well, these are coordinates. 16 00:00:49,000 --> 00:00:50,400 So think of your canvas. 17 00:00:50,410 --> 00:00:51,220 Actually, I've got a picture. 18 00:00:51,220 --> 00:00:52,000 Let me pull this up. 19 00:00:52,360 --> 00:00:55,040 Think of your canvas as an x y coordinate system. 20 00:00:55,210 --> 00:00:57,850 Now, this picture is a little bit off and I'll explain why in just a second. 21 00:00:57,850 --> 00:01:02,830 But if you think back to math class, if you remember back in grade school, you might have saw a coordinate 22 00:01:02,830 --> 00:01:03,940 system sort of like this. 23 00:01:03,950 --> 00:01:07,300 Now the y axis is up and down, right up and down. 24 00:01:07,450 --> 00:01:10,640 The X axis is left to right, horizontal, right. 25 00:01:10,870 --> 00:01:12,730 So this is X, this is why. 26 00:01:12,950 --> 00:01:16,750 So when we say X one, X starts at zero down here. 27 00:01:17,050 --> 00:01:17,440 Right. 28 00:01:17,710 --> 00:01:20,950 So if X was, say one hundred, then we'd be right here. 29 00:01:21,430 --> 00:01:24,400 Now, Y actually starts up here at the top. 30 00:01:24,400 --> 00:01:29,740 It does not start down here at the bottom like a normal sort of mathematical x y coordinate system. 31 00:01:29,920 --> 00:01:32,470 Y in a counter canvas starts at the top. 32 00:01:32,500 --> 00:01:34,510 So right here is zero. 33 00:01:34,620 --> 00:01:37,530 I know it says two hundred here, but this is actually zero. 34 00:01:37,690 --> 00:01:39,160 So ignore these numbers. 35 00:01:39,580 --> 00:01:40,600 Y is zero. 36 00:01:40,600 --> 00:01:42,730 So Y of zero would be a right here. 37 00:01:43,120 --> 00:01:44,890 Y of one hundred would be down. 38 00:01:44,890 --> 00:01:45,430 One hundred. 39 00:01:45,640 --> 00:01:46,420 Two hundred. 40 00:01:46,420 --> 00:01:47,110 Three hundred. 41 00:01:47,110 --> 00:01:47,980 Four hundred. 42 00:01:47,980 --> 00:01:48,220 Right. 43 00:01:48,640 --> 00:01:53,470 So for instance let's just create some, some coordinates here. 44 00:01:53,470 --> 00:01:59,590 So I'm going to do this, let's create these with variables X one, Y one just to show you this first 45 00:01:59,590 --> 00:01:59,980 time. 46 00:02:00,250 --> 00:02:03,490 So X x2 and Y to. 47 00:02:05,120 --> 00:02:09,410 Now, why this and why one x two and why two, why two sets? 48 00:02:09,650 --> 00:02:13,750 Because a line is has a starting point and a stopping point. 49 00:02:14,120 --> 00:02:17,960 So we need two points and that's what these are, x1 and X2. 50 00:02:18,110 --> 00:02:25,130 That's the starting point in the X ending point Y one and Y two are the Y starting point and the Y ending 51 00:02:25,130 --> 00:02:27,700 point and then counter will just draw a line between them. 52 00:02:27,740 --> 00:02:28,020 Right. 53 00:02:28,030 --> 00:02:36,290 So, so let's give this an X one of zero and a Y one of let's say one hundred and let's give this an 54 00:02:36,290 --> 00:02:41,600 X two of let's say three hundred and a Y two of one hundred. 55 00:02:41,610 --> 00:02:45,160 So X one of zero and Y one of one hundred. 56 00:02:45,170 --> 00:02:45,780 What would that be. 57 00:02:45,800 --> 00:02:46,460 Let's look at this. 58 00:02:46,460 --> 00:02:50,450 So X one of zero that's right here and Y one of one hundred. 59 00:02:50,460 --> 00:02:52,240 So we start at the top and go down one hundred. 60 00:02:52,250 --> 00:02:53,750 So that'd be right about here. 61 00:02:53,780 --> 00:02:54,090 Right. 62 00:02:54,770 --> 00:02:58,070 The next set would be over three hundred and down one hundred. 63 00:02:58,990 --> 00:03:05,430 So it would be over three hundred and start at the top, go down one hundred, so right about here. 64 00:03:05,440 --> 00:03:09,160 So we have a straight line going right across the top sort of part here. 65 00:03:09,160 --> 00:03:12,370 So let's save this and run it and see if that actually worked. 66 00:03:13,270 --> 00:03:14,710 The python picked up high. 67 00:03:16,240 --> 00:03:20,410 And here we go, we have got this line right across here, and that's all there is to it. 68 00:03:20,440 --> 00:03:21,430 We've created a red line. 69 00:03:21,430 --> 00:03:26,530 Now, if we wanted to make a cross, for instance, right down the middle, we could do that by simply 70 00:03:26,530 --> 00:03:28,410 adding another one of these. 71 00:03:28,900 --> 00:03:32,680 So I'm just going to paste another one in here. 72 00:03:32,980 --> 00:03:35,500 And let's move these let's get rid of these variables. 73 00:03:35,500 --> 00:03:37,270 Let's actually put them in here. 74 00:03:38,270 --> 00:03:48,380 So that would be zero one hundred three hundred one hundred, just so it doesn't confuse the second 75 00:03:48,380 --> 00:03:48,740 line. 76 00:03:48,920 --> 00:03:50,380 So what do we want the second line to do? 77 00:03:50,390 --> 00:03:52,450 We want it to go up and down and go right in the middle. 78 00:03:52,730 --> 00:04:01,940 So that's going to be something like, I don't know, one fifty over over 150 for X and down zero and 79 00:04:01,940 --> 00:04:03,170 then for X too. 80 00:04:03,170 --> 00:04:10,430 We want it to go like again over one fifty and then for Y to let's say, I don't know, two hundred. 81 00:04:11,120 --> 00:04:12,380 Let's save this and run it. 82 00:04:13,960 --> 00:04:19,750 And here we have our second line going right down the middle and we've got a little cross here, so, 83 00:04:20,110 --> 00:04:22,160 you know, this is not terribly important. 84 00:04:22,720 --> 00:04:27,670 I just wanted to show you how to draw a line because we're going to be using this create line with our 85 00:04:27,670 --> 00:04:30,520 mouse to draw lines with the mouse. 86 00:04:30,820 --> 00:04:32,050 But it's the same concept. 87 00:04:32,050 --> 00:04:38,370 We're passing these X and Y coordinates X one Y one, X to Y two. 88 00:04:39,130 --> 00:04:40,420 That's how we're drawing a line. 89 00:04:40,570 --> 00:04:43,630 And then we're giving a full color of some color. 90 00:04:43,840 --> 00:04:46,930 And that's how it has a color. 91 00:04:46,930 --> 00:04:47,200 Right. 92 00:04:47,220 --> 00:04:48,760 So really, that's all there is. 93 00:04:48,760 --> 00:04:49,990 Drawing lines, pretty simple. 94 00:04:50,170 --> 00:04:54,950 And that's sort of the building block foundation of how we're going to start drawing on this thing. 95 00:04:55,390 --> 00:04:56,020 So that's cool. 96 00:04:56,050 --> 00:04:58,480 So in the next video, we're going to start to bring the mouse into this. 97 00:04:58,480 --> 00:05:00,030 So we're not going to be drawing lines like this. 98 00:05:00,040 --> 00:05:02,530 We're going to be using our mouse and moving it around the screen. 99 00:05:02,710 --> 00:05:04,450 And we'll start to look at that in the next video.