cube.gif

Links

Gifs are boring. Not the medium, but common usage; the memes forced, the randomness all too predictable. That’s why I’ve recently been looking at new ways to view and interact with gifs.

cube.gif is an experiment visualizing gifs as 3D cubes by encoding animation time as another spatial dimension. We can then slice the gif cube using a plane, projecting the data back into two dimensions and producing images that capture multiple frames of the original animation.

Slice of the above animation

Slice of the above animation

Animated gifs are usually viewed as short two dimensional movies, but a gif essentially captures a 3D volume of image data. A quick search revealed at least one other person looking at gifs as 3D volumes, but, while that visualization is neat enough, the approach seemed rather limited.

cube.gif is somewhat more abstract. It turns gifs into cubes, where the x, y, and z spatial dimensions of the cube map to the pixel x-coordinates, pixel y-coordinates, and animation time in the original gif.

An example may explain this better.

Enter the Gif Cube

Consider a 12 frame gif that fades from red to blue, where the top right corner of each frame is a solid color and the bottom left corner is white.

Each image already has 2 spatial dimensions: x and y for pixel coordinates. The third dimension of the data is time.

To encode time as another spatial dimension, imagine creating a 1x1x1 cube and drawing the first frame of the animation on the front face of the cube. Now extrude the pixels of the front face to create a volume. After moving 1/12th of way through the cube, start sampling from the next frame of the animation. Continue this process through the entire cube. This produces a 3D volume of pixel data, 1/12 for each frame of the animation.

Here’s the cube for the above gif.

The front left face shows the first frame of the gif.

The right side of the cube shows the rightmost column of pixels for each frame in the animation (note the 12 distinct bands).

While the top of the cube shows the top row of pixels for each frame in the animation.

Slicing the Gif Cube

Gif cubes are pretty cool on their own, but things get even more interesting if we then project the cube back into two dimensions. The inspiration here was medical visualization of CT scan type volumetric data, specifically the ability to explore 3D volume data by moving a 2D plane through it.

Imagine slicing through the cube with a plane. Here’s an example slice through the corner of the cube, with the sliced off piece removed.

Here’s the front view of the sliced cube.

Side view.

And top view.

The face of the slice is just another surface, which we can view as an image. Here’s the image produced by the shown slice.

This single image samples from multiple frames of the original animation, as well as from multiple pixel positions within each frame.

We can slice the gif cube at any angle to create interesting new 3D shapes and 2D slice images.

So it Goes

Gif cubes allows us to step back, Tralfamadorian-style, and examine gifs from a new vantage. Things look very different from the third dimension.

Take this example gif:

Here’s the resulting gif cube:

But wouldn’t it be more interesting to watch the gif sideways?

Or vertically?

Or at a weird angle?

All this and much more is possible with cube.gif.

Head over to the site to load a gif from Giphy and explore it three dimensionally. It can make even a cat with sunglasses and an image macro at least somewhat interesting.