Outside In: Space, Light, and the Artful Interior at Frederic Church’s Olana: Project Narrative

Scholarly Essay|Project Narrative

Project Background by Julia B. Rosenbaum

How does one translate an experience into an image? The late nineteenth-century landscapist Frederic Edwin Church confronted this dilemma in his artistic practice, long grappling with how to capture the animate-ness of the world around him. His paintings and drawings attest to both the heights he achieved in these efforts as well as their vexing limits. When he turned to house building at his property, known as Olana, in the Hudson Valley in the early 1870s, he pushed his artistic experimentation further, composing in three-dimensions to engage with real time, space, and light.

The digital portion of this project endeavors to convey the kind of design strategies Church implemented to animate his interiors. While floor plans and still photographs show something of Church’s scheme, they do not represent the experience of unfolding movement in Olana’s main house, and particularly its effect throughout the first floor. The static, two-dimensional photographic surface fixes a singular moment and architectural detail but never quite captures the dynamic nature of Church’s overall plan. His window-placement design, for example, ensures the constant play of light and shadow in a room over the course of the day. Wall and ceiling colors continuously shift in hue and tone, and the open sight lines of the floor plan, as well as the presence of metallic studs, silver and gold paint, and metal vessels throughout rooms, all throw light in multiple directions. Perceiving these kinds of ephemeral qualities takes both time and bodily movement on the part of the viewer.

The digital components utilized for this project make a version of such an experience possible. The article features a pop-up floor plan, 360-degree imagery, and time-lapse photography to showcase the fugitive effects of light in Church’s rooms and to present more legible visual evidence than still photographs can provide. All three digital components also incorporate interactive features for the reader/viewer, and together give a virtual, yet sustained impression of being present in the house. The first-floor room known as the Court Hall centered Church’s interior design, and the pop-up plan allows one to dwell in the middle of that room and look out in four cardinal directions to achieve the sensation of openness and panoramic viewing so integral to the space. Church engaged with perceptual play at many levels in his work, and the 360-degree virtual tour of the sitting room off of the Court Hall offers a glimpse of that; it approximates a visitor’s experience of encountering a Church painting of mountain vistas paired with actual Catskill Mountains in the distance through an opposite window. With the time-lapse photography—taken over the course of almost eight hours—one has a sense of the dramatic light effects Church was able to harness within his interior spaces.

Occupying a house-museum to get the necessary footage for such digital components required the very generous cooperation of both The Olana Partnership and the New York State Office of Parks, Recreation and Historic Preservation, which jointly oversee the site of Olana. I am grateful to William Coleman, Allegra Davis, and Amy Hausmann for making the house so accessible to me. Krista Caballero, an interdisciplinary artist and the codirector of the Center for Experimental Humanities at Bard College, took up the challenge of photographing the transient visual environment of Church’s interiors and the project would not have been possible without her. Allan McLeod brought the raw footage together so smoothly, and I offer my gratitude to him, as well as to the editors of Nineteenth-Century Art Worldwide, who invited me to participate in this special issue and who encouraged and supported this digital venture.

Project Construction by Allan McLeod

In her proposal for this project, Julia Rosenbaum requested the display of a 360-degree photograph with hotspots to capture a viewer’s experience of looking outside and then into Olana’s sitting room (fig. 1); a floor plan with pop-up photos of the Court Hall to show its four principal views (fig. 4); and animated, time-lapse photography of the Court Hall to convey the changing light effects throughout the day (fig. 25). I used Pannellum to present the 360-degree photograph, OpenSeadragon (OSD) for the floor plan, and JavaScript for the animation. It is a tribute to the open-source JavaScript libraries, Pannellum by Matthew Petroff, and OpenSeadragon by Ian Gilman that there is almost no need to write more in a project narrative than to list the ways they make a web developer’s task easier.

Pannellum, a “panorama viewer for the web,” has a number of clearly presented and detailed pages of documentation: Overview, Examples, Configuration, API, and Issue Tracker.‍[1] It also has a tutorial and a troubleshooting “hotSpotDebug” parameter.‍[2] When starting with panoramic images, the explanation of “Panorama formats” on the Overview page is very helpful for getting a sense of how panoramic images are handled by browsers and the library itself.

A page of features and examples gives an invaluable starting point for working with OSD, a “viewer for high-resolution zoomable images.”‍[3] After that page, the API documentation and the code base itself is best read along with the discussion at OSD’s GitHub Issue Tracker and its Gitter community chat.‍[4] Whether it be scientific imaging or Russian World War II photography, the exchange of code examples and explanation richly complement the OSD official documentation.‍[5] Ian Gilman’s CodePen demos are also extremely useful.‍[6]

The following are a few details of how these resources were used in the present project.

The Court Hall panorama component (fig. 1) makes use of Pannellum’s “Hot spots” feature along with an associated click-handler function (“clickHandlerFunc”), which, like OSD’s clickHandler, takes care of the click event in the complex environment the library provides.‍[7] In this case, the click event turns the panorama 180 degrees, with pitch and yaw set in the “hotSpots” properties. Pannellum also includes a compass option. It is this bit of code, adapted for direction of view rather than compass point, that positions the red arrow in the accompanying small floor plan image. As provided by the Pannellum API,‍[8] the degrees to move the arrow is calculated after the “animatefinished” event fires, exemplified with “event.yaw” in this excerpt from the code:

roomViewer.on("animatefinished," function (event) {
    var eventYaw = event.yaw;
    var arrowTransform = "rotate(" + eventYaw + "deg)";
    $(".red_arrow").css({"-webkit-transform": arrowTransform, "transform": arrowTransform});
});

The interactive Olana floor plan component uses two OSD viewers (fig. 4). For the floor plan, overlays highlight the hallway and rooms.‍[9] The second viewer uses the Sequence Mode to put images of the rooms into a series with next and previous controls.‍[10] Rather than the usual combination of the CSS “hover” selector and JavaScript’s “click” event, to cope with OSD’s “complicated gesture handling,”‍[11] the overlays are selected and deselected by means of the API, specifically its MouseTracker class and clickHandler method.‍[12] For the sequence of room images, the floor plan overlays are selected and deselected by using the “page” handler, which works with the image navigation.‍[13] In this way, the API allows the two viewers to become interactive.

In contrast to the robust and advanced resources of OSD and Pannellum, the animation in figure 25 is straightforward JavaScript, made even simpler by the use of the jQuery library (for easy cross-browser compatibility and fast development).‍[14] Adapted from some code written for another project, the animation is a response to the author’s wish to view the time-lapse photography interactively. The fact that there is nothing particularly notable about the custom code is its virtue: something simple improvised to answer a need that arose in the preparation of this special issue. What this unsophisticated code shares with OSD and Pannellum is the presentation of dynamic content that allows the reader to directly engage with the interplay of the author’s research and analysis.