Go Jim, Stop Jim

Riffing off this: Educator, Learner | Animate (SOME) of the GIFs! – Educator, Learner
And recalling this: Not an animated gif

Click Jim to toggle the animation.

I’ve piut this in Mozilla Thimble if you want to remix or look at code: toggle sprite.

Why Gif?

There is an interesting conversation going on over in the DS106 google group. Sandy Brown Jensen makes some great points which finish with

So for me it has nothing to do with the aesthetics of the gif itself and more to do with crafting a context where placing a gif makes sense.

.Sandy has a great riff in her first column which I’ll leave readers to read in context, but here basic question is:

First of all, figure out your objectives in the cognitive realm, i.e. why do you want to make a gif at all?

This is a question that I sort of asked a while back, But is Gif Art? and had a couple of good answers in the comments. I’d like to expand my ideas here with a few examples. I am sticking to gifs I’ve made, there are a ton of better examples on the

Before I started DS106, like many I though of gifs as the under construction images from geocities websites of the last century. It took me a while to come round.

I had been reading and following ds106 mostly through Jim Groom’s blog when
on a rainy afternoon I wrote:

One of the things that the ds106 folk have been doing is creating animated gifs from very short sections of movies. I am still not sure if I see the whole point of this, but it becomes a very addictive process.


The above gif is, I think, the first one I published, I like it because it isolates an emotion from a movie I like a lot, to me it is some sort of visual commentary on the movie. I was also interested in the process of creating gifs, and this involved some creativity (perhaps not artistic) as I designed my own method.
Later that year I Joined DS106 I had by then been inspired by ds106 and this joined up some dots for me. At that point I could rip a gif from a movie and was mostly interested in keeping the file size down!

This gif is a celebration of DS106 and the energy of Jim Groom in particular, it is 8 frames that I returned too again and again and eventually made a small ds106 meme.

Jim’s Excellent Ted Adventure, Jim in the Air(plane) and Dancing Jim Over the World. These are part joke, part riff on various ideas, they do not tell a story in themselves but become part of a community story that both celebrates Jim and pokes some fun.

I hope the next gif did tell a story, it tries to show a different side of Jack Kerouac.

Most of the Kerouac I’ve seen have been chat show footage with a drunk Kerouac. This clip shows his gentler side.

Like many other folk who watch and enjoy old gangster films, I’ve giffed a few gunshots in my time, I usually feel a bit uneasy about this. It is easy in the relative safety of Scotland, with unarmed police and little gun crime to be complacent, this gif plays with that sentiment:

Over the course of a few rounds of DS106 I’ve become a regular giffer, I’ve a Tumblr full, some from ds106 assignments, some just for fun, some created from movies and some in various other ways. Some are saying look at this, is it not interesting or beautiful. Some are jokes, some are experiments with software, some play with the random and serendipitous. Some have made me see in a different way, to think a bit more visually. Some just provide some relaxation, finding a nice clip spotting a giffable moment, digging it out, optimising it is just nice.

This one is from a film I love and have giffed a few times, Il Gattopardo, the film is made at a different speed that most hollywood offerings, I hope the gif tells some of that.

The next one was, to me, interesting for a couple of reasons, one, it explains something, or give a view and two to make it I created a system so that I can knock similar gifs up in a few seconds when needed to help discuss or explain something.

Ds106 gifs are social, gifs often seem to asks to be reused, remixed, pinged and ponged between groups, there is a special joy when your gif is mixed into something else.

I am not a particularly visual person, as I worried in my first ds106 post:

I am a wee bit nervous about jumping into something that requires visual creativity. While I am happy enough editing images, audio and video I am not good at visual thinking or design.

I preferred podcasting to video because it avoids the difficulties of the moving image. Gifs have given me a way to play with visual elements, think about them notice thing I would have missed and keep alert for the possibilities scrolling by.

I hope that someone, Sandy?, looking a  the first page or two of my tumbling would get a sense of some purpose, fun and diversity rather than things that are mindless and crazy-making as any uncontrollable tic, or at least enjoy the madness around:

For me, instinctively & briefly, gifs are at the heart of #ds106  driven by energy originating from Jim Groom and riffed through the participants. They can disrupt patterns of thought and play havoc with our idea of what a ‘story’ is.

Gif Scraping and a DS106 Gif API

It started, as so many things do, with a tweet(bark?) from CogDog linking to The Best of ds106 GIF TV. This got me thinking of how to automate the gathering of gifs. I remembered that I had done some gif scraping a while back: Doug’s Gifs.

I wondered about scrapping tumblr in the same manner with a wee bit of php. This turns out to be quite simple: Gifs, Gifs


$url = "http://jjgifs.tumblr.com/rss";

$rss = file_get_contents($url);
$matches = array();
preg_match_all('!http://[^?#\s]+\.(gif)!', $rss,$matches);

I didn’t do the regExpression myself, I must have found it on the internet when I made the page of Doug’s gifs. Anyway at this point you have a list (php array) of urls to all of the gifs on the page. I’ve not worked out the best way to handle this, but currently I am writing it to a cache file and only updating it every now and again. The list is put into a JavaScript Array.

