LAB 5 - Introduction to Graphics

Using a Python module

Often, someone has written code that can be used in other programs. In Python, these are called modules. We will be using a computer graphics module called graphics.py to help us draw pictures easily in Python.

Download a copy of this module by clicking HERE. Once this file is downloaded to your desktop, move it to your Python working area. This Python module must be in the same folder as any program code that uses it.

This module comes from Python Programming: An Introduction to Computer Science by John Zelle.

Using the Graphics module

A program that includes computer graphics will generally look like this:

from graphics import *

def main():
        win = GraphWin()

	# graphics code goes here

	raw_input("Press <Enter> to quit")
	win.close()

The import statement tells Python to include everything (*) from the graphics module as needed in this program. The first instruction of the main function calls a function called GraphWin that creates a graphics window that we can draw on. The variable win references this window so whenever we want to draw in this window, we use this variable name to tell Python what window to use. After the program ends, we wait for the user to hit enter using a new function raw_input and then we close the window.

Window Coordinates

The default window that is created by the GraphWin function is 200 pixels wide by 200 pixels high. A pixel is a "picture element", the smallest display dot on the screen. Each pixel in the window has an x- and y- coordinate. The top left corner of the window's display area is (0,0). The x-coordinate increase as you go from left to right. The y-coordinate increases as you go from TOP to BOTTOM, not the other way around like you're used to with mathematical coordinate systems. If the window is 200 X 200, the bottom right corner of the window is at (199,199).

You can create windows of any size by using another version of the GraphWin function that requires three parameters: the title for the window, its width (in pixels) and its height (in pixels). For example, the following instruction creates a window 250 pixels wide by 400 pixels high that has a title of "Display Window":

	win = GraphWin("Display Window", 250, 400)

Drawing objects

To draw objects, we must first create points. To create a point, we set a variable equal to a Point object with a given (x,y) position:

	a = Point(25,25)
	b = Point(100,175)
	c = Point(100,100)

With points created, we can now define objects like rectangles and circles. To create a rectangle, we set a variable equal to a Rectangle object with two points as its endpoints:

	rect = Rectangle(a, b)

	circ = Circle(c, 50)

Although these instructions create the objects, you can't see them yet.

Setting Properties of Graphical Objects

Each graphical object has a set of properties that you can set for the object. Here are some examples:

	rect.setFill("red")
	circ.setFill("blue")
	rect.setOutline("green")
	circ.setOutline("yellow")
	rect.setWidth(5)
	circ.setWidth(10)

The function setFill sets the color used to fill the object. Note that the color is represent with a string in quotes. The function setOutline sets the color used to draw the border for the object. All of the obvious colors are available. The function setWidth specifies the width of the border of the object in pixels.

You can also define colors using the function color_rgb which requires three parameters: the intensity of red, green and blue in the color, each intensity between 0 (none) to 255 (full). So we can set the fill color of the circle to a purple-like color by writing circ.setFill(color_rgb(130,0,130)).

Drawing the Objects

Once the properties of the objects are set, you can draw them using the draw function. This function is used on a graphics object and requires a parameter that specifies the window to draw the object in. For example, to draw the rectangle and circle we created above in our window, we use the instructions:

	rect.draw(win)
	circ.draw(win)

Here is our final program:

from graphics import *

def main():
        win = GraphWin()

        a = Point(25,25)
        b = Point(100,175)
        c = Point(100,100)

        rect = Rectangle(a, b)
        circ = Circle(c, 50)

        rect.setFill("red")
        circ.setFill("blue")
        rect.setOutline("green")
        circ.setOutline("yellow")
        rect.setWidth(5)
        circ.setWidth(10)

        rect.draw(win)
        circ.draw(win)

        raw_input("Press <Enter> to quit")
        win.close()
        
main()

And here is what it looks like:

Notice that whatever you draw first can get obscured by whatever you draw afterwards.

Another example

Look at the following graphics program. Do you see how it creates the output shown below?

from graphics import *

def main():

        win = GraphWin()

        for i in range(4):
                rect = Rectangle(Point(i*50,i*50),Point((i+1)*50,(i+1)*50))
                rect.setFill("orange")
                rect.setOutline("orange")
                rect.draw(win)

        raw_input("Press <Enter> to quit")
        win.close()

main()