Learning to Code with Python: Lesson 2.1 Creating Computer Graphics

Key Takeaways

Welcome back to learning to code with Python. This time we start on chapter two talking about computer graphics and animation. So far the programs we've written have just used simple print statements to output words to the screen. But what if we want to create something that has graphics? Remember the computer's display is made up of tiny little dots called pixels. Lots and lots of them. For example, the computer I'm using to make these videos has 1,920 pixels across and 1,050 pixels from top to bottom. If we multiply these two numbers together, that's over two million pixels. Imagine if we had to write our program and keep track of every single little pixel on the screen. Which ones are on, which ones are off, what color each one is, and every time we wanted something on the screen to change we had to know exactly which pixels to change. Programming would be very, very difficult. Fortunately, we don't have to do that. Thanks to some other programmers that have created things called graphics libraries to help us out. There are many different graphics libraries out there that you can use. The one that we're going to use is built into Python. You don't need to download anything extra. It's called the TK interface. So let's switch over to our idle window and start coding. The first thing we're going to need if we want to draw on the screen is we need to make a window to draw in. So first let's import TK. TK inter stands for TK interface. This import statement might look a little different from the ones we've used before. That's because the TK interface library has many different commands and tools in it. You can import the ones that you're going to use and leave out the ones that you're not going to use. But for this example, we're going to use this asterisk asterisk here, which tells the computer to import everything from the TK library. All right. Now, to create our window, we're going to need four lines of code. We need to start a TK object. This actually initializes the TK system, starts it up so that we can start using it. And then we're going to make a canvas, which is going to be the thing that we're going to draw on. And the canvas is going to have a width of 500 pixels and a height of 400 pixels. And then let's go ahead and set the uh title of the window. We're going to say drawing. This will be the title that goes up here at the top of the window. And then we say canvas.pack to actually tell it we're done with the settings, actually create that window and show it up on the screen. If we ran this program now, we would see the window appear and then right away it would disappear again because we got to here and that's the end of the program. We'd like to have the window stay up. So, for right now, while we're not doing anything else, we're going to put canvas.main loop, which does tells the computer to just wait and show the screen and don't do anything else and don't end. Okay, so let's try running it. So, I'm going to save this as TK example. And then we can run it. And what you should see is a window that looks something like that. There's our canvas that's 500 pixels wide and 400 pixels tall and it has the title drawing. Now we have the canvas window. It may not seem very exciting yet, but now we have a place where we can draw. What can we draw? Well, to start with there are some handy commands for drawing basic shapes. Before we do that though, let's talk about coordinates. The TK coordinate system is a little bit different from the one we used with turtles earlier in the series. TK follows the same setup that just about all graphics libraries in programming use. So if this is our canvas window, then as you would expect, this is the X axis and this is the Y axis. Now in your math class, you may be used to drawing your axes like this and this is the X axis and it gets bigger as it goes this way and this is the Y axis and it gets bigger as you go up. Well, in computer graphics, we start things a little differently. This is the This would be the origin right here. So this is 0,0. And X gets bigger as you go to the right, but Y gets bigger as you go down from the top. So this over here in our example window would be 500 X and 400 Y. So it's flipped from the way you're used to drawing it in math class. But the nice part about this is that there's no negative numbers. Y just goes from 0 to however tall our window is and X just goes from 0 to however wide our window is. So using those coordinates, we can tell the computer where we want things to be in our canvas window. So if we draw want to draw a line, we just have to tell it this point and this point and it will figure out all the pixels that need to be changed to connect those two points. So, let's try that out. So, let's try drawing a line. So, we'll put this before the main loop. The command is canvas.create line. And in order to create a line, we need to tell it those two points to connect the line. So, first we'll tell it where to start. So, how about we say 0 0 and where we want it to end. So, we'll put 500 400. Right? So, that should create a line all the way from this top left corner to the bottom right corner. And if we run it, that's what we should see. Like that. A couple other commands to create simple shapes are we can say canvas.create rectangle. Well, this one works just like a line. If we give it two points, it'll just draw the rectangle that those two points make the diagonal of. So, for example, if I said to draw from 100 {comma} 100 to 200 {comma} 250, then it should draw a rectangle between those two points. Like that. And we can also do something like this where we can say fill equals and give it a color and it'll fill in that shape with whatever color we say. Like that. So, there's no command for create square. If you want to create a square, you just need to make sure you make a rectangle that's the same width and height. So, if I make the width from 100 to 250 and the height from 100 to 250, that would be a square. The next command is create oval. Now, create oval works a lot like create rectangle. If you give the computer two points like this, then if you imagine the rectangle that would connect those two points, then the computer's going to draw the oval that fits inside that rectangle. Okay? And again, if you wanted it to be a circle, you would just need to make sure that the width and height were the same. So, let's just draw one up in the corner. So, we'll start it up in the corner and we'll make it go to uh say 300 pixels wide, but we'll only make it 50 pixels tall, and we'll fill it with green. So, that'll give us a really wide oval, like that. But, if we wanted it to be more circular, we would just change so that the dimensions are the same. Like that. And we can even draw more complicated shapes using the create polygon command. And with that one, we can give any number of points. So, any number of points on the screen, and the computer will try and connect them up to make a polygon. So, for example, if we wanted to draw a triangle, we need three points. So, do one up towards the top, we do one towards the bottom, and another one to the right of that towards the bottom. And let's say we fill it with purple. Then the computer will connect those three dots and make a triangle. So, it's not easy, but if you wanted to draw a really complicated many-sided shape, you could figure out which points you wanted to use. We'll do one more example before we wrap up this video. And let's say we wanted to do a bunch of random rectangles all over the screen. Well, we can import random so that we can use the random commands. And then we can say for I in range 100. Right? We need four random numbers, right? For the two opposite corners. So, we could say X1 equals random.randrange uh 500, cuz that's the width of our screen. And we'll do Y1 400. And then we can say X2 and Y2. And then we just want to create that rectangle. X1, Y1, X2, Y2. Right? And you'll see this will take no time at all. As soon as you run the program, it's going to draw all those random rectangles all over. Okay? So, that's where we'll stop for today. Go ahead and play around with this. Make it so that you could make it so that the rectangles are all filled with different colors. Go back and look at the turtle how we did random colors when we did those programs. Uh make them different sizes. Make them random circles if you want. Get used to how the coordinates work and how you locate things on the screen. And in the next episode, we will look at how we do animation. Thanks for watching and we'll see you next time.