Photo Corners headlinesarchivemikepasini.com


A   S C R A P B O O K   O F   S O L U T I O N S   F O R   T H E   P H O T O G R A P H E R

Reviews of photography products that enhance the enjoyment of taking pictures. Published frequently but irregularly.

Going Beyond The Wigglegram Tweet This   Forward This

22 May 2013

Take your ordinary stereogram of the last century, turn it into a two-frame animated GIF that loops continuously and you have a wigglegram.

What's the attraction?

The viewer gets a three dimensional sense of the scene. One view from the perspective of one eye, the other from the perspective of the other eye. Rapidly flashing back and forth, over and over. You seem to get a three dimensional effect.

A Wigglegram. Just two images to simulate three dimensions.

If you don't get car sick first.

We prefer a slow animation to a rapid one and more than two images for a smoother transition from one side to the other. But we can't say we much like wigglegrams. Because, you know, we can't stand to look at them very long.

That's mainly because they keep looping. We have no control over them. Either the speed or the number of times they loop. We can't even pause them.

All of which qualifies them to be tossed into that box in the corner marked "Photo Gimmick."

Except for one thing, which we discovered one day when we wandered over to Jeffrey Friedl's site.

A FRIEDL DOESN'T WIGGLE

His is an odd URL -- regex.info -- but it's also a clue to how we first encountered Friedl. He authored Mastering Regular Expressions in 1997 and we bought the first edition. We'd been writing regular expressions (text search and replace routines) since the 1980s to expedite typesetting and finally found a book on the subject. Which we devoured.

The next time we encountered Friedl it was when we were looking into one or another of his Lightroom goodies. He's written a lot of plug-ins and some great articles on color spaces, autofocus and NEF compression.

So every now and then, we'd visit his blog to see what he was up to. And one day he was up to wigglegrams.

But not your ordinary wigglegram.

These wigglegrams don't wiggle. Nor do they loop. Nor do they autoplay. Instead, they are 13 to 17-image compositions you scroll through by rolling your mouse across the frame.

Animatable Wigglegram. By Jeff Friedl (17 frames) — slowly sweep mouse from side to side to view 3D effect

And as you do that, the background revolves around the subject. It is, simply, stunning.

Friedl calls them animated wigglegrams. But we find that so modest it's misleading. They really seem to us like a different category of photography. Scrollograms, maybe. Hereafter, though, just grams.

HOW IT'S DONE

Making an animated GIF using a bitmapped editor like Photoshop is easy enough. You align your images on separate layers, crop so they all cover the frame and export them as an animated GIF, specifying animation attributes like duration for each frame and looping. GIFs tend to use a restricted color palette, too, although it isn't strictly required.

But Friedl's animated wigglegrams are not GIFs. They aren't HTML 5 or Flash either. They're JavaScript. Your Web browser is your player.

A Rose. We walked (or stumbled) around this one, demonstrating how nice it would be to have roller skates (if not a dolly) for this.

We're looking under the code hood first because it's the quick way to appreciate what you can and can't do with this format. There's a lot more of the former than the latter, fortunately.

We unearthed the JavaScript code Friedl wrote and tried it out. It was addictive. But before we decided to share our secrets, we contacted him.

"Yes, it's my own code," he replied, "but it's pretty simple and obvious, so I've released it into the public domain. Feel free to do what you like with the code."

He cleaned up the code a bit for us and fixed one little issue we had with it. We reformatted it into a couple of hundred lines with a handful of variables.

Friedl explained he auto-aligns the images and then uses a Perl script to generate the JavaScript and HTML.

Whack-a-mole. Handheld, of course.

Auto alignment is the time-consuming part of this game. For our first attempts, we aligned the image on one of the focus targets in our viewfinder just to avoid having to align the images later.

Friedl uses the align_image_stack function in Hugin, a free cross-platform Panorama stitching tool. "So now I just point a script at the photos and come back in 10 minutes."

You can, of course, use an image editing program to line up the images. We opened a set, each image its own layer, in Photoshop and worked on two images at a time, the top one at 50 percent opacity to align it to the bottom one. Then we cropped the image size so every layer's image covered the frame and exported the layers as JPEGs.

Both techniques are worth exploring because, as Friedl said:

You can very much change the feel of a set of images by changing the apparent point of rotation (by changing what feature does not move frame to frame). You lose that selectivity with the automated script, unfortunately.

And rotation isn't the only game in town. You can change focus. You can zoom. You can let the subject move. It's really more about animation under the viewer's control than it is about a visual stunt.

OUR APPROACH

We made only a couple of these before we decided it would be worth it to automate the process. But you don't have to go that far if you just want to give it a try.

All you need is the JavaScript/HTML code in the template below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- -*- coding: utf-8 -*- -->
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Scrollogram Template</title>
<!-- Courtesy of Jeffrey Friedl - http://regex.info/ -->
</head>
<body>

