Sunday, November 15, 2020

Viewing Paintings as Interactive Maps

Over the last few months Jason Farago of the New York Times has released a number of detailed critiques of individual works of art. These detailed examinations have displayed a number of works of art using the techniques originally developed for displaying interactive online maps. 

Interactive raster maps, such as the early Google Maps, use large images which are cut up into much smaller individual map tiles. When you zoom in on one or more of these map tiles a more detailed map image is loaded, which is in turn divided into many smaller individual map tiles. When you pan left or right, the appropriate map tiles (based on the location you are viewing) are loaded into your map view.

This is the same process which is now being used by the NYT to create interactive paintings. These paintings are being divided into image tiles which can be loaded into view as you pan left and right around the painting. And, as you zoom in on a detail of the painting, higher resolution tiles of the painting can also be loaded into view.

You can see how this works in the NYT's A Picture of Change for a World in Constant Motion. In this exploration of Katsushika Hokusai's "Thirty-Six Views of Mount Fuji" Jason Farago uses the navigation techniques developed for interactive map to create interactive paintings which you can pan around and zoom-in on to view images in more detail. 

Farago's critique of Hokusai's famous woodblock prints also uses the techniques of the story map - to create a guided tour of the individual images in Hokusai's collection of views. As you scroll through Farago's critique the interactive paintings automatically pan and zoom to show the details which Farago wants to draw your attention to.

A Picture of Change for a World in Constant Motion is just one of a series of these interactive art critiques which the New York Times has released this year. You might also like Seeing Our Own Reflection in the Birth of the Self-Portrait, a detailed examination of an Albrecht Dürer self portrait, painted in 1500 and Taking Lessons From a Bloody Masterpiece, a great scrollytelling crtique of Thomas Eakins' painting 'The Gross Clinic'.

If you are familiar with the Leaflet.js mapping library then you can also create your own interactive painting critiques - using image tiles from paintings instead of the usual map tiles. Museums and art galleries around the world use the iiif format to present artworks as zoomable images. This means that for many works of art, if they have a iiif manifest, you don't even have to create the image map tiles for yourself.

The fantastic leaflet-iiif plugin allows you to seamlessly use iiif manifests with the Leaflet mapping platform.This means that you can quickly turn any painting with a iiif manifest into an interactive Leaflet map. You can view a demo of this in action on my own The Drawing Lesson critique. In this scrollytelling examination of Jan Steen's painting (depicting an artist teaching two young pupils how to draw) I have used the Leaflet mapping library to take a close detailed look at Steen's 17th century Dutch masterpiece.

If, like me, you find it easiest working from other people's code then you can clone my The Drawing Lesson interactive on its Glitch page. To start hacking my interactive painting look for the iiif manifest URL in the JavaScript code and try replacing it with the manifest for another painting or image.

No comments: