The making of "Rhapsody on a Windy Night, a poem by T.S. Eliot"
A case study of my very first interactive narrative
The brief
Rhapsody on a Windy Night, a poem by T.S. Eliot is an interactive poetry developed in collaboration with my friend Fiona Fanzhi Li. If you haven't seen the work yet, please do so before you continue reading ahead.
In late 2017, after a series of existential crises (maybe more on this at a later date) and a serendipitous conversation with Fiona, we embarked on a year-long journey of exploring the possibilities of a web-based interactive narrative. It was also an opportunity for me to go back to my roots in visual arts and music.
During the course of the project, I learnt and implemented many new techniques and tricks that I would otherwise not have had the opportunity to put into practice. Here's a quick list of the web technologies and libraries I used:
- Vue.js + Vue Router + Vuex for the underlying architecture
- basicScroll and Intersection Observer API for animating elements based page scroll position
- GSAP for more complex animations such as tweens and timelines
- CSS custom properties (variables) for dynamically changing styles of elements (position, scale etc)
- Illustrations as SVG files for scalability and improved performance
The inspiration
It was by chance that I stumbled across Short Trip by Alexander Perrin, an interactive illustration that truly captivated me. From the subtle hand-drawn illustrations, playful animation to the ambient soundtrack, this work encapsulated everything that appealed to me. While I had come up with some rough ideas of an interactive web experience in previous years, Perrin's work really put me on the right track that I wanted to pursue (yes, that was a little pun referencing the train featured in his work).
I had always been fascinated with blending hand-drawn illustration into digital mediums, and since I never got into Flash animation back in the day this was a chance for me to experiment with modern web technologies.
The collaboration
Around a similar time to when I first saw Perrin's work, Fiona had posted some of her illustrations and I immediately imagined how they could be animated and pieced together to form a sequence of scenes.
I knew that collaborating with people far more talented than myself, in this case Fiona with her amazing visual design and illustration skills would push me beyond my comfort zone and technical boundaries, so I invited Fiona to work together to create something completely different, a pure expression of our inner desires to break out of our daily design and development works.
The theme
After a few brainstorming sessions, Fiona suggested we make a visual representation of Rhapsody on a Windy Night. The poem has five distinct scenes, each timestamped accordingly, and we played around with the idea of having two views/templates to our interpretation: the main street view where the main character wanders horizontally, and then the detailed views of each section with vertical scrolls that gradually reveal key imageries as the poem progresses.
The street view has key elements from each section (the woman in white, the black cat, the street lamp and the lamp by the door) interspersed throughout, with flickering street lamps next to them (or in the case of the lamps, they themselves are flickering) indicating that they can be interacted with, acting as entry points to the detailed views.
The engine
I initially started looking at various HTML5 game engines such as Phaser, pixi.js and other WebGL/Canvas libraries, but soon changed course to a bespoke solution so that I could have more control over the interactions and layout around the parallax scrolling effect.
All layouts are done using standard HTML and CSS. Perhaps one thing to note is, that since the parallax effect of the street view is done by transforming the translateX value of the middle ground building layer, translateZ and transform-style: preserve-3d were used to achieve 3D layering as z-index acts differently in 3D-space. If you'd like you can read more about this behaviour at the following links:
- z-index and transform
- -moz-transform z-index bug?
- css z-index lost after webkit transform translate3d
This project is also a great use case for the basicScroll, GSAP and Intersection Observer API, as they allowed me to animate and transition elements according to the page scroll positions without using the old fashioned onscroll event handler.
I spent the majority of the time on the intricate transitions, discussing with Fiona the various behaviours and continued to refine them. There were many, many late night head scratching, battling with the joy and quirks of CSS and JS animation.
The music
Music was always going to be an essential part of this work since its inception, as I hadn't composed music since the end of high school/beginning of university. I even bought a funky touch-sensitive keyboard by Roli so that I could experiment with sounds that I hadn't explored before.
After spending some time tinkering with different studies, I came up with the following central theme:
It's a very simple and minimal theme, alternating between two notes a fifth apart in the base (C and G) with further two notes (C and D) being introduced an octave above to form a two-note chord creating a somewhat ominous feeling, which I felt was apt to the theme of the poem; a midnight walk with various visions ending in "The last twist of the knife."
However, I was stuck with the above theme for a few months and couldn't progress with it. My wife Cindy gave feedback around making the music invoke more of a sense of curiosity, so after a few more days of coming up with a new melody, the final soundtrack has a brighter tone with a walking rhythm while still keeping the original theme intact.
I also incorporated various sound effects; the traffic sound doubling as the wind in the background, and samples of a turntable needle acting as an out-of-time beat to add to the mysteriousness of the narrative.
The result
After an intense one year and two months since my initial code commits to the git repository, Rhapsody on a Windy Night, a poem by T.S. Eliot is finally ready for its debut. I am extremely happy with how it turned out and was definitely one of the most enjoyable projects to work on.
I'd like to thank Fiona for her amazing illustrations and art direction, for collaborating with me in creating a truly awesome web experience.
Thank you also to Cindy for her valuable support and feedback throughout. Such love, much appreciation.
The next steps
There may still be some bugs here and there, so I'll be iterating as I go.
But moving forward, this is definitely a new phase in my life as a Front-end developer, and I have other ideas that I'd like to explore using the web as the medium.
This is just the beginning.