Amsterdam Time Machine

The time machine displays a gallery of paintings, drawings and object images from the collection of the museum from a certain time period. The gallery slowly scrolls by, allowing the viewer to appreciate each artwork. On the top of the app there's an entry button, allowing the viewer to jump to a certain year in history to view objects that were made in that particular year.

The visual design of the time machine looks like an old-fashined painting gallery: retro decorative wallpaper, and every picture framed in wood.

What makes the gallery interesting is that it's to scale: every 2 pixels on the screen corresponds to 1 centimeter. This information was provided by the API for every object, and allowed us to view all works at their “real” sizes. In regular displays of art online, like in the collection search interface of the Amsterdam Museum itself, this information is often not shown.

The implementation used the Django framework to created a web server that could proxy requests to the AdLib API, cache the XML responses locally and transformed the search results into JSON, which was then passed through to the Javascript frontend, built with jQuery and some CSS magic to add picture frames and some drop shadow to the pictures, creating a real-life experience.