GIF-scrub.

September 29, 2012 11:09 AM

GIFCTRL is a Tumblr that allows you to control a GIF file's playback with your mouse. Move your mouse left or right to control the direction of playback; click to change GIFs. The slow-motion cymbal hit is great intro!

The skateboard GIF is also well-executed. Moving your cursor to the edge of the frame to "skip" within the GIF also results in some interesting effects.

There is also a "Add Your Own" link, though it is temporarily down. :(

posted by raihan_ (16 comments total)

That's a lot of Kanye.

Still, pretty cool.
posted by carsonb at 11:15 AM on September 29, 2012 [1 favorite]

Man, that studio is even dustier than mine.
posted by StickyCarpet at 11:18 AM on September 29, 2012

Like many things in life, far, far, far too much Kanye
posted by mikoroshi at 2:39 PM on September 29, 2012 [1 favorite]

This is neat.

Though, I quickly became tired of the work of having to control the GIF to watch it and just started leaving my mouse off the window so that I could watch it play normally.
posted by Hicksu at 2:54 PM on September 29, 2012

trying not to threadsit but it looks like they've updated w/ two more::

fresh prince!! (i wish there was the carlton dance, though)
beyonce's willow smith impersonation (which is really cool)

....and there's another beyonce gif that totally makes me re-enact "she's so hot" by flight of the conchords, but you can click through to find it! exasperated swoon/sigh goes here
posted by raihan_ at 2:55 PM on September 29, 2012

Very interesting!

I was looking earlier this year to write a software GIF player (where I could sequence GIFs) but I was surprised to find that there were very few solutions in external players or languages (for example, my favorite C++ toolkit only displays the first frame...!)

Unfortunately, the source for GIFCTRL is obfuscated, and I wasn't really able to figure it out. Pretty amazing programming though!

(The choices of GIFs are pretty samey - except that cymbal crash...)
posted by lupus_yonderboy at 3:23 PM on September 29, 2012

lupus, GIFCTRL does not actually control GIFs. The image sources are long PNG strips, expanded to fill the screen and moved left and right to simulate the appearance of an animated GIF.
posted by migurski at 3:41 PM on September 29, 2012 [5 favorites]

(which makes me wonder why they didn’t choose JPEG images for a significantly faster load)
posted by migurski at 3:42 PM on September 29, 2012

I looked at one, and immediately went " Oh my god how does- wait i think i know how that works." And look at the source code. It was much more mystical when it was an actual gif that was played when your mouse scrolled. But it's absolutely genius to change the background in sequence like that. I'd have never have thought of it.
posted by FirstMateKate at 3:45 PM on September 29, 2012

Unfortunately, the source for GIFCTRL is obfuscated, and I wasn't really able to figure it out. Pretty amazing programming though!

Just spent a bit of time figuring out it. The main file is a big chunk of random unnecessary JS libraries (JQuery, jQuery Rails, jquery.pjax.js, jquery imagesLoaded, Google Analaytics ....), concatenated together and mixed with the app code.

The key function is this, which appears several times in different variants:

e("#frame").css({"background-size":""+h*n+"px "+t+"px","background-position":"-"+(a*h+l)+"px -"+c+"px"}

Pre-obfuscation it would have looked something like this:

$("#frame").css({"background-size":""+windowWidth*totalNumberOfFrames+"px "+windowHeight+"px","background-position":"-"+(currentFrameIndex*windowWidth+yOffset)+"px -"+xOffset+"px"}

This centres one of the frames in the window, and stretches it to fill the screen.

I've left out the lines before that check whether the image is taller or wider than the screen, and do slightly different maths for each.

To make the scrubbing work, the mouseover event handling code there are these two lines:

u=Math.floor(i/h*100),
a=Math.floor(u*n/100),

Which would once have been:

mousePositionPercentage=Math.floor(mouseXposition/windowWidth*100),
currentFrameIndex=Math.floor(mousePositionPercentage*totalNumberOfFrames/100),

Essentially this converts the mouse position to a frame index, albeit in a needlessly convoluted fashion. The previous CSS setting code is then called to change the actual image.

Very simple really.
posted by grahamparks at 4:34 PM on September 29, 2012 [5 favorites]

Real clever method of faking it. Wish it could be actual GIFs, though! A friend of mine had the idea that this would be amazing with porn gifs. Silly friend!
posted by wemayfreeze at 7:49 PM on September 29, 2012

Damn, I spent, like, 2 seconds on this, wrote a comment, came back and you did all the work like programming elves.

I am humbled. Also, somewhat disappointed 'cause I was really hoping to finally write that GIF sequencer... :-D
posted by lupus_yonderboy at 11:03 PM on September 29, 2012

Ok, codemonkeys, how does it compare to Buzzfeed's "rubbable" gifs?
posted by radwolf76 at 7:56 AM on September 30, 2012 [2 favorites]

That Buzzfeed library looks like an actual GIF parser. It reads out raw pixel data and blits it to a canvas element in the putFrame method.
posted by migurski at 10:07 AM on September 30, 2012 [2 favorites]

Now that's a whole different thing. They've written a complete binary-level GIF parsing algortihm in Javascript: header pasrsing, LZW decompression, de-interlacing, transparency, color tables, the lot.

It pre-renders each GIF frame into an RGBA buffers, then renders each of those into a canvas as you scrub.
posted by grahamparks at 10:07 AM on September 30, 2012 [2 favorites]

Yowza! Upvotes all round!

Buzzfeed looks like just what I needed and is causing me to reconsider a project I shelved extremely early...
posted by lupus_yonderboy at 4:12 PM on September 30, 2012