The page Gifs, Gifs, loops through a few ds106naughts tumblrs rather than just the one. It then displays a random gif, clicking on this will display another.

This is pretty much proof of concept rather than a well though out solution, but it works. There are a few interesting things that could be done structurally. Alan has already suggested hiving off the generation to a separate php file and a cron job. We could then have a plain html/javascript page for display. He also suggest a next and previous button(√). I am guessing that it might be better to have the list in a database?

Now I have a text file with a list of ds106 gifs, it is pretty simple to have a
ds106GifAPI! This following image should be a random DS106 gif:

a random ds106 gif

The code used:


<img src="http://johnjohnston.info/oddsandends/ds106gif" alt="a random ds106 gif " />

This should give a random gif every time.

THe DS106 Gif API

Imagine you are blogging (or making any webpage) and want an exciting gif to go with your post, but you don’t just want any old gif, you want a random DS106 gif. Safe for work but not for your mind. Now you casn, simply use http://johnjohnston.info/oddsandends/ds106gif as an image url and you will get a random gif every time the page loads.

Given that my gif store is a list of gif urls the code is simple:


<?php
$cachefile = "Path/To/The/Cache/File.txt";
$gifs = file_get_contents($cachefile); 
$gifArray=explode("\n",$gifs);
$thisgif=$gifArray[rand(0,count($gifArray))];
header('Location: '.$thisgif);
?>

DS106 Random Gif API

Faster, Faster, Gif, Gif

I’ve been having quite a lot of fun with animated gifs recently. Mariana Funes @mdvfunes posted a method developed by Michael B Smith for making gifs from fast cut bit of video.

Mariana’s post: The Altered State Gif Technique gives the details.

I’ve been doing some experimenting around this. First I just googled fast cut examples to get a couple of pointers, Requiem for a Dream fitted the bill. I’ve not seen the movie, but:

Aronofsky uses montages of extremely short shots throughout the film (sometimes termed a hip hop montage). While an average 100-minute film has 600 to 700 cuts, Requiem features more than 2,000.

Whenever the characters use street drugs, a rapid succession of images illustrates their transition from sobriety to intoxication. In this scene, Harry and Tyrone deal drugs and Marion uses cocaine while she designs clothes. The speed of the footage and the cuts alternates as the characters become intoxicated and sober.

Made this a good choice.

I was particularly interested in Michael’s idea of using a very few colours, without dithering, this both reduces the file size and helped ensure

the results were surprising and visually interesting

Rather than giving high fidelity.

Using the Requiem trailer from youtube, I sliced out a quick gif. I then experimented with the number of colours when exporting: requiem gif tests. By the time I had hit 16 colours the give was quite dull, brown being the main colour:

At that point I recalled editing the colours on the Firework, optimise palette by hand before, and gave it a go, this resulted in the gif at the top. I think that reflects some of the movies concerns, drugs, and hallucinations quite nicely. I’ve also styled the gif to be a bit wider than it is here which give even more of a pixalated effect which does no harm.

A nice contrast to the ds106 Assignments: Say It Like the Peanut Butter perhaps where:

Make an animated gif from your favorite/least favorite movie capturing the essence of a key scene. Make sure the movement is minimal but essential.

I guess I should submit it.

Finally I made a few psycho gifs using a variation of the idea, slightly tinting and changing the speed for a few gifs, this happened to be the 106th post on my gif tumblr!

Exploring the territory

Yesterday’s Daily Create looked interesting:

Exploration video. Maybe you’re exploring a new land, the depths of quarks, outer space, the mind, the soul, etc.

Given the excessive rain, I started thinking about exploring the mind, vaguely thinking of some sort of psychedelic movie, or even La Belle et la Bête which I’ve grabbed more than one gif from.
I don’t really have the toolkit or skills for skewing some sort of kaleidoscope, tunnel nightmare vision but I remembered I’d used Screenflow to do something like this with titles in my BRIGADS106 movie. and though I could do a little testing.
Screenflow is designed for screen-casting, but it lets you layer video (from its builtin screen-capture and elsewhere), text, and images. It allows you to zoom, arrange, rotate and transition to and from these effect on a layer-by-layer basis.
My first idea was a journey through a dark tunnel/gallery with animated gifs lining the wall. As I started experimenting I realised that this was probably doable, but not by me in an afternoon. I pivoted to do a journey into ds106 as a slightly wizzy screencast using some of screenflow’s effects, even this took most of the afternoon to complete.
In ScreenFlow you can add a ‘video action’ to a clip. After adding this you can set the zoom, rotation etc of the clip before and after the action, Screenflow will tween between the two.
Here is a screenshot showing a clip with a video action (click for full-sized):

Screenshot 2014-02-09 13.42.43

And a gif taken from the exported video.

journey_into_ds106_01

Interestingly you can use gifs in screenflow, I guess they are played via Quicktime, but unfortunately they do not loop. You can get round this by recording the gifs in screenflow. As I’ve been writing this up, I made a very quick experement.

  1. Made a webpage with a few gifs on it.
  2. Recorded the page with screenflow.
  3. In screenflow cropped to a strip.
  4. Imported into screenflow and made a movie rotating the first clip.

To make this work properly I’d need to think a good bit more about angles and timings, but I think there are some possibilities for fun.