12.01 - Graphics Library in Python

hello this is rich bankhead and this is an introduction to the graphics library that we'll be using in our python course and so this package is a simple graphics oriented library designed to make it easy for novice programmers to experiment with computer graphics in an object oriented fashion and so this library graphics.pi is an add-on to tkinter and it uses tkenter which is a more complex graphics package it was authored by john zele at wartburg edu and it can be downloaded from this website link and just want to say thanks to dr zelly for doing such a great job putting this together and so it's object oriented and so object oriented means that we can define an object that has both attributes and methods attributes tell us about the object and methods tell us what the object can do and we're going to define graphic objects that have both attributes and methods as we move forward and so in graphics.pi there are two kinds of objects in the library there's a graph when class which implements a window where drawing can be done and then there are also various graphics objects that are provided that can be drawn into the graph window and so we have the window itself and then we have the objects we can draw in the window and they're two different kinds and so you can download graphics.pi and place it in the same folder as your python file and then we'll import all of the methods in graphics.pi you and so the module contains the following classes of drawable objects so we have point line circle oval rectangle polygon and text and then each of each object has the following methods and so set fill set outline set with draw undraw move and clone and so we'll we'll demonstrate how to use some of these and so here's some sample code um that we'll take a look at and so at the start from graphics import star and so this will bring everything over and uh since we're using the from command we won't have to use graphics dot the file name we'll just be able to use uh the function names that are in the module and so we're going to define some constants here and so this first set of code draws our graphics window we're going to say the width is 500 and the height is 500 and notice i'm using constants and not embedding just random numbers in functions that later if i come back i won't know what are so win equals graph window so this creates my graphic window and for now we're going to set this to auto flush equals false we'll talk about this a little bit later i'm going to give and so this is the first object this is the window that we're going to draw in now i'm going to create a circle object its x location is going to be zero its y location is going to be zero its radius is going to be 25 and this color is going to be blue and so i'm going to say circle equals circle and then the circle function takes a point and a radius as its arguments and so i have to create a point here at 100 125 i'm going to create the object i'm going to set the fill to the ball color which is blue and then i'm going to draw it on this graphics window and so we'll switch over to tony to tony and we'll take a look at this code so here's the same code here and if i run this code it creates my graphics window and then puts a ball at 100 100 and the ball is blue and close this window and i can change the color here to red and then maybe one 400 and then i can run it again and it changes location and the color of the wall you can change it back and then oops run it again and it moves back and so one ball now if i if i wanted to replicate this code i could replicate this code copy paste and i could call the circle two circle two and then uh just for demonstration i'm gonna hard code some numbers here for a second one two hundred 200 and the ball color will be red of course i want to create new variables for this but just for demonstration purposes and then i can create two graphic objects in my window a blue and a red ball okay so moving along animating objects um and so animation uses a frame rate typically a refresh rate and so we're going to loop through a series of still images and so all video or all animation you see is always done in a loop through a set of still images and typically 30 frames per second is a common frame rate sometimes it it uh sometimes at higher definition video you'll see 60 frames per second and so we're going to take our sample code here and this is the previous code we had from before where we drew the ball and then i'm going to say 4i and range 30 circle dot move and so i'm going to move this circle object 10 in the x direction and i'm going to say update equals update rate and at the top i've defined update rate as 30 frames per second and so if i go back to tani and then i hit my second code here so i have my update rate now defined at 30 frames per second and i click run here you'll see the blue ball it's animated and moved 30 times a distance of 10. and again if you see that at an animation rate of 30 frames per second if we slow down the animation rate the ball will move considerably slower and so we'll go 10 frames per second and it's not nearly as smooth and it moves slower so it determines how fast the ball moves across the screen and i really do recommend that you stick with 30 frames per second in your animations looks good okay and this is just a for loop right and so we're moving the ball 30 times and doing this command a fixed number of times then we have an update rate that pauses our update so it doesn't run super fast okay so next slide and so is it as a try it you could write code that makes the circle move in a square and so see if you could do that and so it'll be series of for loops to move to the x direction to the y direction and then move in a negative direction as well you can do so getting the location of a circle once we have a graphic object we can get the location of the circle using two two methods the dot gets center and the dot get x and so dot get center returns the method returns a point and then if we use the dot get x method on the point then it returns a float and so x location is circle dot get center dot get x will return the x location the y location is dot get center dot get y and so we can find the center of a circle so if we'd like to bounce off a wall we could set a direction multiplier to be positive one and then when we change that or get to the wall and our center's at the wall we can multiply our move distance by our direction multiplier and so when it gets to the wall we're going to change our direction multiplier to negative one and then so then our distance move will be negative one and so in code that looks like this we're gonna say circle.move and so i'm going to move 10 times my direction so my my direction is plus 1 so i'll be moving them positive direction if the center of the ball is greater than the window width then x direction equals star equals negative one so it takes the current direction and multiplies by negative one which switches the direction and then if the circle is less than zero which is the the left hand slide also multiply by negative one and so multiplying by negative one just changes the sign of the direction and it updates the direction which the ball will move so if we go to code and we look at how this works and so this code's included down here at the bottom and again i'm at 30 frames per second and i'm going to run this we'll see that the ball bounces off the wall but notice that the ball doesn't bounce exactly off the wall it goes past the wall and so the way this set of codes working is it's looking at the center of the ball so when the center of the ball gets to the wall then move and so what i could do here if i wanted it to run so it actually looked like it bounced off the wall i want the edge so i want the center to be less than the window width minus the ball radius and so that'll shorten it up on this side and this and i'm just going to put zero plus the ball radius here and so i'm going to shorten the window that the ball can bounce in and then if i rerun it then i get a more true look where the the ball radius is limited to that distance from the edge and i get a lot nicer and bounce in my animation okay in my next slide let's take a look what if we wanted to have a number of circles in a graphic window at one time how do we store the information about each and so like we said before we could do uh have 25 variables named circle010203 and so on but there's a much better way and so before we look at that way um if i set things up i'm going to set up some constants that i can use and so import graphics and then import random because i'm going to put them in random locations this is my windows setup and then i'm going to do 10 circles radius 25 and the circle outline will be size 2. and i'm going to define an empty list of circles and i'm going to store my circles in this list or my and so i'm going to end up with a list of graphic objects and and in python program this is sort of the holy grail of the first quarter is that you end up with a list of objects and so i'm going to loop through for i and range in the number of circles so this would be in range 10 i'm going to create a random location for x within the size of the circle so it puts it on the screen in a random location a random location for the y and then i'm going to do circle list dot append so i'm going to add a circle object at this point which is randomly generated at this size i'm going to append that to my circle list and this will run 10 times and so i'll append 10 circle objects to my circle list i can access each element of that list as i loop through this for loop the first time it comes through at zero and then i have already appended this object so now i can talk to it circle list 0 i'm going to set the fill with a random color and then i'm going to set the width of the the outline and then i'm going to draw it to the screen and so this code draws 25 random circles i'm sorry 10 random circles on the screen and so the triad is hey can i do 25 colored random circles on the screen so let's take a look at the code for this here and it's the code that you've seen pieced together and here's my random color list to choose from my circle list and down here's the code to to one append them and then two to talk to them and so if i run this code i get a graphics window with 25 circles i'm sorry 10 circles if i'd like 25 i can change the number of circles here to 25 and then run it again and i get more circles right in the window and i could do up to as many as i wanted so let's do 200 circles and see what i get and so there you go 200 circles drawn on the the graphics object and so if i like them to draw and just not appear i could add an update rate and so i'll go to this slide i'll copy my update rate copy and here so i'll have this and frames per second i'd like to have i'm going to do 200 30 per second looks pretty good and then i could have the circles appear by controlling the animation of the graphic and so some a little bit of fun and so i don't know maybe we should do that again and so you could see that the animation run and the circles up here because we're controlling the update rate okay and so going back to powerpoint um draw order one last thing is that the last object drawn is always on the front and so to move an object to the front of the window i just need to undraw that object and then redraw that object and so it's a it's an easy thing to do and so the real question is what could you create using graphics.pi with this intro and this is and in this video i've covered circles but there are other graphic objects that you could definitely use

Channel: rb3 maker

Views: 236

Keywords:

Id: enpTyZnul3E

Length: 16min 0sec (960 seconds)

Published: Mon Oct 19 2020