Open Access at The Met: Animating Artworks in the Collection

At the violet hour, when the eyes and back
Turn upward from the desk, when the human engine waits . . .

—T. S. Eliot, The Waste Land

«In turbulent times like these, the world needs art—great art, accessible to everyone. Thanks to the amazing volume of images of public-domain works made available by The Met's Open Access initiative, people all over the globe can engage with them and contribute in ways never before possible. The Met's gift to the public has tremendous potential to unite people, to help them "turn upward from the desk" and engage with something transcendent.»

Vasily Kandinsky (French [born Russia], 1866–1944). Violett, 1923. Lithograph in red, yellow, blue, and black, 11 7/16 x 7/12 in. (29.1 x 19.1 cm). The Metropolitan Museum of Art, New York, Bequest of Blance Risa Sussman, 1991 (1991.1066.1)

I am an independent web and educational software developer with an AB in physics as well as experience coding interactive museum exhibitions. I have always been interested in the creative coding movement, but I felt I was missing the right inspiration to contribute. When The Met released its collection of hundreds of thousands of images of public-domain works in early 2017, I realized I could take my background in physics and software development and fuse it with my lifelong love of art to create projects using these Open Access images.

The first program I created was something called the Portrait Gallery, a riff on the old parlor trick of paintings following you around with their eyes. Next, I turned more works of art into interactive JavaScript games, and most recently, I started creating interactive animations out of paintings from The Met collection. As an example, here is my interactive version of Violett by Vasily Kandinsky. In this piece I've used deceptively simple math and the physics of springs to bring this work of art to life.

A GIF of the author's interactive using Kandinsky's Violett

Beyond the joy I get from creating these interactives, I have two other goals—first, to engage with some of my favorite works of art and share them, and second, to demonstrate how math and programming can combine with these works of art to create something new. As I look through The Met's online collection, I try to imagine how each piece would come to life if it could. I choose art that resonates with me personally, and also make sure that the work's tone won't make cutting it up and animating it seem disrespectful. Many pieces of art would need an expert animator to bring them to life convincingly—especially the nearly photorealistic classical paintings. I create more generative types of animation that involve moving and flexing different elements, which is more suited to highly stylized works of art, like those produced around the turn of the 20th century: Art Nouveau, Modernism, Expressionism, and Impressionism. These are some of my favorite works and styles, with pieces that are colorful, exuberant, and not too difficult to pick apart for animations.

After I've selected a work of art, making it interactive has two major phases—image manipulation and programming. Depending on the complexity of the piece, I spend at least a few hours carefully removing components of the image and separating them into individual layers. This work is peaceful and meditative, allowing me to focus on details that I would never have noticed otherwise.

Once I've separated the artwork into components for animation, I begin programming using the PixiJS framework. Animation and programming within this framework is relatively simple using sprites, or moveable images. These sprites are rendered on an HTML5 canvas that can be parsed by all modern internet browsers. Another important aspect of PixiJS is its speed—hundreds of sprites can be created for a single image that can interact with each other and the user and won't slow the browser down to a crawl.

The interactive I created for Claude Monet's Bridge over a Pond of Water Lilies contains 300 lily pads that have a swarming behavior where they interact with each other and with a mouse or touch point.

A GIF of the author's interactive using: Claude Monet (French, 1840–1926). Bridge over a Pond of Water Lilies, 1899. Oil on canvas, 36 1/2 x 29 in. (92.7 x 73.7 cm). The Metropolitan Museum of Art, New York, H. O. Havemeyer Collection, Bequest of Mrs. H. O. Havemeyer, 1929 (29.100.113

Tweaking the interactivity to get it the way I had imagined can take a while, depending on how complex the interaction is. For example, I spent many hours playing with the angle, force, and momentum transfer between the lily pads when they collide before I was happy with how it looked. Some things are not as time consuming, such as the way the components of Violett bounce and spin when they're touched.

Most importantly, I let the painting call the shots in terms of how it should feel and behave. For example, Cat Watching a Spider by Ōide Tōkō reminded me of the way my cat watches insects and birds. The interactive below is inspired by the painting and the movement it suggests.

A GIF of the author's interactive using: Ōide Tōkō (Japanese, 1841–1905). Cat Watching a Spider, ca. 1888–92. Japanese, Meiji period (1868–1912). Album leaf; ink, and color on silk, 14 3/4 x 11 in. (37.5 x 27.9 cm). The Metropolitan Museum of Art, New York, Charles Stewart Smith Collection, Gift of Mrs. Charles Stewart Smith, Charles Stewart Smith Jr., and Howard Caswell Smith, in memory of Charles Stewart Smith, 1914 (14.76.61.73)

Sometimes I wonder what the artists would think if they saw what I was doing. I hope they would appreciate it, but I'll never know. And perhaps it doesn't matter—that's the beauty of what The Met has done with Open Access. The art that was just for a few now belongs to all, and those with the will and imagination can play with, modify, and augment these works as they see fit. I come to these pieces with my own background and perspective, but there are millions of different ways to approach them for millions of different purposes. I am excited to see what comes next.