GLC with external tools

With the release of the image sequence export feature, I thought I’d play around a bit with making different animations with the frame outputs to see what quality and file size I could come up with.

I started with an existing animation and exported an animated gif from that. Then exported an image sequence from the same animation and used ImageMagick to create another animated gif, and ffmpeg to create an mp4 video. Here are the results.

First, the GLC gif output:

GLC Direct Output - 473kb

That comes in at 473kb and looks decent.

Then the ImageMagick version.

ImageMagick Output - 326kb

That’s 326kb. Looks about the same to me, but significantly smaller. Actually, my initial attempts were horrible. The IM version came in larger than GLC’s output and had all kinds of horrible artifacts. Some research found some command line options that cleaned it up and optimized it nicely. Here’s the command I used to create this image:

convert -delay 3.33 -loop 0 -fuzz 2% -layers Optimize *.png isogrid_im.gif

Note, delay is in terms of 100ths of a second, fuzz cleans up the quantization and -layers Optimize brought the file size way down.

Now that I look at it closer, there’s still a bit of artifacting going on. Raising the fuzz level a bit would probably handle that though.

Onto ffmpeg.

That’s down to a whopping 50kb. But it does look a bit fuzzy. I’m not even going to begin to explain the ffmpeg command line I used, because I hardly understand it myself.

ffmpeg.exe -framerate 30 -i isogrid_%0
4d.png -c:v libx264 -r 30 -pix_fmt yuv420p isogrid.mp4

Here’s the page I gleaned that info from: https://trac.ffmpeg.org/wiki/Create%20a%20video%20slideshow%20from%20images

There are probably options that would improve the quality at the expense of some file size. Another interesting concept is the idea of including audio in the mp4. or creating multiple animations and stitching them together in a longer movie. Of course, you could just pull all the files into some video editor and do the same thing that way.

I was going to try gifsicle as well, but that requires individual gifs as input. Won’t take pngs.

Anyway, there’s some things to try. I’d love to hear any additional tools or techniques you come up with.

I had to turn off comments here. 10,000 to 1 spam to comment ratio. But tweet with the tag #gifloopcoder and I’ll see it.

Version 1.3.3 Image Sequence Export

Initially, this post was about version 1.3.2. Turns out this had a nasty bug where image export would never end. Once you exported images for an animation, every time you ran an animation after that, it would continue to pump out frame images. All fixed now.

Hot on the heels of 1.3.1 comes 1.3.21.3.3. This adds a feature I’ve had on the list for a while – the ability to export an animation as a sequence of individual images. It also fixes the OSX version by adding in an edit menu, restoring copy, cut, paste, select all, undo, etc.

https://github.com/bit101/gifloopcoder/releases/tag/1.3.3

Image sequence export is somewhat similar to the sprite sheet export, but in this case, every single frame is saved out as a separate image file. You’ll get a file save dialog allowing you to choose a file name. The actual files will have sequential numbers appended to them. For example, if you had a 2-second animation at 30 frames per second and chose myanim.png as the file to save to, you’d wind up with 30 files named myanim_0000.png through myanim_0029.png. It’s best to choose an empty folder to save these in, as for longer animations, you could wind up with hundreds of images.

I was surprised how well this works and just how quick it is. I maxed out the duration and fps sliders to create an 1800 frame animation and it handled it all without a hiccup.

Having image sequence export opens up a whole realm of possibilities:

First, the GIF encoder included in GLC is not the best. Hey, it’s written in JavaScript. I didn’t write it, so I won’t complain. And it does the job. But there are better tools out there that will probably do a better job at compression and color quantization. For example, you can use ImageMagick on the command line within your export folder something like this:

convert -delay 3.33 -loop 0 *.png anim.gif

Note that ImageMagick’s delay is in terms of hundredths of a second. And it has all kinds of other options to tweak the output. You could even combine the output of multiple animations together to have a longer gif.

Gifsicle is another command line tool that allows you to create gifs from image sequences. Photoshop will also do this.

This also opens the door to formats beyond gif. There are plenty of other programs that will create video files from image sequences.

Version 1.3.1 – template, snippets, console

Version 1.3.1 is up at https://github.com/bit101/gifloopcoder/releases/tag/1.3.1. Main new items:

1. The template used to create a new sketch is now editable. Look in the config folder for template.js and edit that. On Win and Linux that’s:

glc-xxx/resources/app/config

On OS X it’s:

glc-osx/GIFLoopCoder.app/Contents/Resources/app/config

You’ll have to right-click and choose “Show Contents” on the .app file if you’re going in through the Finder.

2. Editable snippets. Snippet files are in the config/snippets folder. Same steps as in #1. The file name, minus “.snippet” is what shows up in the dropdown. The contents are the snippet itself. Object snippets are all hard coded, but you can add any custom ones you want here. If you come up with some good ones, share them and I might include them. Any ideas on a good way to share them? A separate git repo?

3. Console button. The toolbar has a console button that opens up the dev tools console on the embedded Chrome browser. Useful for debugging your sketch.

A few bug fixes and minor improvements, but those are the big items. I’ll very shortly be releasing 1.3.2 which will include exporting an image sequence. Basically, you choose a folder and file name, such as “animatons/foo.png” and it exports each frame of the animation as a separate numbered image: “animatons/foo_0000.png”, “animations/foo_0001.png”, “animations/foo_0002.png”, etc. It’s all working fine, just need to do some more cross-platform testing.