Wiggle Gifs

I’ve been here before but a couple of wiggles jumped out of the photos app today.

Both were photos that the phone decided to take HDR photos and I’ve set it to keep a ‘normal’ one two. I’d obviously moved enough in the fraction of a second that separated the two images in each case. arrow-keying through the photos previewed me the wiggles. So:

  1. Export
  2. Open in fireworks
  3. Copy one image
  4. Make a new state and paste in.
  5. Export as Gif.

On the Hawthorn berries I did a quick copy of the sky from the first frame to the second to keep the background a little stiller.

A bit late for #tdc2098 We’re All Changing | The (new) Daily Create

This is #DS106

One of the best things about DS106 is the riffing and playing with other participants. I dipped my toe in the daily create stream yesterday and pulled out a great example:

As I saw this late there were already a great bunch of responses, I giffed:

tdc1713

I had intended to have the notes ping right off the sheet, but this looked ok and it was late (so late I lost a few frames that would have made the jump a little more dynamic).

Todd said:

and Ron:

Today Viv iced the cake:

There are deeper thinks going on on DS106 but this is #4life

Drunken Gifs

One should always be drunk. That’s all that matters…But with what? With wine, with poetry, or with virtue, as you chose. But get drunk.

― Charles Baudelaire

I find gifs intoxicating, not the looking at them but creating. This is ridiculous. I find sitting down to rip a gif out of a movie and crush it to as small as possible, or to script some sort of weird concoction a lot of fun.

This morning I read Alan’s post: Ooh Ooh Mr Kotter! I Know How To Optimize My GIFs!. It is great, a reminder than some of the fun of giffing is keeping the file size down.

Alan uses photoshop. I’ve never really got a grip of that application. I tend to use firefox, gifsicle or even javascript.

I though that I would se if I could replicate the sort of optimisation he writes about using gifsicle, for a wee bit of fun and learning. I’ve blogged about gifsicle a fair bit here. Gifsicle is a commandline application for working with gifs. It can be downloaded from Gifsicle: Command-Line Animated GIFs.

I stared by a sort of replication Alan’s use of GIPHY’s GIF Maker. I took:

and fed it through the giffy tool.

Like Alan I ended up with a huge gif 4.5MB worth.

So I downloaded it and got some info about it with gifsicle on the commandline:

john$ gifsicle -I drunk.gif
* drunk.gif 45 images
  logical screen 480x270
  global color table [256]
  background 2
  loop forever
  + image #0 480x270 transparent 2
    disposal asis delay 0.07s
  + image #1 480x270 transparent 2
    disposal asis delay 0.06s
  + image #2 480x270 transparent 2
    disposal asis delay 0.07s
  + image #3 480x270 transparent 2
    disposal asis delay 0.07s
  + image #4 480x270 transparent 2
    disposal asis delay 0.06s
  + image #5 480x270 transparent 2

There were a good few more lines, but I got the idea that there were 45 frames, each about 0.07 seconds long.

The plan was to reduce the colours, the number of frames and increase the length of frames to compensate.

The first thing I tried was:
gifsicle -U -O3 -d 28 --colors 128 drunk.gif `seq -f "#%g" 0 4 45` -o drunk-128.gif

What this does

-U: unoptimises the input gif

-O3: optimises the output

-d 28: set the delay to 28/100 sec

  • colors 128: cuts down the number of colours

seq -f "#%g" 0 4 45 is a clever bit:-) it produces a sequence of numbers with # in front between 0 & 45 in jumps of four. This causes gifsicle to use those frames of the original gif. We have reduced the number of frames and increased their length to keep the animation the same length.

This resulted in a 1.1MB file, not too good. I repeated the exercise with 64 colors, which got the gif down to 800kb

drunk-64

Not too bad but still a bit big. I then remembered there was a version of gifsicle that could do lossy production of gifs. Alan mentions using this in photoshop. I had downloaded this before but lot it. A qick google found this interesting post: Lossy Optimization for Animated GIFs – Rigor and lead to Lossy GIF compressor where I downloaded the modified version again.

I could now:

gifsicle -O3 --lossy=80 -U -d 28 --colors 128 drunk.gif `seq -f "#%g" 0 4 45` -o drunk-lossy-128.gif

Which give me, a 480k gif:
drunk-lossy-128

gifsicle -O3 --lossy=80 -U -d 28 --colors 64 drunk.gif `seq -f "#%g" 0 4 45` -o drunk-lossy-64.gif reduces the colours and weighs in at 391k (from the original 4.5MB).

drunk-lossy-64

I decided to push the lossyness a bit to:
gifsicle -O3 --lossy=160 -U -d 28 --colors 64 drunk.gif `seq -f "#%g" 0 4 45` -o drunk-lossy-160-colors-64.gif

drunk-lossy-160-colors-64

This only shave the gif down to 325K so I think lossy=80 seems a good compromise.

This sort of gif fun might not be everyones drink, but if you are interested, I’ve some more scattered around this blog including: Taking Command of Gifs – 106 drop in and Gifsicle Comparison

Gif Switchback

With 3 unsatisfactory draft post sittin’ in the chuck waggon. I am delighted to have to the opportunity to boil some coffee, sit back and shoot my mouth off. Or rather shoot this gif out from the hip:

Frame Delay 7/100 sec
Frame Delay7/100 sec
Frame Delay 14/100 sec
Frame Delay 14/100 sec
Frame Delay 20/100 sec
Frame Delay 20/100 sec
Frame Delay 28/100 sec
Frame Delay 28/100 sec

