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.
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.
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)
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.
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
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
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.getKey() instead. Rerun the program and see what strings are printed.
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
# 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.
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.
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