Learn creative coding writing simple programs

145. Export animation frames, convert to animgif using gifsicle

In this episode we add two features to the loop drawing program we created on the last one: export the loop as gif images and clear the animation to start with a new drawing. Both features are triggered by pressing different keys on the keyboard.

As the animation is a 20 frame loop, it does not really matter when we start saving the frames, as long as we export exactly 20. An easy way to export the right amount of images is by having a variable that indicates how many frames we still want to save. If the variable is 0, it means we don't want to save any images. At some point we press the key 's' in the keyboard, and we change the variable, making it equal to the total number of frames in our loop. In the draw loop we just have to check if the variable is greater than 0. If it is, we save a frame and reduce the variable by 1. At some point the variable will become 0 again and the saving of frames will stop.

Once we have exported the frames we can use the command line program 'gifsicle' to pack all frames as a .gif animation, which we can later send by e-mail or upload to the Internet. gifsicle is a free program for .gif animation manipulation. With it you can add and remove frames to a gif animation, compress it, change the delays between frames, reduce the colors and much more.

To clear the animation we just create again all the PGraphics when we press a key. Probably a more efficient method would be to write a loop that calls clear() on each PGraphics (instead of creating them again). If you want to try improve the program by using clear(), take a look at http://processing.org/reference/clear_.html

Tags: gifsicle, animgif, animation, saveframe, pgraphics

Code editor

You can make changes to the code below. Then

Questions and comments

Try to stay close to the topic of this episode. Use the Processing forums for help with unrelated Processing projects (or hire me for help ;-)

To indicate that a word in your comment is code, use the `backtick`. Example
Do `float` and `int` smell similar?
To highlight code blocks, surround it with ``` code-fences ``` like this:
``` void setup() { size(600, 600); } ```