If I have to justify this in terms of DS106 I refer to a bit of char on Alan and Mariana’s radio show: A Bit of Rodeo Clowning on First High Noon Radio Show – DS106 Tricks where Alan talked about thinking about size, quality and the like in animated gifs and trying to make them look good and keep the size down. Then Sandy mentioned on G+ that this gif was a bit quick.

A couple of older experiments with gifs:
Gifsicle options
‎requiem colour pallets

And a post Why Gif? might be relevant.

Taking Command of Gifs

These are some notes on creating gifs and manipulating images on the command line on a mac. I am pretty much at the limit of my knowledge here so some of the details may be sketchy. It seems to me that this allows one to iterate through various ideas quite quickly. I do often take the result into Fireworks for some tweaking of colour palettes.

GIF IT UP – DigitalNZ is on.

Calling all GIF-makers, creatives, history nuts, and animators! GIF IT UP is a challenge coordinated by DigitalNZ and the Digital Public Library of America to find the best GIFs created from copyright-free heritage material.

The early entries look formidable GIF IT UP 2015, but I am trying out a few things in the hope of getting to something worth entering.

One of the suggested sites for source material is Europeana and I found a nice set of images: Book on Swordsmanship and Wrestling from the mid 15th century. I though a selection might make a nice flip-book. Here is the process:

Gather the images

This was a pretty manual process. I decided to grab the ones for fencing. Loaded each pages in the browser then right clicked and downloaded all of the jpgs to a folder.

Resizing images

I now start to use the terminal.

To move into the folder of downloaded jpegs I type cd and then drag in the folder, which gives me:

cd /Users/john/Desktop/DS106GifitUP15/swords2

I hit return and I am in the right folder to do some work.

Then I make a new folder for smaller pictures:
mkdir 500
This produces a folder called 500.

Next resize all the downloaded jpgs to smaller versions in the 500 folder:

for i in *.jpg; do sips --resampleWidth 500 $i --out 500/$i;done

What this does:
for i in *.jpg for every jpg

do sips --resampleWidth 500 $i --out 500/$i; sips in an image manipulating programme build into OS X, the $i variable refers in turn to each file. so for a file 5055078.jpg we are doing this:

sips --resampleWidth 500 5055078.jpg --out 500/5055078.jpg

done lets the loop know where to finish.

For all the jpgs, resize to 500 pixels wide putting resized version in the 500 folder with the same name as the source file. The semicolons separate sections of code creating a loop.

Making Gifs

I then cd 500 to move into the new folder and mkdir gifs to create a folder for gif files. Then:

for i in *.jpg; do sips -s format gif $i --out gifs/$i.gif;done

Which uses sips to create gifs from the jpgs, name like 5055078.jpg.gif Not the most beautiful names but these are only temporary files.

Animation

Now I had 49 single gifs, not yet animated. To animate them I use Gifsicle. This needs to be installed, there is an installer on that link or it can be installed through homebrew 1

49 frames is a few too many I decided to try 11. Gifsicle had a lot of options, I just used a few typing: gifsicle --delay 20 --colors 64 --loop then dragging 11 single frame gifs into the terminal window to add them typing -o fight.gif This looks pretty messy but hitting return gives me a gif fight in the current directory (500).

fight

Montage

The next idea I had was to have several fights going on at the same time. For this I needed to make a set of images made up of 4 of the original images in a 2×2 grid.

There is a commandline application montage 2 that is installed as part of ImageMagick This can be installed via a download or with homebrew (or macports). Homebrew will take care of installing any dependencies as it goes.

Basic use of montage might be:
montage -tile 2x -geometry +0+0 5055069.jpg 5055123.jpg 5055228.jpg 5055280.jpg montageexample.jpeg

If you were in a folder containing images named 5055069.jpg, 5055123.jpg, 5055228.jpg and 5055280.jpg the -tile 2x parameter tells montage to make a 2x wide grid, -geometry +0+0 means there is no gsap between images and seems to stop the auto thumbnailing.
This gives you an image like this:

5055262

But I want to go through the images creating lots of different sets of 4 images. I don’t want to do this by hand.

By this time I am a fair way out of my comfort zone and need to scrape my memory and google a bit. What I need is xargs.

I am still in the folder with all the 500 pixel versions of the jpgs. First I make a new folder for the montages mkdir mont.

Then:
ls *.jpg | xargs -n 4 sh -c 'montage -tile 2x -geometry +0+0 "$0" "$@" mont/"$0" '

The first bit: ls *.jpg , just get a list of all of the jpg files, and the pipe, |, sends it to xargs.
The -n 4 means that xargs uses sets of four out of the list, sh creates a command for these sets which is:

'montage -tile 2x -geometry +0+0 "$0" "$@" mont/"$0" '

The “$0” “$@” just lists the set of 4 images, I did some testing with

ls *.jpg | xargs -n 4 sh -c 'echo "$0" "$@" '

To figure that out.

I end up with a set of jpgs with a different grid of 2×2 images in a folder.

Screen Shot 2015-10-19 at 15.01.35

I delete the single one at the end and now I can make a gif with sips and gifsicle, repeating the process above:

fourby4-32colors

 

And:

fencing-6x-6

I tweaked the colour pallet in fireworks for this last one, getting rid of the white borders.

There is a lot more to explore in this, I am starting to test gifsicle’s dither and colors options and will probably post a bunch of tests soonish of the results. I am also wondering if I can do some sort of zoom effect, like a movie zooming out from one fight to a battlefield…

Update: Gifsicle Comparison some tests of gifsicle parameters.

  1. homebrew installs the stuff you need that Apple didn’t. You can get a lot of interesting command line applications using it.
  2. ImageMagick: Command-line Tools: Montage Use the montage program to create a composite image by combining several separate images. The images are tiled on the composite image optionally adorned with a border, frame, image name, and more.