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
- 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.
- The list class has the function
- Save your animation as a gif.
addRect
,addRectFilled
, etc.) - Make an empty list. Name the list variable
- 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.
- 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.
- 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
- 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.) - 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.
- 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
- Write a function that moves a text across a horizontal
line. This should be similar to moving a box, except using
addText
instead ofaddRectFilled
. - Write a function that moves text along a straight line, from top to bottom of the canvas.
Submit your results
- Submit the file you created in this mini-lab via Kit.