Making animated gifs from openframeworks using FFMPEG

making-animated-gifs-from-openframeworks-and-ffmpeg.md

Making animated gifs from Openframeworks using FFMPEG

Making gif loops from Openframeworks is really cool but, isn't simple as suppose to be.

Here are the steps I do to make that. Look almost the whole process are mostly mechanical and could be automated.

These steps are:

1. Setup resolution
2. Setup framerate
3. Capture frames
4. Generate a palette
5. Assemble frames into gif file

1. Setup resolution

The lower resolution is, the lightweight file you'll get. For Twitter and Instagram for example, 1:1 aspect ratio is very suitable and looks great on newsfeed.

If you would like to set some 1:1 resolution on your OF projector, you could do that just change the ofSetupOpenGL values.

ofSetupOpenGL(640,640,OF_WINDOW)

My creations are published in wide resolutions, mostly of then I use 16:9 aspect ratio because that aspect ratio is widely covered. Then I have to take care of my graphics to be fluid, this means, despide changing the resolution, all the graphics will adapt to that without compromise (so much) the final result.

2. Setup framerate

This is important to worry about because the final output could have a slight different frame rate. There are many reasons for that, the most common is dropped frames. If some creation takes lot of time to process per frame, this means the OF could drop some frames to keep it running and you could lost some frames at the end.

The solution I found is a kind controversial, change the framerate to 48fps or 64fps.

ofSetFrameRate(64);

I know, it's a kind controversial because the most framerate is, the most processing time to render every image the host computer will takes. But trust me, the final result is a more smooth animation, even if there are dropped frames.

3. Capture frames

This is a simple one, just add some way to start and stop capturing frames on the creation. It's just a example, you can implement that mechanism anywhere in your OF application.

1. declare this variable in ofApp.hpp file.

bool shouldSaveScreen;

2. Then , add the following lines at ofApp.cpp file.

// inside method `ofApp::update`:

if (shouldSaveScreen) {
    ofSaveFrame(true);
    shouldSaveScreen = false;
}

3. Add this code at ofApp::keyPressed method:

if (key == 'c') {
    shouldSaveScreen = true;
}

That following blocks of code, will generate png files of every frame that has been rendered while the key c is preesed.

4. Generate a palette

After all frames have been generated, is necessary to create a palette of colors to calculate and optimize colors over the sequence when the png files be assembled into a single gif image.

To do that, open a terminal window and go to same folder where all png files were rendered, so:

ffmpeg -start_number 10 -i %02d.png -vf palettegen palette.png

This will create a new file named palette.png where all colors almong frames willl be hosted.

5. Assemble frames into gif file

Finally, it's possible to generate the final gif, to do that, use the following command:

ffmpeg -v warning -start_number 10 -i %02d.png -i palette.png -lavfi "paletteuse" -y out.gif -thread_queue_size 512

If everything works, a new out.gif file will be generated. Note the instruction -thread_queue_size 512, this could be required if your system don't allocate much resource to run ffmpeg process.

Thank you, I hope it could help you or someone :)

References

1. https://superuser.com/questions/666860/clarification-for-ffmpeg-input-option-with-image-files-as-input

Hey thanks! It works even now :)

Glad to know @SomTambe. I hope it really helps you.
Cheers,