Graphic Design in Python using Pygame and turtle7 min read
Posted On July 24, 2019
Graphics make programming more fun for many people. To fully introduce graphics would involve many ideas that would be a distraction now. This section introduces a simplified graphics module developed by John Zelle for use with his Python Programming book. My slight elaboration of his package is graphics.py in the example programs.
in python by pygame
Note You will just be a user of the graphics.py code, so you do not
need to understand the inner workings! It uses all sorts of features
of Python that are way beyond these tutorials. There is no particular
need to open graphics.py in the Idle editor.
Load into Idle
and start running example graphIntroSteps.py, or start running from
the operating system folder. Each time you press return, look at the
screen and read the explanation for the next line(s).
from graphics import *
win = GraphWin()
graphics are not a part of the standard Python distribution. For the
Python interpreter to find Zelle’s module, it must be imported. The
first line above makes all the types of object of Zelle’s module
accessible, as if they were already defined like built-in types str
Look around on
your screen, and possibly underneath other windows: There should be a
new window labeled “Graphics Window”, created by the second line.
Bring it to the top, and preferably drag it around to make it visible
beside your Shell window. A GraphWin is a type of object from Zelle’s
graphics package that automatically displays a window when it is
created. The assignment statement remembers the window object as win
for future reference. (This will be our standard name for our
graphics window object.) A small window, 200 by 200 pixels is
created. A pixel is the smallest little square that can by displayed
on your screen. Modern screen usually have more than 1000 pixels
across the whole screen.
pt = Point(100,50)
This creates a
Point object and assigns it the name pt. Unlike when a GraphWin is
created, nothing is immediately displayed: In theory you could have
more than one GraphWin. Zelle designed the graphics module so you
must tell Python into which GraphWin to draw the Point. A Point
object, like each of the graphical objects that can be drawn on a
GraphWin, has a method  draw.
Now you should
see the Point if you look hard in the Graphics Window – it shows as a
single, small, black pixel. Graphics windows have a Cartesian (x,y)
coordinate system. The dimensions are initially measured in pixels.
The first coordinate is the horizontal coordinate, measured from left
to right, so 100 is about half way across the 200 pixel wide window.
The second coordinate, for the vertical direction, increases going
down from the top of the window by default, not up as you are likely
to expect from geometry or algebra class. The coordinate 50 out of
the total 200 vertically should be about 1/4 of the way down from the
top. We will see later that we can reorient the coordinate system to
fit our taste.
will see a draw method call after each object is created, so there is
something to see.
cir = Circle(pt, 25)
The first line
creates a Circle object with center at the previously defined pt and
with radius 25. This object is remembered with the name cir. As with
all graphics objects that may be drawn within a GraphWin, it is only
made visible by explicitly using its draw method.
everything has been drawn in the default color black. Graphics
objects like a Circle have methods to change their colors. Basic
color name strings are recognized. You can choose the color for the
circle outline as well as filling in the inside.
Note the method
names. They can be used with other kinds of Graphics objects, too.
(We delay a discussion of fancier colors until Color Names and Custom
line = Line(pt, Point(150, 100))
A Line object is
constructed with two Points as parameters. In this case we use the
previously named Point, pt, and specify another Point directly.
Technically the Line object is a segment between the the two points.
Warning In Python
(150, 100) is a tuple, not a Point. To make a Point, you must use the
full constructor: Point(150, 100). Points, not tuples, must be used
in the constructors for all graphics objects.
A rectangle is
also specified by two points. The points must be diagonally opposite
rect = Rectangle(Point(20, 10), pt)
In this simple
system, a Rectangle is restricted to have horizontal and vertical
sides. A Polygon, introduced in the next section, is used for all
more general straight-sided shapes.
You can move
objects around in a GraphWin. Shortly this will be handy for
animation. The parameters to the move method are the amount to shift
the x and y coordinates. See if you can guess the result before you
Did you remember that the y coordinate increases down the screen?
Take your last
look at the Graphics Window, and make sure that all the steps make
sense. Then destroy the window win with the GraphWin method close.
program graphIntro.py starts with the same graphics code as
graphIntoSteps.py, but without the need for pressing returns.
An addition I
have made to Zelle’s package is the ability to print a string value
of graphics objects for debugging purposes. If some graphics object
isn’t visible because it is underneath something else of off the
screen, temporarily adding this sort of output might be a good
At the end of graphIntro.py, I added print lines to illustrate the debugging possibilites:
You can load
graphIntro.py into Idle, run it, and add further lines to experiment
if you like. Of course you will not see their effect until you run
the whole program!
'''A simple graphics example constructs a face from basic shapes.'''
from graphics import *
win = GraphWin('Face', 200, 150) # give title and dimensions
win.yUp() # make right side up coordinates!
head = Circle(Point(40,100), 25) # set center and radius
eye1 = Circle(Point(30, 105), 5)
eye2 = Line(Point(45, 105), Point(55, 105)) # set endpoints
mouth = Oval(Point(30, 90), Point(50, 85)) # set corners of bounding box
label = Text(Point(100, 120), 'A face')
message = Text(Point(win.getWidth()/2, 20), 'Click anywhere to quit.')
method yUp (y increases upward)
When you first create a GraphWin, the y coordinates increase down the screen. To reverse to the normal orientation use my GraphWin yUp method.
win = Graphwin('Right side up', 300, 400)
method promptClose (Prompt and Close Graphics Window)
generally want to continue displaying your graphics window until the
user chooses to have it closed. The GraphWin promptClose method posts
a prompt, waits for a mouse click, and closes the GraphWin. There are
two ways to call it, depending on whether you want to use an existing
Text object, or just specify a location for the center of the prompt.
win.promptClose(win.getWidth()/2, 30) # specify x, y coordinates of prompt
msg = Text(Point(100, 50), 'Original message...')
# ... just important that there is a drawn Text object
win.promptClose(msg) # use existing Text object
Representations of all Graphics Object Types
Each graphical type can be converted to a string or printed, and a descriptive string is produced (for debugging purposes). It only shows position, not other parts of the state of the object.