Mini-Lab: Using Loops to Create Simple Animations
This mini-lab will help you learn how to create simple animations
for loops, and the
Moving in Straight Lines
- Write a function that moves a red (or any color) box across a
horizontal line. (You may want to experiment with different horizontal
lines.) Make a canvas that will be used to hold the
animation. Show the canvas before entering the animation loop. In the
for loop, set the range so that the box
does not go off of your canvas. You should step by something other than
1 - try 5 or 10 to start with. Inside the loop, you should
place a filled rectangle (remember how to use
addRectFilled?) at the appropriate position and repaint the
canvas. (Using repaint instead of show avoids opening a new window each
time you want to show the canvas.) Then "erase" the rectangle you just
added, by adding a filled rectangle at the same location, but
the same color as your background.
- Write a function similar to the one above, but pass the row number
and the color for the box as
parameters rather than constants.
- Write a function similar to the one above that moves the box along
a vertical line instead of a horizontal line.
- Write a function that moves a box around the perimeter of the
canvas. It should move across the top, down the right side, back across the
bottom, and then up the left side. (Note: remember you can use the range
function to go backwards as well as forwards, as in range(10,-1,-1).
This will let us start at 10 and go down by 1's to 0.)
- Write a function similar to the ones above that moves a box along
the diagonal of the canvas, from the upper left corner to as far down and to
the right as you can go.
- Write a function similar to the previous one that moves a box
along the other diagonal, from the upper right to as far down and left
as you can go.
- You may modify any of these functions so that they take a picture
to use as a background as a parameter.
Moving Two Boxes
- Write a function that simultaneously moves one box across the top of
the canvas, and another box across the bottom. You should be able to
copy and paste your function from exercise #1 and add one or two lines of code.
(Just add another filled rectangle to the canvas inside the
- Write a function that simultaneously moves one box along the
top-left-to-bottom-right diagonal, and another box from the
top-right-to-bottom-left diagonal. Again, you should be able to modify
either exercise #5 or #6 to do this.
- This function represents a more mathematically complicated way to
get the boxes moving. One box moves down the canvas in a circular
motion, while the other just moves down the diagonal of the canvas.
Copy the following function and run it to see how it works.
pict = makeEmptyPicture(400,400)
canvas = duplicatePicture(pict)
for y in range(getHeight(pict)/4):
addRectFilled(canvas, y*5, y*5, 30, 30, blue)
pinkx = 100 + int(10*sin(y))
pinky = 4*y + int(10*cos(y))
addRectFilled(canvas, pinkx, pinky, 30, 30, pink)
# cover the rectangles with white, in effect "erase" them
addRectFilled(canvas, y*5, y*5, 30, 30, white)
addRectFilled(canvas, pinkx, pinky, 30, 30, white)
- Write a function that moves a text across a horizontal
line. This should be similar to moving a box, except using
addText instead of
- Write a function that moves text along a straight line, from top
to bottom of the canvas.