[MUSIC]. Well, welcome to week three of class. I'm glad to have you here. and this week, we're going to focus on learning how to draw on the canvas in simple GUI. I'll start this lecture off by explaining a little bit about how computers work, and how they organize the drawing process. We'll talk a little bit about the kind of coordinate systems you're going to use when you do the drawing. And then we'll just do really simple quick application in simpleguei. We'll open up a frame and we'll draw some on the canvas. Alright, we'll let's go to it. Okay, let's talk a little bit about how your computer works when it comes to drawing. So first thing we start with is we, what do we see, what do we see in a computer? Well, we have a monitor. And the monitor shows some kind of visual output from what the computer's doing. So, kind of the, kind of the thing to understand why you have a computer monitor is, you always see how it really corresponds to a 2D grid of pixels. Now you probably actually know this already because if you've gone out and bought, say, a high-def TV, the salesman's always bragging about well we have this TV and it's got 1920 by 1028 resolution. What that really means is what you're seeing on the screen is this kind of grid of millions of millions of little dots. And each of those dot has a color attached to it. So in a computer, this kind of 2D grid, 2D grid of pixels is kind of really stored logically in well, something called a frame buffer. You don't have to understand what a frame buffer is except that it's just kind of a data structure that keeps track of the values of the pixels that you see on the screen. So we kind of got something stored, that's what you see on the screen. So how does the computer actually then kind of make things move? Well, it goes through and it re-draws the contents of the frame buffer very quickly. so most monitors let's say computers then update the monitor based on the frame buffer. So just look at the frame buffer and it says, okay, what color should I draw the particular pixel? And this very quickly, at a rate around around 60 to 72 times a second. In fact, this is what's called the refresh rate. So you've probably gone through and, on your computer every now and then, kind of gone and done some kind of messing around with it and you've seen this thing called the refresh rate. It's really how often the computer is drawing the contents of the frame buffer on the actual screen. So if we want to go through and actually control what we see on the screen, well, we've got to kind of dig down and figure out how computers do this. So one typical way, especially in a vid-driven drawing, is that the application, each application or screen will have registered with it a special function called a draw handler. So many applications will register a special function called a draw handler. Now, when it's time to update, kind of the appearance of that applications on the computer screen, that means that the application will call the draw handler. The draw handler would then update the contents of the frame buffer. Then when the monitor redraws the screen, they'll take that update in contents. And actually you'll see some change on the screen. So the critical thing in this kind of driv, driven approach is, that we have a special function that takes care of drawing, and then that function is called. And it might be called very frequently, it might be called very infrequently, depending on how often kind of the contents of our application actually change. in CodeSkulptor, we're going to register the draw handler using a simpleGUI command that we'll learn. And then, once we've registered it, CodeSkulptor calls the draw handler at around 60 times per second. Now, what does this draw handler do? What the draw handler does, is the draw handler then updates the canvas, cause all of our drawings going to take place in CodeSkulptor, using a collection of draw commands. That include things like draw_text or draw_line, or something like draw_circle. Alright, so let's go on and talk about that. Before we do an example inside CodeSkulptor, drawing on the canvas, let's go through and talk a little bit about how we actually tell the computer where to draw things on the canvas. So to do that we're going to talk about canvas coordinates. So here you can see I've drawn a big rectangle. This is kind of the canvas that you would see where you're going to do your drawing. And this was created by I called a simpleGUI called simpleGUI.create.frame. And so remember the frame includes lots of things - a canvas is the portion on the right hand side. and you specified a width and a height for that canvas. So the width was kind of the horizontal size and pixel. And the height was the vertical size and pixels. So the kind of most critical thing you're going to do is you're going to need to specify a position on the canvas for where to do some drawing. So let's put a little dot where we want to do some drawing here, so let's say we want to do it there. And we need to give it a position, so what I'm going to do, is I'm going to specify it. It's a pair of numbers X and Y. Now I put them between square brackets. This is going to be python list here, but just for now just let's assume I always kind of put my numbers together with square brackets around them and I'd like to specify that position on the canvas. So we're going to use Cartesian coordinates. The numbers X and Y are going to represent two things. There going to represent the horizontal displacement, and the vertical displacement. So we have to figure out the displacement from where. So the one of the critical things to remember here is that we're working from the canvas and frames. The origin is always in the upper left. And that comes from the fact that, kind of TVs when they're first built, scan from left to right and then top to bottom. So it doesn't work he same way you saw kind of at high school geometry where the origin wasn't always in the lower left. The origin for our canvas is always going to be in the upper left. You'll see the system all kind of GUI systems. Okay, so how can we specify, then, a position X, Y? Well that's pretty easy, we start from the origin. And for the first corner at X, we go over, go over X pixels. And then, for the Y coordinate, we go down. How much do we go down? We go down Y pixels. So that then specifies a position on the, canvas, that we can then do drawing operations on. So let's go do an example in CodeSkulptor. So let's do an example of drawing on the canvas in CodeSkulptor. So here I've got a tab pulled up, I have a set of comments that kind of describe what I need to do. I've started off and ported simplegui, I'm really kind of four steps, I've got to define a draw handler. Have to create a frame. I should register the draw handler. And then I need to start the frame. Now we already know how to do this, so let's go ahead and fill that in real quick. we created a frame last week. I can set frame equal simplegui.createframe. [SOUND]. Let's call it maybe, test. And we'll give it, let's say, the width will be 300 pixels. And it's height will be 200 pixels. And then to get that frame to pop up, we're going to need to say, frame.starthere. Just run that, and make sure we did that right. And so, what did I do? I forgot to put a double quote there. Let's run it again. Good, good thing I tested that first before I started adding new stuff then. I have the canvas here. It's a 300 by 200 kind of black rectangle. So now let's draw some stuff inside it. So to do that I'm going to need to go over and figure out how to work with the canvas, and luckily the docs have some examples. So here we are at the canvas. There going to be two things we're going to need to do. We're going to need to register the draw_handler, and then we're going to need to make calls that use the canvas to kind of draw. let's look at the, the register. Because how we register, because I think there's something interesting you'll see here. So when we register the draw_handler, we give it as you set_draw_handler, that's fine. We give it the name of the draw_handler. But notice what the structure of the draw_handler should look like. remember how for input fields, we passed the text as a parameter into the event handler for the input field? Well here we're going to get past the canvas as parameter into the drawing handler. So now all the operations can actually, that we used to draw on the canvas can actually access the canvas. let's see, so what the heck, let's go down and look at one more. Let's look at how we draw some text. So we give it the canvas, we use the draw text method. We give it the text. We give it a position on the canvas. We have a font size. We give a color. So I think we've got enough to go and do things, so let's go try and do that. So I'm going to go through and say, I'll just call my draw handler, draw. Takes the canvases input and we're going to go through and say canvas.drawtext. And, we'll be very friendly and say hello and, let's see, where are we going to put it? Let's put it at 100, 100. And we'll do a font size will be 24 and we're going to need to give a color. So you can specify colors as HTML5 color strings. What that really means is just make a string with the code name of the color in it. So let's do white. And need to register the draw handler. So I go down here, and I say frame.setdrawhandler; I give it draw. I think that's good enough. Let's run it and see what happens. Very nice. So we now have, our canvas has that word Hello printed inside of it. I want to point out one thing here. this value 100, 100 here was interesting. That was the position on the canvas. It's a position where the string was drawn. You might ask one kind of interesting question. What was this position 100, 100 relative to where the string was drawn? So we could look, go look in the docks, but let's just do something else instead. Let's go through and just draw a little tiny circle wherever 100, 100 is, and that'll give us a kind of way to see what the position is, relative to where the string is drawn. So we'll say canvas.dotdrawcircle. We'll give it that position 100, 100. Let's give it a radius, make it a really small radius, and kind of the width of the circle is going to be very small, and let's make it, what the heck let's make it red. [SOUND]. And let's just fire that up, and see what happens. So, here, you can see the result. So 100-100 is right where this red circle is drawn. So it's the lower left hand portion of the string. And that comes across and it always lined strings up on the bottom of the, bottom of the page. Or on, on the, on the line. So we're going to specify the position for a string here, in terms of, kind of, the lower left position of where we want the string drawn on the canvas. So that's enough to kind of get you started, Scott's going to talk a little bit about doing some string processing cause that'll be an important part of your week three mini project. And then I'll come back, and I'll do another longer example of how to actually draw on the canvas. I'll see you in a coup-, see you in a sec.
