Introduction to Computer Science
Union College
Spring 2009

Making Things Move and Bounce

still_circle.py is a python program that draws a single cirlce. Download it, run it, and have a look at the code. There should not be anything in it that surprises you - it has the same structure and uses the same commands that you used last week when you made your pictures.

still_balloon.py is a python program that takes a picture of a balloon (from an image file) and draws it onto the screen. To run this program you also need the image file red_balloon.gif. Download and run the program. Then look at the code to understand how to draw images to the screen.

Step 1 - moving a fixed amount every frame

In still_balloon.py the balloon is drawn at a fixed position: (100,100). Now, make it move a little bit in every frame (that is, in every pass through the loop).

With your partner, develop a solution on paper first. Come and explain it to me. Then go and implement it. I will only help you with your implementation if you have explained your proposed solution to me on paper first.

Step 2 - moving a fixed amount every millisecond

Not all passes through the game loop take the same amount of time. How long one pass takes depends on other things going on on the computer, other programs that are being run at the same time. That means that your solution from step 1 will sometimes move the balloon faster and sometimes slower. To avoid that, we don't want to move the balloon a certain amount in every frame; we want to move the balloon a certain amount every millisecond (no matter how many milliseconds one pass through the game loop takes).

For this purpose, the pygame library provides a clock (see the documentation). Here is how to use it:

  • clock = pygame.time.Clock() creates a clock object and assigns the name clock to it. Create your clock as part of the initialization phase before starting the game loop.
  • dt = clock.tick() accesses the time in milliseconds that has passed since the last time clock.tick() was called and assigns the value to the variable dt. So, if you make this statement inside the game loop the variable dt will refer to a number which is the number of milliseconds that has passed since the last time clock.tick() was called, which is how long the last pass through the game loop took.

Now, specify a speed for the balloon. (That is, specify how many pixels the balloon should move every millisecond. You need to do this for both movement along the x axis and movement along the y axis.) Then make the balloon move according to this speed.

Again, develop your solution on paper first. Then explain it to me; then implement it.

Step 3 - bouncing off the sides

Now, extend your program so that the balloon does not leave the picture, but bounces off the edges.

To do this you need to do the following:

  • Check whether the balloon's position is outside the game window.
  • If the balloon's position is outside the game window, move it back into the window ...
  • ... and then bounce it, i.e., change the direction it is moving in. (This can be achieved by multiplying the speed in the x direction by -1 if the balloon is leaving the window at the left or right, and by multiplying the speed in the y direction by -1 if the balloon is leaving the window at the top or bottom.

Again, paper first, then implement.

by Kristina Striegnitz