Animated GIF Maker
April 2005 (college student)
Creating animation waypoints using animated-gif-maker.html
The animated GIF after running animated-gif-maker.py
This script takes four arguments and will generate a square infinitely-looping animated GIF named animated.gif from source-image with height and width equal to final-size pixels. It generates each frame of the animation based on the coordinates given in waypoint-file with a delay of delay-between-frames in hundredth of seconds between each frame.
Here is an example waypoint-file (the one used to generate the bulldog animation on the right):
321 90 180 8 476 247 102 15 476 247 448 15 598 337 188 15
Each line specifies a waypoint containing four numeric fields: x-coordinate, y-coordinate, size, and number of frames between this and the next waypoint. This example contains four waypoints. The first waypoint specifies a 180x180 square centered at coordinates (321, 90) on the source image. The second waypoint specifies a 102x102 square centered at (476, 247). The 8 on the first line specifies that the camera should use 8 frames to travel between the first and second waypoints, creating intermediate frames via simple linear interpolation. There are 15 frames between waypoints 2 and 3, 15 frames between waypoints 3 and 4, and again 15 frames between waypoints 4 and 1. The camera wraps around from the last waypoint back to the first to provide a smooth continuous animation. The coordinates specify where the camera should move and the number of frames between waypoints specify how fast to move when creating the animation.
If two consecutive waypoints contain the same x and y coordinates but a different size, then the script performs a zoom (without any movement) between those waypoints. In the above example, the second and third waypoints are both located at (476, 247) so the camera will take 15 frames to zoom out from a 102x102 square to a 448x448 square.
You control the speed and flow of your animation by specifying the number of frames between consecutive waypoints and the delay between frames in the delay-between-frames parameter.
Waypoint Creator GUI
You can click on parts of the image at waypoints that you want to create, hold down your mouse and drag to draw boxes that represent the waypoints. Each waypoint that you create will be labeled with a number in the lower-right corner. To achieve a pure zooming effect, create one waypoint then create another one with the same center but with either a larger or smaller size.
When you are finished creating waypoints, click on the "Create Waypoint File" button, and a text window should pop up with a list of waypoints. Copy that list into a text file, replace the num-frames entries with the number of frames that you want between each pair of waypoints, and that waypoint file is ready to be processed by animated-gif-maker.py
(This application is fairly minimalistic so you cannot delete or move waypoints. If you mess up, simply reload the page and start over. I've only tested it on Mozilla-based browsers and Safari, so it probably won't work on other browsers right now.)
Last modified: 2007-11-24