Imj: A web-based tool for visual culture macroanalytics

So-called "movie barcodes" are both elegant to look at and useful ways to explore how color schemes and designs shift throughout a film. Image montages can also demonstrate how a visual corpus changes over time, and plotting an image set into a graph based on values like hue and saturation could provide a stylistic fingerprint for particular set.

Visual culture analytics or macroanalytics is a methodology for drawing interpretations of large sets of data with the aid of computers. Just like scholars may use computational tools to analyze n-gram frequencies in literary corpora, for example, others also like Lev Manovich use software to create similarly condensed or arrayed views that reveal patterns and trends within visual corpora. I've encouraged my students to try these methods in my classes, but the tools for creating these can be intimidating or even buggy.

I've written a post about using ffmpeg (avconv on Ubuntu) with imagemagick, but for someone to follow those steps they'd have to be comfortable working in a command line. I've had some success with ImagePlot in the past, but I've yet to get it working on my current laptop.

What I really wanted was something web-based with the combined accessibility and power that Voyant-Tools.org or even Wordle, but for images.

Finding nothing satisfactory, I made it myself:

Screen Shot 2016-04-26 at 10.01.31 AM

Now, this tool isn't quite as powerful as Voyant, Juxta, ImagePlot, or just about anything in that domain, but it does enable some low-level visualizations that might help researchers or students determine whether an investigation with more robust tools is warranted. Because it works in a web browser with your computer's memory (nothing gets uploaded to my web server), it will have some limitations. Generally speaking, it can handle up to 9999 images and it can create images up to 10000px tall or wide.

Currently, Imj supports three styles of visualization: barcode, montage, and plot. Whichever method you want to try, it starts with Step 1, loading your files.

Use the "Choose files..." and/or "Choose folder..." buttons, and add more buttons as needed. These mechanisms work a little different on different OS's and with different browsers, so check the linked note on the Imj page for specific guidelines.

For each of the three visualization styles, set your options, and hit the "apply" button. If the tool detects any problems with the settings, you'll get a warning. Otherwise, hit the big "Do the Thing!" button and (hopefully) watch the thing get done.


Here are some notes and examples for each of the three visualization styles:

Barcodes

A barcode simply takes every image in the set and squishes them together. So if you've extracted a frame for every second of a movie, creating a barcode of those images creates an interesting thumbnail view. The Movie Barcodes Tumblr has many of these, and it's fun to compare.

So to use my tool, again, you'll need to have your images already. I've had success using MPEG Streamclip, and others use VLC.

The barcode generator will automatically set an optimal width and height, but you can change these values. Just beware that if your setting create image "slices" that begin or end between pixels, you'll get a slightly transparent image, which may be undesirable.

The "smoothing" option has five possible settings: none, 5, 10, 30 and color bands only. The numeric options run each image through , so they take quite a bit longer. The "color bands only" setting computes the average RGB for each image and simply draws that color.

Here's the movie Akira with each of those options:

kira barcode, generated with no smoothing at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with no smoothing at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to 5 at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to 5 at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to 10 at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to 10 at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to 30 at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to 30 at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to color bands only at 7467 x 3200 and scaled down to 2000.
Akira barcode, generated with smoothing set to color bands only at 7467 x 3200 and scaled down to 2000.

Each of these smoothing options has their merits, and the pros or cons of each will vary depend on the image set and the kind of thing you're looking for.

Montage

The montage visualization is simpler in that it takes few parameters. Simply set the width and height you want for each image, and designate the number of columns to render for wrapping around to the next row. The canvas height and width will calculate automatically.

A montage of Akira, rendering one frame for each second of film at 20 x 16, printing in 80 columns.
A montage of Akira, rendering one frame for each second of film at 20 x 16, printing in 80 columns.

Plot

The plot visualization creates a sort of histogram for an image set, kind of like an entry-level version of what ImagePlot can create with analysis. The thumbnail and canvas settings create the space for the drawing and set the size of the images as they'll be drawn.

The x-axis and y-axis settings compute an average hue, saturation, luminance, etc. value for each image and then plot that image onto the canvas taking those values as an x,y coordinate pair. (Higher x values are further to the right, higher y values are further toward the bottom of the canvas.)

In testing, I've found it more interesting to use this tool for sets of paintings, but for the sake of completeness, here's Akira rendered at 1600 x 1200 with 20 x 16 thumbnails plotted according to hue (x-axis) and saturation (y-axis).

7467 frames of Akira, plotted by their average hue and saturation.
7467 frames of Akira, plotted by their average hue and saturation.

The canvas background is a transparent PNG, by the way, so you can add a background with your favorite image editing software.

Here are two plots (hue and lightness in this case) comparing and contrasting the works of Van Gogh and Mondrian. (These are the sample image sets that ship with ImagePlot.)

776 paintings by Van Gogh, plotted by average hue and lightness.
128 paintings by Mondrian, plotted by average hue and lightness.


Even with far fewer images in the Mondrian set, it's easy to see with these plots how much more strongly he favored blue when compared with Van Gogh. It's doubtful whether or not that revelation is significant in an art-historical sense, but consider how the Van Gogh set in barcode form visualizes change over time:

776 Van Gogh paintings rendered in barcode view with smoothing set to 10.
776 Van Gogh paintings rendered in barcode view with smoothing set to 10.

As I said at the outset of this post, Imj isn't as powerful as ImagePlot, but I hope that the over-the-web accessibility is enough of a pro to outweigh some of its cons for many. I've designed this with my undergrad students in mind as the target audience, and with an earlier version, they've had some pretty great success visualizing Arkham Asylum, Watchmen, and a year of Facebook cover photos.

So try it out! I put this together pretty quickly, and since I'm not the world's greatest JavaScript programmer, your mileage may vary. If you have problems or suggestions, or if you make something cool with Imj, let me know in the comments.

Word Count: 1040

Previous Post Next Post