Mini-Lab: Using Loops to Create Simple Animations

 


Introduction

This mini-lab will help you learn how to create simple animations using for loops, and the show function.



Moving in Straight Lines

  1. 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.
  2. Write a function similar to the one above, but pass the row number and the color for the box as parameters rather than constants.
  3. Write a function similar to the one above that moves the box along a vertical line instead of a horizontal line.
  4. 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.)
  5. 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.
  6. 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.
  7. You may modify any of these functions so that they take a picture to use as a background as a parameter.

Moving Two Boxes

  1. 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 for loop.)
  2. 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.
  3. 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.
    import time
    def movingRectangles():
      pict = makeEmptyPicture(400,400)
      canvas = duplicatePicture(pict)
      show(canvas)
      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)
        repaint(canvas)
        time.sleep(.1)
        # 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)
    

TickerTape

  1. Write a function that moves a text across a horizontal line. This should be similar to moving a box, except using addText instead of addRectFilled.
  2. Write a function that moves text along a straight line, from top to bottom of the canvas.