This is part 11 of an N part series detailing how I make my animations.

Prev Next

So you’ve made a data visualisation but how do you show it off?

To do that we need to output the animation to some sort of video file and then find some site willing to host it.

I found Processing’s default video creation somewhat underwhelming so I used a slightly more tricky but far superior technique. You will need to download two things, a video creation tool called ffmpeg and a library that plugs into Processing which uses that called Video Export.

First download ffmpeg from ffmpeg.org. I use windows so merely unzip it somewhere (I have a folder called c:\tools\ for such things where I unzipped it and renamed the folder to ffmpeg . Put c:\tools\ffmpeg\bin into the user path — I use eveditor.com for this — and you’re good to go).

Now install Video Export by running Processing and open the Contribution Manager by going to the Tools/Add Tool... menu. Select the Libraries tab and search for Video Export. Click install and you’re done. There’s more info on funprogramming.org.

To use Video Export you first need to import it into your sketch so add these lines to the top of the file:

import com.hamoid.*;

VideoExport videoExport;

hamoid is the github user id of the developer (check out his github account) so I guess he named all the libraries with that as a prefix. The second line defines a variable called videoExport of the type VideoExport . Looks confusing until you get used to it.

Next thing we need to do is tell Video Export about our sketch so in setup() add the following:

videoExport = new VideoExport(this);

videoExport.setFrameRate(30);

videoExport.startMovie();

new VideoExport(this); creates an instance of the type VideoExport providing the current sketch denoted by this so that it can access the frames.

We are now ready to save individual frames to the video so at the end of draw() add:

videoExport.saveFrame();

It is important to execute videoExport.endMovie() when the animation finishes as the video file may get corrupted, if the video doesn’t play then check that this command is executed.

This creates a video file called processing-movie.mp4 in your sketch folder which you can play in your favorite video player.

On your first run of a sketch using Video Export a window will show asking for where you installed ffmpeg.

Check the end of the post to see the full source code of the Keeling animation including the Video Export commands.

So now how do you create a gif? By using ffmpeg of course!

You can simply open a dos prompt¹ or terminal and execute:

ffmpeg -i processing-movie.mp4 processing-movie.gif

This will work most of the time but if you create a video with more than 256 colours you’ll find the quality drops considerably in which case things get a tad more tricky. In this case you need to execute two ffmpeg commands. First is to find out all the colours used in your video and then create the gif using that palette by using these two commands:

ffmpeg -i processing-movie.mp4 -vf "palettegen" -y palette.png

ffmpeg -i processing-movie.mp4 -i palette.png -lavfi "fps=50,paletteuse" -y out.gif

For the full gory details read pkh’s blog. I turned the above into a batch script file called makegif.bat :

ffmpeg -i %1 -vf "palettegen" -y palette.png

ffmpeg -i %1 -i palette.png -lavfi "fps=50,paletteuse" -y out.gif

Simply executed by makegif processing-movie.mp4 and it creates a gif called out.gif .

Now we have an mp4 and a gif file! What do we do with it? We need to host it somewhere so it can be shared. So here are your options:

Twitter: Simply attach your mp4 file to a tweet. If it’s longer than a certain amount a trimming dialog appears but if you move the start and stop indicators to the beginning and end of the video twitter will happily host it.

YouTube: Upload and go, can add music from YouTube’s free music library, which is nice.

FaceBook: Simply attach your mp4 to a post.