Philip Guo (Phil Guo, Philip J. Guo, Philip Jia Guo, pgbovine)

Animated GIF Maker

Introduction

I have written a Python script to create an animated GIF from a still image and a textual description of how a 'virtual camera' should pan and zoom around the image to create the desired animation. I have also written an HTML/JavaScript GUI for graphically selecting these waypoints by clicking and dragging on the image.


Creating animation waypoints using animated-gif-maker.html

The animated GIF after running animated-gif-maker.py

User Manual

To create an animated GIF, download animated-gif-maker.py and execute it on a system with ImageMagick installed:

python animated-gif-maker.py \
<waypoint-file> <source-image> \
<final-size> <delay-between-frames>

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

In order to make it easier to create the waypoint file, I have created a webpage that allows you to draw boxes on an image via JavaScript to specify waypoints. To use it, download the relevant files (1 HTML and 2 JavaScript) and open animated-gif-maker.html with the name of the image file (I've only tried .jpg and .gif) after a question mark in the URL. For example, in order to mark waypoints on bulldog.jpg, I put its filename after a question mark:

animated-gif-maker.html?bulldog.jpg

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.)

Code

Created: 2005-04-01
Last modified: 2007-11-24
Related pages tagged as software: