ArtGIF: animate collection images for fun and profit
Easily create animated GIFs from the Art Institute of Chicago’s collection using the online editor at https://artgif.netlify.app/
February 2021 saw Cogapp’s fourteenth hackday, with a theme of “museum APIs” so myself and my colleague Matt Chapman worked together to produce a system that lets people make their own animated GIFs from artwork images.
I had long wanted to make an online editor to do this, right back to the time before the enforced homeworking when we gathered ideas on Post-Its on the office wall.
As it happened, it turned out to be surprisingly easy to do, by combining three robust and well-documented systems:
- The new collections API from the Art Institute of Chicago
- OpenSeadragon, a library to create interactive image viewers
- Gifshot, a library to create animated GIFs in-browser
Matt and I started by sketching out an interface for the main functions: choosing an artwork, cropping that artwork, and arranging that crop into an individual frame:
After some further reflection, mainly about the way we naturally have a left-to-right and top-to-bottom reading order, we rearranged it to become a little more user-friendly like so:
Then it was on to the coding. We decided to use React as the framework, with added strong typing via Typescript. Fortunately Stephen Fraser has released a fully-typed version of OpenSeadragon which we used to hook into certain viewer events. We also added Redux to manage state for the application.
The whole system works by having a few different components pass information to each other. The first, the artwork selector, makes API calls to retrieve brief caption data and an image reference for a handful of collection items from the Art Institute of Chicago. This started off as purely random, but we expanded it to allow a random theme (thanks to my colleague Louise Cole for building up a suitable list!) and also a user-provided search.
Once an artwork is selected, the second component, the editor, kicks in. The editor uses OpenSeadragon to provide a zoomable interface of the high-res artwork images, and keeps track of the area of the image that is displayed. Thanks to OpenSeadragon’s powerful coordinate system, it is very easy to convert these to pixel values of the high-definition image and to pass that to the Filmstrip component that keeps track of different frames.
Then, thanks to the magic of IIIF, it is trivial to create an image URL that retrieves this exact crop from the museum’s image servers, and it is these individual frames that are combined together to produce the final animated GIF (which can be downloaded by right-clicking to save).
And that’s the heart of the system! We added a few embellishments such as a list of credits so that you can find out more about the source material, and a ‘dark mode’ toggle for those who shun the light, but that was all. It’s still a bit rough around the edges: it lacks the ability to reorder frames, and some other fixes, but it hopefully is enough to be usable.
I leave you with a gallery of examples created by us here at Cogapp. We’d love to see what you create using the editor, or hear any suggestions for improving the system. If you want to find out more about how it works, feel free to browse the source code on Github.
Finally, if your organisation would be interested in joining in one of our hackdays in future, please get in touch!
