Lab: More Graphics

3 minute read

Preparation

a. Double check that Zelle’s graphics.py library is properly installed in Thonny by executing the following command in the shell.

>>> from graphics import *

If you encountered any error, follow the instructions for Installing Graphics in Thonny and try again.

Note: If you are having trouble with any of the steps in setting up the graphics library, ask for help from the instructor.

b. Open up theHTML Graphics Reference in a new tab so that you can look at the classes and methods available to you throughout the lab.

Exercise 1

It is sometimes helpful to change the coordinate system of the GraphWin object. You can do this using the setCoords method. Let’s try it out.

a. In your shell, create a GraphWin object and change its coordinate system to be the following.

>>> win = GraphWin()
>>> win.setCoords(0, 0, 1, 1)

b. Now draw a black square in the middle of the window by typing

>>> rect = Rectangle(Point(0.25, 0.25), Point(0.75, 0.75))
>>> rect.setFill("black")
>>> rect.draw(win)

Note: Notice that now the coordinate (1, 1) is the upper right corner of the window and (0.5, 0.5) is the center. You can change the coordinate system in any way that suits your fancy!

c. To set the coordinate system so that (1,1) is in the lower right corner, try executing the following command:

>>> win.setCoords(0, 1, 1, 0)

Note: This makes it so that the point (0,0) is the upper left corner and the point (1,1) is in the lower right corner.

d. Try out other coordinate systems with your partner and draw various shapes to the windows in these systems.

Exercise 2

Now let’s experiment with getting input from the user via mouse click events. The GraphWin method called getMouse() will immediately pause execution of code and wait until the user clicks somewhere on the window. It will then return a Point object of where they clicked. Let’s experiment with this.

a. Create a new file in Thonny called detect_mouse_clicks.py and copy and paste the following lines of code into it.

# A simple program that prints where the user clicks
#
# Author:
#   Titus Klinge, and YOUR NAMES HERE

from graphics import *

def main():
    win = GraphWin("Detect Clicks", 640, 640)

    for i in range(10): # Repeats the code below 10 times
        p = win.getMouse()
        print(p)

main()

b. Try running the program and try clicking on window in various locations. What points does it print off? Also note that the program waits until you click before it continues on to the print function.

c. Now let’s experiment with changing the coordinate system. Add the following line right after where the win variable is declared:

win.setCoords(0, 0, 1, 1)

Rerun the program and see how the points that getMouse() returns has changed.

d. Now let’s experiment with the getKey() method. In your code, change the win.getMouse() to win.getKey() instead. Rerun the program and see what strings are printed.

Exercise 3

Create a new file called move_circle.py and place the following code into it. This code uses some Python components that we will cover in more detail later, but it demonstrates the power of the graphics.py library.

# Simple demo of moving an object with key presses
#
# Author:
#   Titus Klinge and YOUR NAMES HERE

from graphics import *
import math

def main():

    # Creates the main window
    win = GraphWin("Moving a Circle", 500, 500)
    win.setCoords(0, 0, 1, 1)

    # Creates a red circle on the window
    circ = Circle(Point(0.25, 0.25), 0.1)
    circ.setFill("red")
    circ.draw(win)

    # While the user doesn't close the window...
    while win.isOpen():
        # Check if the user just pressed an arrow key
        # and if so, move the circle in that direction
        key = win.getKey()
        if key == 'Up':
            circ.move(0, 0.01)
        elif key == 'Down':
            circ.move(0, -0.01)
        elif key == 'Right':
            circ.move(0.01, 0)
        elif key == 'Left':
            circ.move(-0.01, 0)

main()

a. Run the code and use the arrow keys on your keyboard to watch the circle move.

b. Feel free to play with the above code in various ways. For example, making the circle move faster or changing it so that pressing the W, A, S, D keys do the moving.

Exercise 4

Write a program that shows a graphics window to the user, shows them via a Text object to click in three different places on the window, and then draws a triangle using the three points that they clicked. You’ll need to use the Polygon class to do this, so be sure to look up the documentation in the HTML Graphics Reference.

Finished Early?

If you have extra time, continue experimenting with the graphics library. Take a look at the HTML Graphics Reference and explore shapes like Line and objects like Entry.

Instructor

CS Tutors