Creating GIFs for SmartMatrix

SmartMatrix can display 32x32 GIFs with good color depth and a high frame rate. There are plenty of free tools for creating and modifying GIFs, but a lot of them limit the frame rate and don't work very well. This tutorial will show you how to use online tools for creating GIF files that will play well using the AnimatedGIFs SmartMatrix sketch and the Aurora sketch running on SmartMatrix.

This guide is meant to be used after you have assembled a SmartMatrix Shield and added a microSD card to play GIFs, following instructions in our other guides: SmartMatrix Animated GIF Player, and optionally SmartMatrix Remote Controlled LED Art Display.

To demonstrate the video and GIF conversion tools, we will work with two simple examples: extracting a short clip from the Big Buck Bunny video, and converting a high resolution looping GIF to 32x32 pixels.

led_matrix_Screen_Shot_2014-12-10_at_12.45.52_PM.png

Big Buck Bunny Downloads

Big Buck Bunny - Youtube

The clip we want is from 5:15 - 5:39

led_matrix_Screen_Shot_2014-12-08_at_2.58.20_PM.png

"Fight Fight!" Looping GIF from Stephen Vyas

So far we haven't found any one site that offers all the features we need to convert video and high resolution GIFs down to low resolution GIFs while keeping the original frame rate. We found enough sites that are good enough at part of the process and can be pieced together to do everything we want.

Converting a full resolution looping GIF to a 32x32 looping GIF is quite easy thanks to ezgif.com. We always want to crop before resizing, so start by choosing GIF Crop at ezgif.com.

Copy the "Fight Fight!" Image URL from Steve Weebly's site.

Paste the URL to the GIF we want to convert, and press "Upload!".

Wait until the GIF has fully uploaded. You can tell it's ready when it starts playing back at normal speed and your mouse turns into a crosshair when you hover over the GIF. Roughly draw a square over the area you want to crop. Either use the handles on the crop area to adjust or manually adjust the numbers until the width and height are exactly the same. It's easier to make rough adjustments with the square and finalize the numbers by typing in the box. Make sure you press "set" after making any manual adjustments.

There are two options for conversion tool, "Gifsicle" and "ImageMagick". We've seen better results with "Gifsicle" so choose that option. Press "Crop It" and wait for the cropped gif to appear below the button. You can make any adjustments needed and press "Crop It" again until you're satisfied with the result.

To get to the next step, find the toolbar right below your cropped image (don't use the toolbar at the top which would reset all the work you just did!) and press "resize". Your cropped image will now be the input file to the resize tool. This part is easy, just put in "32" for both width and height, choose "Gifsicle" again, and press "Resize It". Scroll down and see your final result, a 32x32 GIF. Press "Save" to save a copy to your computer which you can load onto a microSD card for playing through your SmartMatrix Shield.

Converting video to GIF is a bit more complicated, requiring several tools. We found tools that are good for converting a YouTube video to a short MP4 video, a separate tool for converting MP4 video to a GIF while keeping good frame rate, and we'll use the previously covered tool for cropping and resizing the GIF.

YouTube to MP4 Video

The Big Buck Bunny Downloads page offers videos in a lot of formats for streaming and direct download, but it's common to find video on YouTube so we're going to use the YouTube source for this example. It's possible to skip this step if you are starting with a video on your computer or a file that's available for direct download and is small enough for the next tool.

The goal of this step is to convert the YouTube video to a file format our Video to GIF converter can handle, with a small file size. We only want to convert a small portion of the video, so we cut the video down to just what we need to keep the size down. ClipConverter.cc can convert a YouTube Video to a MP4 Video clip.

Open ClipConverter.cc, paste the YouTube URL into the Media URL box, and click Continue.

https://www.youtube.com/watch?v=YE7VzlLtp-4

Select the Standard Quality option and format MP4. Uncheck Start of Video and End of Video and enter the start and end times: 5:15, 5:38. Press Convert, and for this short clip the conversion time should be short.

You can download the clip if you want to save a copy, or just copy the download link if you just want to continue the conversion process completely online. You can get the link by right-clicking on the "Download" button and choosing "Copy Link" from the menu. It's worth downloading and watching the clip now to make sure the right section of video was captured and everything converted properly.

MP4 Video to Animated GIF

While preparing for this tutorial we tried over ten online tools for converting video to GIF but only came away with two that worked well enough to recommend. Most would create a GIF at a maximum of 20fps, and many don't properly insert delays between frames making them play back at at unwatchable high speed using SmartMatrix. These two sites can convert video while keeping the full frame rate.

We got the exact same results from using both these tools, but CloudConvert has more features, looks a bit more modern, and has an API that looks interesting, so we will use them for this guide.

CloudConvert

Conversion

CloudConvert has a 200mb input file limit, but we already shortened the video down to a small clip in the previous step, so we are well under the limit. If you're working with the link from ClipConverter.cc, choose "Add from URL" under "Select files" and paste the link. If you downloaded the MP4 file, click on "Select files" or drag the file onto the page to get started.

Choose "image" then "gif" for the file output type.

Press Start Conversion and wait for conversion to complete. Again, you can download this file or just copy the link to use with the next tool.

Cropping and Resizing Animated GIF

Finally we go to ezgif.com to crop and resize the gif, which is the same process as cropping and resizing the looping GIF we did earlier.

We always want to crop the GIF to a square before resizing, so choose the GIF crop tool. You have an option to upload a file from your computer, or paste the link from earlier. Choose one or the other and press Upload.

It may look like the tool is ready to use, but you may need to wait for the GIF to upload fully. Make sure your mouse pointer changes to crosshairs when you hover over the GIF before continuing.

Roughly draw a square over the area you want to crop. Either use the handles on the crop area to adjust or manually adjust the numbers until the width and height are exactly the same. It's easier to make rough adjustments with the square and finalize the numbers by typing in the box. Make sure you press "set" after making any manual adjustments.

This part is easy, just put in "32" for both width and height, choose "Gifsicle" again, and press "Resize It". Scroll down and see your final result, a 32x32 GIF. Press "Save" to save a copy to your computer which you can load onto a microSD card for playing through your SmartMatrix Shield.

Other Tools

There are other options for tools we won't cover in this guide but are worth looking at:

GIMP - This free and Open Source cross-platform image editor can import GIFs and can be used to crop, resize, and save the result as a GIF file. Jason Coon wrote a guide on how to use GIMP to crop and resize an existing GIF.

Instagiffer is a cross-platform (Windows and OSX) freeware GIF converter that can load content from YouTube, a video you've downloaded, or from any content on your screen. It can't import existing GIF files.

GIF Brewery is commercial software (OSX only) worth mentioning as it does an excellent job of converting videos and rescaling GIFs and is easy to use, and is only $4.99. There are beta versions available to use as a trial before purchasing the software.

Sharing GIFs

If you make a cool animation you want to share online, tag it with #32x32GIF so others can find it, and hopefully we can build up a nice collection for everyone to use.

We will be posting some of our favorite GIFs in the SmartMatrix Users Community on Google+, and in the Pixelmatix Twitter feed.