Lab 07 - Graphics & Animation

Wes Griffin & Sue Evans

Adapted from the CS1 Course at Swarthmore College by Lisa Meeden

Press space bar for next screen

Objectives

Draw various graphic objects on the screen
Process mouse input from the user
Move graphic objects around
Create animations

Review of Drawing Objects

Recall from lecture how we create windows and draw objects:

from graphics import *

win = GraphWin("Draw Circles", 400, 400)

circ1 = Circle(Point(50, 50), 40)
circ1.setFill('red')
circ1.setOutline('black')
circ1.draw(win)

circ2 = Circle(Point(200, 200), 50)
circ2.setFill('blue')
circ2.setOutline('red')
circ2.draw(win)

line1 = Line(Point(350, 50), Point(350, 350))
line1.setWidth(4)
line1.draw(win)

Here's the Graphics Library Quick Reference

User Input, Moving Objects, Pausing Execution

We can get the point where the user clicks a mouse with:
```
point = win.getMouse()
```

We can move objects with the move() method:

center1 = circ1.getCenter()
dx = point.getX() - center1.getX()
dy = point.getY() - center1.getY()
circ1.move(dx, dy)

We can pause the program with the sleep() method:
```
from time import sleep
sleep(1.0)
```

Step 0

Make a lab7 directory in your 201/labs directory
Change into your lab7 directory.
Copy the graphics.py file from Mr. Lupoli's directory into your lab7 directory.

cp /afs/umbc.edu/users/s/l/slupoli/pub/labCode201/graphics.py .
Use emacs to create a lab7.py file in your lab7 directory
Important Note:You need to use a different version of Python for this lab. To run your program type:

/usr/local/bin/python2.4 lab7.py
If you run your program and see ImportError: No module named Tkinter you need to use the above command to run your program.

Animation - Step 1

We are going to write a program that displays a single circle and then slowly moves the circle to where the user clicks their mouse.
Let's start by writing the setup for our program.
Translate the following pseudo-code:

create a new graphics window with an orange background
draw a yellow circle somewhere in the window
draw the string "Click mouse on new location for circle" near the bottom of 
    the window

wait for user input

The final line, "wait for user input" we'll work on next.
Remember how the Coordinate systems works!!

User Input - Step 2

We want to move the circle based on where the user clicks,
- but we want to animate the move so that the circle doesn't just jump to the new location.
Let's allow the user to move the circle 3 times before quitting:

for 3 clicks:
    get the location of the mouse click
    calculate how far to move the circle
    animate the circle's movement

close the window

We'll work on animating the circle's movement next.

Animating Movement -
Step 3

Once we have the distance we want to move the circle,
we need to move the circle in small steps,
pausing between each movement,
until the circle has reached its destination.
Your circle should move smoothly from one position to the next for this step to be correct.

Bonus Step - Snowman

Draw a snowman made of three circles and animate him.

Challenge Step

Have the circle always move at the same speed no matter how far the circle is moving.