A Touch of Don

Apologies for the large size of this gif 1.5MB, but 52 frames!

Apologies for the large size of this gif 1.5MB, but 52 frames!

The offshoot of ds106 that is #giffight has given me a lot of fun. Every so often the giffight tumble posts an image with the invite for anyone to use it to create an animated gif from. You post it to tumblr tagged giffight or tweet and it is added to the gifight tumblr.

The latest iteration came out of MBS — Started another Tumblr – Don Draper is Zen I’m… celebrating the end of Mad Men by placing a meditation Don Draper over an animated background Michael provided a nice psd file with Don Drifting into the OM.

I made a few and then saw this tweet:

Which got me thinking

At first I was thinking of some sort of server size thing using Gifsicle,
ImageMagick or GD – Manual and the like. These both need resources that I don’t have access to (unless the raspberry pi) and skills I don’t have.

I then wondered about the various JavaScript Gif mashup I’ve made (squares for example) and if I could do that. I also recalled bookmarking a new (to me) JavaScript library for creating animated Gifs, gif.js. It seemed faster than the one I’d used before.

After much testing and playing around I’ve managed to get to a place where I’ve got a webpage that makes Don Zen Gifs that you can add an image as a background, or generate some random stuff as a background and get a gif. The interface is a bit rough at the moment. Don’s Gif Zen

751kB

751kB

277kB a wee bit better

277kB a wee bit better

The gif.js library does all of the hard work. I could not get some of the functions to work and had to kludge around them. I can see them working on the Canvas example page but I failed to get them to work here.
Basically what my pages does is let you upload an image, it displays that on a canvas element then loops through the Don frames adding them over the background. I should have been able to export that to the gif, but this failed so I create hidden png images and pass them to the gif encoder.

The alternative buttons just generate randomish backgrounds in the same way as I did for squares.

The great thing about the JavaScript approach is it needs no really amount of resources on the server. All the work is done on the end users browser. That means it is quite slow on a mobile.
I’ve tested on Chrome, Firefox and Safari on mac and it seems to all work fine there now (I had some early problems in Safari & firefox) Chrome & Safari seem faster than FF. It also works on mobile Safari on my iPhone. I quickly tested IE9, a fail and 10, works on Windows using virtualbox but would be interest to hear for others.

Finally I’ve used the same idea to take the ds106 Assignments: Dancing Jim all over the world from a 2 and a half star assignment to a 1 star one.

Dance Jim Dance

dancin-jim

Watch out for that horse, Jim: GIF challenge #2

How on EARTH did I miss the #DS106 GIF challenge in preparation for headless DS106, which begins August 26th?  I blame my absence from Twitter.  But August is only 3 days in, so it’s easy to join the challenge without feeling overwhelmed.

I’m guessing Talky Tina is responsible for the GIF challenges.  Challenge #2: “Dancing Jim All Over the World” can be found here.  Go ahead.  Click the link.  I’ll wait….

…. It’s funny how Talky Tina and Alan Levine both really like to throw out challenges.  Alan just issued a Daily Create challenge back in July.  So odd…

I was just thinking today how I missed DS106 and how I haven’t blogged lately or made anything lately.  And my thinking about thinking about WordPress rabbit holes isn’t something I want to unpack right now.  The GIF challenge really couldn’t have come at a better time.

Here’s my submission for challenge #2:

Dancin' Jim & the Headless Horseman

Dancin’ Jim & the Headless Horseman

Boy oh boy do I love the Disney version of The Legend of Sleepy Hollow.

I’m pretty sure we watched it every Halloween in elementary school, so there’s lots of youthful nostalgia attached.

I did another Dancin’ Jim assignment back in the spring.  Despite that, I couldn’t remember the steps I took to build the Bava in the Boardroom project, so I spent a lot of time trying to find tutorials that made sense to me.  Bits and pieces of this 12-minute Youtube tutorial was helpful.

I was going to attempt to insert the dancing Jim into a short clip from The Legend of Sleepy Hollow, so I downloaded the last several seconds of this Youtube video using Clip Converter:

In the end I opted to use a still from the clip I downloaded.  I opened that still in Photoshop and then opened the dancing Jim GIF.

Photoshop screen shot

Photoshop screen shot

I duplicated the still nine times since there are nine frames in the Jim GIF.

Photoshop screen shot

Photoshop screen shot

I then duplicated a Jim layer for each layer of the headless horseman.  I made sure layers corresponded (layer one of Jim was visible in layer one of the horseman.  Layer two of Jim was visible in layer two of the horseman.  You get the idea).

Photoshop screen shot

Photoshop screen shot

I previewed the GIF, noticed that Jim was dancing way too fast, and changed the duration of each frame to 0.2 seconds.  I then saved the GIF for web and devices and called it a night, because it was late.

Photoshop screen shot

Photoshop screen shot

I don’t remember there being as many steps the first time I tried this assignment, so I feel like I did things the hard/long way.  I really need to work with Photoshop on a daily basis, or else I forget EVERYTHING.

Guess I should assign myself my own daily create challenge.

Dancing Jim All Over The World

I did this assignment for a number of reasons, but mostly because only one other person has done it and it’s one-star, so it’s unlikely anyone else will. I thought it might be fun to up the game a little. Earlier this semester Jim riffed an assignment by Brian Bennett, here, where he took Brian Bennett’s version of this assignment and expanded it into a gif enclosed in an old ad. So, he made a Visual Assignment into an AnimatedGIFAssignment.

Well I took Jim’s Assignment and riffed it, don’t worry I have screenshots for a tutorial later, I added another layer and a whole separate process for combining the layers so that you can have Jim dancing in poor Norma’s mouth as she lets out one final scream in agony.

First of all, if you want to do this one you’re going to need to grab the .gif of Jim dancing a fool from this assignment. You should know how to make a .gif and what a .gif is at an image file level, this tutorial will help you understand that if you don’t already. You will need Brian Bennett’s .xcf of the TV with the transparent screen, found here.  Here’s a link to Norma’s mouth, should you ever need that for anything else. And finally you should read Jim’s method of using a gif behind another layer of image, link here, specifically the section about duplicating image layer that will sit on top of the .gif.  I know that’s a lot of information, but it’s easier to understand if you’ve read that stuff, because I would just be copy-and-pasting their instructions anyway and this way you can see multiple assignments.

So, my method is a lot like Jim’s. Except I add another layer underneath the dancing Jim Groom. Thus there are three main sets of layers that need to be created. Two of the sets are the same across every frame and one of the changes, fortunately you only need to pull the image of Jim Groom into the frame (much easier).

You will need to ‘Merge Visible Layers’. This is done from the layers window in GIMP. Also, we’re using GIMP. Should’ve said that earlier. First you get your layer on the same workspace. Then create a duplicate layer for every gif layer in both the front and back image sets. So, if your .gif image set is 12 images, then you should have 12 front images and 12 back images.

Now we layer, just like Jim shows us in his walkthrough. After you have arranged them correctly, click all the eyes so that no frames except those you want to marge are visable, like this:

Now click Merge Visible Layers, this will prompt a pop-up window, which may be hidden by the multiple windowed GIMP software, so look for it. It should look like this:

Make sure you click ‘clipped to image’ or it may rearrange the layers. Click okay and you should have a single layer in place of the previously visible three layers:

And then you will have the final product:

One Star? I feel like this was more than one star’s worth of work…

Dancing Jim all over the world

Take the template gif of Jim Groom dancing and add a background and foreground, to make him dance in an interesting place.