<style type="text/css">
div#%%gram_name%% img {
width:%%width%%px; height:%%height%%px;
visibility:hidden; position:absolute;
top:0; left:0 }
</style>
<div>
<div id='%%gram_name%%' style='margin:0 auto; position:relative; width:%%width%%px; height:%%height%%px;'>
%%images%%
</div>
<div style='margin-top:2px; height:4px; width:%%width%%px; background-color:black; margin:0 auto 5px auto'>
<div id='%%control_name%%' style='height:4px;border-right:%%br%%px #36aac2 solid; width:0'></div>
</div>
</div>
<script type='text/javascript'>
with ({
D : document.getElementById('%%gram_name%%'),
I : new Array,
X : 0,
i : 0,
MW : 0,
BW : 0,
tmp : 0,
}) {
var P = D.children[0].tagName == "A" ? D.children[0] :D;
for (tmp = 0; tmp < P.children.length; tmp++)
if (P.children[tmp].tagName == "IMG")
I.push(P.children[tmp]);
MW = D.style.width.match(/^\d+/) / I.length;
BW = D.style.width.match(/^\d+/) * 0.6 / I.length;
if (BW > 20) BW = 20;
D.ontouchmove = D.onmousemove = function(e) {
// on iOS, ignore all but one-figure touches
if (e.touches && e.touches.length > 1)
return true;
var x = Math.floor((e.clientX || e.pageX)/BW);
if (X == 0)
X = x;
else if (x != X) {
var which = x > X ? i + (x-X) : i - (X-x);
if (which >= I.length)
which = I.length == 2 ? 0 : I.length - 1;
else if (which < 0)
which = I.length == 2 ? I.length - 1 : 0;
if (which != i) {
I[which].style.visibility = 'visible';
I[i].style.visibility = 'hidden';
i = which;
document.getElementById('%%control_name%%').style.width = (which * MW) + 'px';
}
X = x;
}
return false;
};
}
</script>

</body>
</html>

Download

There are three sections:

  • The first, between style tags, is CSS to establish a unique section of the document for this gram.
  • The second, delimited by div tags, actually displays the image and a thin scrubber and playhead below it. Friedl uses a black page background with a white playhead under a framed image. This code uses a white background with a black scrubber (background-color:black;) and teal playhead (#36aac2). But this is where you set those colors.
  • The third section, set off by script tags, is the JavaScript that does the heavy lifting.

In the template, the variables you have to change are marked by double percentage signs (and highlighted in green in our display). Here's the full list:

%%gram_name%%The gram's name. Each gram on the page has to have a unique name to keep them straight.
%%width%%The width of the gram.
%%height%%The height of the gram.
%%images%%The set of HTML img tags for the images used in the gram.
%%control_name%%The name of the scrubber and playhead section, which the JavaScript has to know about.
%%br%%The width of the gram divided by the number of images used in the gram. It determines the width of the playhead in pixels.

You can figure all those out manually but doing the HTML for the %%images%% variable was enough to convince us to write a Perl script to figure out the variables and write them to a file based on the template.

The %%images%% variable warrants a little more explanation.

The first image is the only one displayed at first. You indicate that in the img tag by adding style="visibility:visible; position:relative" to it. Subsequent images don't require that but they do need a noindex="1".

We'd post the Perl script but it's tailored to our environment, using an AppleScript front end to pass all the images to a Perl script that calls ImageMagick to get the dimensions of the image (which is overkill if you don't have ImageMagick already installed).

SHOOTING TIPS

The hardest part of making one of these is shooting one.

If rotation is what you're after, put your subject in the middleground and extend focus to your background. A soft background works but it's more interesting if the background is in focus.

The minimum rotation would be the distance between your eyes. But don't go too far between shots or the background will seem to jump.

Use a focus target on your camera's focusing screen to align the subject between frames. Alignment is the secret to the magic. Move in an arc around your subject, rather than a straight line.

EXAMPLES

The best examples we've found are Friedl's own shots.

He pointed us to Eric Pare's site, too. Friedl made a page for him earlier this year. Pare's images are aligned in the camera. He shoots with a bullet-time rig.

CONCLUSION

With a manual scrolling control (and an elegant one at that) and multiple individual images, this technique escapes the Photo Gimmick box. In fact, we plan to keep it in our toolbox for sequences that examine one subject from a variety of angles.

Unlike rollovers (which respond to a single tap, sometimes), it works well on tablets, too.

But we also find it fun to start thinking about our shots this way, too. Walking around, enjoying the scenery, we now have another way of capturing it. And that's something to get excited about.


Comments

Wow! And again, Wow! Big stuff, seriously.

I never understood anything about programming, but when I was writing manuals I always felt the need for a tool like this to move aroundof machine or to illustrate a step-by-step process. With the photographs, because I had nothing else.

Today 3D CAD allows you to get all the pictures you want but ... the presentation?

Above all this approach goes wonderfully with touch-screens ... I'm extraordinarily impressed!

Printed user and maintenance manuals will be integrated more and more with online manuals, or displayed on the same control panels (touch) that are used as an interface for the operator, or on a tablet for repair people.

If I know anything, this is big stuff.

-- Frank Tagliaferro

And a lot of fun, too. Give it a try! And let me know if you get stuck. -- Mike


BackBack to Photo Corners