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 copyInto function. (You may find the JES Picture Functions Quick Reference and the Drawing Pictures lab helpful.)



Moving in Straight Lines

  1. Write a function that moves a filled colored box horizontally across a picture. (You may want to experiment with different horizontal lines.) The function should take at minimum a picture as a parameter.
    • Make an empty list. Name the list variable animation or anything similar.
    • 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
      • Capture a duplicate of the picture passed into the function.
      • Place a filled rectangle at the appropriate position
      • Append the image of the picture to the end of your animation list.
    • Useful Class Functions:
      • The list class has the function append which takes an object and appends it to the end of the list.
      • Use the Picture Class function getImage to obtain a copy of the picture image.
    • Save your animation as a gif.
      [ListName][0].save('[fileName].gif', format='GIF', append_images=[ListName][1:], save_all=True, duration=100, loop=0)
    (The Drawing Pictures lab has summary information about addRect, addRectFilled, etc.)
  2. Optional: 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. Optional: 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.

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. Optional: 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.
    def movingRectangles():
      pict = makeEmptyPicture(400,400)
      animation = []
      for y in range(getHeight(pict)/4):
        canvas = duplicatePicture(pict)
        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)
        animation.append(canvas)
        animation.append(canvas) #add frame(s) to delay image prior to next section.
        # 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)
        animation.append(canvas)
    

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.

Submit your results

  1. Submit the file you created in this mini-lab via Kit.