Markus Luik

The decision was made to make the project feel spatial by having the viewer go through artworks as if they were spaces in a larger structure. This is represented in the project’s hyperlinked format — each artwork has its own HTML page wherein the viewer has to find their way to the next artwork. Compared to traditional visual art exhibitions, here the audience takes on an active role; they must interact in order to proceed through the exhibition.

The exhibit thus needed a way to enter this digital space and a meaningful structure for the content. After initial brainstorming, the project found its early semi-linear footing via wireframing. The visitor initially sees the Window artwork, navigates to the Crowd artwork, and then to the Bedroom scene. Here, the concept of a “house” was fully embraced, by providing a non-linear path through four artworks. To provide narrative closure, the exhibit once again becomes linear near the ending.

Each artwork’s placement has intention. The Window artwork acts as the opening because it provides a window into the artist’s world. The Portrait meanwhile serves as an ending since it visualizes the artist who before was invisible to the viewer.

On the technical side, each artwork is on its own HTML page with a p5.js canvas driving the artwork visuals and interactions while the togglable ‘about’ contextual popups are made possible with HTML and JQuery functions. The font, black background and context popups are styled with CSS.

The decision to focus on development in p5.js was due to the creative possibilities. Since p5.js uses javascript — a fully fledged programming language — it allows for detailed interaction-based computations, visual effects, image filtering, pixel manipulation, and more. This is what enabled our exhibition to have interactions which both change the environments of the artworks, and the artworks themselves.

Unlike HTML and CSS, p5.js canvases do not have prebuilt functions for displaying images responsively, the team calculated the adequate position and size of each image depending on the current resolution of the browser. As a result, each image has its own X and Y coordinates, width, height, and size multiplier.

Based on this foundation, a dynamic interaction system was made, allowing artworks to have set sections that the visitor can interact with. This was primarily utilized in the Elephant artwork. The mouse position was often used to either add effects to the cursor, as with the FlockTree and Portrait works, or to allow the visitor certain degrees of movement, as with the CrowdTree work. The Fish artwork interaction integrated both the background, asset movement and our mouseOver() function to convey the meaning of the artwork. In short, it built on the work we had early done while treading new fruitful ground.

To finish off the project, a context-popup system was developed and implemented onto each page. This system provides information on the artworks, their meanings, and their production, acting as sort of a traditional visual arts gallery label. The landing page and final page also have unique popups, introducing the visitor to the digital space and wishing them farewell. The popups are written with HTML, styled in CSS, and made togglable with JQuery, a Javascript library.