Exercises for Lesson 4

Back to Lesson 4

Useful files

graphics.py: code and documentation

Fun aside: this file will let you visualize all of the named colors you can use with Tkinter.

Exercise 1: Creating and using graphical objects

For each of the following code snippets, think about what attributes the graphics object has, and then run the code and see what gets displayed.

from graphics import *

# (a)

win = GraphWin("Exercise 1a: Point")

p = Point(130, 130)
p.draw(win)

win.getMouse()
win.close()

# (b)

win = GraphWin("Exercise 1b: Circle")

circ = Circle(Point(30,40), 25)
circ.setFill("blue")
circ.setOutline("red")
circ.draw(win)

win.getMouse()
win.close()

# (c)

win = GraphWin("Exercise 1c: Rectangle")

rect = Rectangle(Point(20,20), Point(40,40))
rect.setFill("DarkOliveGreen4")
rect.setWidth(3)
rect.draw(win)

win.getMouse()
win.close()

# (d)

win = GraphWin("Exercise 1d: Line")

line = Line(Point(100,100), Point(100,150))
line.setOutline("dark violet")
line.setArrow("first")
line.draw(win)

win.getMouse()
win.close()

# (e)

win = GraphWin("Exercise 1e: Oval")

oval = Oval(Point(50, 50), Point(60, 100))
oval.draw(win)

win.getMouse()
win.close()

# (f)

win = GraphWin("Exercise 1f: Polygon")

shape = Polygon(Point(50,50), Point(100,100),
                Point(50,100), Point(100,50))
shape.setFill("orange")
shape.draw(win)

win.getMouse()
win.close()

# (g)

win = GraphWin("Exercise 1g: Text")

text = Text(Point(100,100), "Hello, world!")
text.setFace("courier")
text.setSize(16)
text.setStyle("italic")
text.draw(win)

win.getMouse()
win.close()

Back to Lesson 4

Exercise 2: Understanding the coordinate system

Type up the following program in VS Code. Use it to explore the coordinate system and answer these questions:

  • In what direction does x increase?
  • What about y?
  • What is the coordinate of the bottom-left corner of the screen?
  • What is the coordinate of the top-right corner of the screen?
from graphics import *

def main():
    # Set up the window
    winWidth, winHeight = 800, 600
    win = GraphWin("Coordinate System Exploration", winWidth, winHeight)
    #win.setCoords(0, -2, 10, 8) # run first, then uncomment this line
    win.setBackground("white")

    # Print a welcome message to the user
    messageLocation = Point(winWidth / 2, winHeight - winHeight * 0.1)
    #messageLocation = Point(5, -1) # run first, then uncomment this line
    message = Text(messageLocation,
                   "Click 10 times to print click coordinates.")
    message.draw(win)

    # Take in 10 clicks, printing their location
    for i in range(10):
        clickPoint = win.getMouse()
        x = clickPoint.getX()
        y = clickPoint.getY()
        message.setText("You clicked at x=" + str(x) + ", y=" + str(y))

    # Wait for another click to exit
    message.setText("Click anywhere to quit.")
    win.getMouse()
    win.close()

main()

Afterwards, uncomment the following lines:

    #win.setCoords(0, -2, 10, 8) # run first, then uncomment this line

and

    #messageLocation = Point(5, -1) # run first, then uncomment this line

How does using win.setCoords() change the coordinate system? What are the coordinates of the different corners of the screen, and how does that relate to the parameters to the win.setCoords function call?

Back to Lesson 4

Exercise 3: Interactive graphics

Imagine you want to draw a triangle based on where a user clicks. The following code will get you most of the way there. How would you fill in the two # TODO to do this?

from graphics import *

def main():
    # Set up the window
    winWidth, winHeight = 800, 600
    win = GraphWin("Draw a triangle", winWidth, winHeight)
    win.setCoords(0, 0, 10, 5)
    win.setBackground("white")

    # Print a welcome message to the user
    message = Text(Point(5, 0.5),
                   "Click on three points to make a triangle")
    message.draw(win)

    # Get and draw three vertices of a triangle
    point1 = win.getMouse()
    # TODO

    # Somehow draw the triangle
    triangle = # TODO
    triangle.setFill("peachpuff")
    triangle.setOutline("cyan")
    triangle.draw(win)

    # Wait for another click to exit
    message.setText("Click anywhere to quit.")
    win.getMouse()
    win.close()

main()

Back to Lesson 4