Preparation

a. Create a folder called lab-10-03 in your StuWork directory.

b. Go to the website Resources page and download the graphics.py file and save it in your lab-10-03 folder.

c. Open up an extra tab to the Online Graphics Reference. You can also find this on the Resources page.

d. Open a Terminal and navigate to your lab-10-03 directory.

Exercise 1

We will by experimenting with the basic graphics commands.

a. Open up the REPL in your Terminal.

b. Import the graphics library by typing:

>>> from graphics import *

c. Create a GraphWin object with a title of Hello World by typing:

>>> win = GraphWin("Hello World")

d. Try plotting a point in the center of the window by typing:

>>> p = Point(100, 100)
>>> p.draw(win)

e. Make sure a tiny black dot appears in the center of your window. Now let’s try moving the point.

>>> p.move(50, 50)

f. Verify that the point indeed moved.

g. Now let’s try drawing a red circle around the point with radius 20.

>>> circ = Circle(p, 20)
>>> circ.setOutline("red")
>>> circ.draw(win)

h. If we move the point p do you think the circle will move with it? Try it to see what happens.

>>> p.move(-50, -50)

i. Experiment a bit more by moving the circ object, creating other objects of different colors, and moving them around.

Exercise 2

Notice that 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 REPL, create another window object and change its coordinate system to be the following.

>>> win = GraphWin()
>>> win.setCoords(0.0, 0.0, 1.0, 1.0)

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)

c. Notice that now the coordinate (1, 1) is the lower 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!

Exercise 3

Let’s now display the message “Hello World!” on the graphics window. We can do this in the following way in the REPL. Let’s also use a coordinate system where -1 is the smallest value and +1 is the largest value.

win = GraphWin()
win.setCoords(-1, -1, 1, 1)
win.setBackground("white")
hello = Text(Point(0,0), "Hello world!")
hello.draw(win)

Exercise 4

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 called detect-mouse-clicks.py and copy and paste the following lines of code into it.

# detect-mouse-clicks.py
# Titus Klinge, and YOUR NAMES HERE
# 2018-10-03
#
# A simple program that prints of where the user clicks to the terminal

from graphics import *

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

    while win.isOpen():
        p = win.getMouse()
        print(p)

if __name__ == "__main__":
    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. Close the program by clicking the “close” button on the displayed window. This should automatically cause the program to break out of the loop and finish.

d. 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.

Exercise 5

Write a program called show-semicircle.py that when run via the terminal will show a GraphWin window and display a semicircle that looks like the following.

A black semicircle

Here are a few hints:

  1. Use win.setBackground("white") to change the background to white.
  2. Use circ.setFill("black") to change the fill color of the circle to black.
  3. Draw a white rectangle overlapping the circle so that it makes it look like a semi-circle.

Exercise 6

Write a program called show-smiley.py that when run via the terminal will show a GraphWin window and display a smiley face that looks similar to the following. Note that it doesn’t have to be perfect! Just get the hang of using graphics objects.

A yellow smiley face