Join our award-winning team

Bananas About Art

A creative approach to visualising scale on the web

By Neil Hawkins

It’s easy to grasp the scale of an artwork when Michelangelo’s David towers over you, or when you clamber over a fellow tourist to catch the eye of Mona Lisa. Understanding the physical size of artwork when browsing a collection online can be more challenging. This was the “a-peeling” challenge I set out to solve as part of Coghack #23.

We were fortunate to be partnering with The Art Institute of Chicago (AIC) for this hack day, who not only have a lovely team, but also a lovely public API and a lot of interesting ideas.

Zach from AIC initially suggested an idea that would utilise the recently added structured dimensions data provided by the Artwork endpoint to display an everyday object alongside the work at the correct scale. The goal was to provide an immediate visual understanding of the artwork’s size.

Now. I took the title of Zach’s idea, “Banana for scale”, a little too literally at first and so… well, read on, and you’ll see. I blame internet culture.

Previously, the API provided artwork dimensions only as a single pre-formatted string. E.g. “448.3 × 346.7 cm (176 1/2 × 136 1/2 in.)”. This is perfect for descriptive content, but prone to error when used programatically. For example, you cannot be certain the string will always be formatted in the same way, use the same units of measurement, or even be dimensions-type data.

The new dimensions data now looks like this:

With this structured data available, the solution was fairly straightforward. I decided to write a Userscript (this is a hack, after all), and used the Violentmonkey framework to make iterating and working on the script super simple. The script runs when an artwork page is loaded in the browser. It fetches the API response for the current object, parses out the dimensions data, then injects a new button into the image viewer’s HTML. Clicking the button runs a few calculations, after which the artwork and scale objects are drawn on the page and resized to the correct proportions.

The correct proportions are, of course, entirely dependent on how you visualise a banana. In a now deleted reference from another website, the U.S. Department of Agriculture, allegedly states that an average banana measures at least 7 inches — but less than 8 inches — in length. That’s about 19 cm. This caused some discussion in the room, but was the value I used for the scale calculations.

Here’s the result for Bullet Through Banana (36.1 × 41.2 cm):

Shooting a virtual bullet through the virtual banana is currently not on the feature roadmap.

As you can see, while the banana-for-scale is visually striking, (with more than a little help from Doc Edgerton) it isn’t that effective in conveying the true scale of an artwork. For larger pieces, such as Warhol’s Mao screen print (448.3 × 346.7 cm), the banana “slips” under the radar somewhat and becomes lost on the page.

This could be simply be down to my choice of banana, or it could be that it is much more difficult to relate to an SVG of a banana than a real one.

Given that the original ‘Banana. For scale.’ meme involved someone sellotaping a banana to a TV, I wouldn’t want to encourage people to start doing the same to artworks in museums, so I began to think of a better way to convey a sense of scale for larger works. Going back to Zach’s original proposal, using people to provide a sense of scale felt like a better choice.

Luckily, while looking for my banana SVG, I happened to stumble upon, dimensions.com. This is a wonderful resource containing hundreds, if not thousands of dimensioned drawings that describe everything around us. Things, people, buildings, you name it, they’ve probably got an SVG of it.

A line drawing of a man in four different poses. The man depicted is Walter White from Breaking Bad. First pose shows him face on with no hat and a jacket, he is bald with a goatee. Second pose, he is side-on, same outfit. Third pose, side-on again, with a pork pie hat on. Fourth and final pose, facing front, in his pants and a shirt holding a handgun in his right hand.

dimensions.com is incredibly distracting website when trying to work to a hack day deadline.

Beyond Breaking Bad, there are also some more sensible museum-related figures, such as the one you can see below in the improved second iteration of banana-for-scale.

Clearly, this is a rough cut of the concept, but I think it works really well, especially for larger works. The sense of scale of the 4m tall print is, to my mind, instant. By this point, it was time to demo and show the team at AIC what we had done to their beautiful collection.

As for banana-for-scale, there is definitely something in it, though perhaps not a banana after all. Providing the structured dimensions data definitely opens-up a plenty scope for further development and creativity in this area. It’s a feature I’d like to see on more online collections in some form in the future.

Thanks to: Zach at AIC for the original idea; The Banana for Scale meme, without which none of this would have been possible (or rather more of Zach’s original idea would have been completed); dimensions.com — a fantastic resource. The rest of the AIC team for being great hack day partners.