Title: Zoo of Stone
Partner: Sebastian Lau
Conception & Design:
In designing our interactive comic project, Sebastian and I wanted to visualize a poem called Medusa, written by Carol Ann Duffy. That poem plots out the tragic story of the ancient Greek monster Medusa, who turns everything into stone upon glimpsing. Our first question is “How can we convey her story to the audience effectively?” Our inquiry lead us to the hypothesis that it isn’t necessarily the direct distorting, miserable feeling that people want to bump into. But rather the feelings that they derive from their own explorations into the pages. So we decided not to build in too many hints like “Click Me!” buttons, but quiet pages with visualized assets. We sought to tap into these base pursuits by creating a set of assets where we could make the transitions happen, such as a buzzing bee, bird, piggy, person, cat, etc. We came up with the name “Zoo of Stone”, which we thought was a wistful play on words on this mysterious poem.
Process:
The process of building our project is not as smooth as we thought. Sebastian and I had a detour, because instead of reaching consensus on how will the project look like, we put too much focus on how to make the effects/interactions happen. Hence, when we met and see each other’s progress, we kind of bumped into many inconsistencies. Realized this problem, we sat together and plotted out the whole story line, as well as allocating the work, too. Sebastian plotted out the story line and figured out effects including piggy’s rolling, bee’s petrification, cat’s falling apart and person’s into stone. I took care of the intro & ending pages, effects of the bird’s flying and bee’s wandering, as well as the switches among scenes. For the background, considering the story we want to convey, using one background pic that is suitable for combing real-in-life objects and the mythic plot is really hard. Therefore, we made the background contemporarily artistic by repeating the pic, in order to mitigate the discordance.
Specifically, for the intro page I made, I used an image of poppy from back then to build our intro within, and used Photoshop to adjust it and collage it with the pic of a Medusa (before transforming). The metaphor is that Medusa is as gorgeous as the flowers, but is of toxic character. A pop-up window through “introduction” button explains the project’s mission, and the“autobiography” button will guide audience towards the world of Medusa. I was inspired by the typing effect of strings from many websites, hence I made the very first line of poem “a suspicion, a doubt, a jealousy” as this effect.
We mainly had three main problems when we built our main stage.
Firstly, as I mentioned above, our conflicts on the ideas of the display. Sebastian initially wanted to set everything on the same page, and let audience simply scrolling down. I made the scrolling effect (with a rotating Medusa). It was obviously not that good-looking (see below for the video), and considering so many effects we needed to realize and the effects’ placements, we gave up this idea finally. Instead, linking from page to page will make the story develop more naturally.
Secondly, the flying effects of bee and the bird that I took care of. My initial thought is using the floating window and setting random number to make the bee wander around. It worked well, yet I couldn’t let the petrified bee fall down to the ground and stop wandering when clicked on it. This problem frustrated me till my friend Skye helped me out. She helped me set a TRUE/FALSE conditioning all over the three animations (becoming gray, falling down, wandering around). By setting “if bee is alive” as TRUE, under which bee will fly around; and FALSE (bee is dead) under which bee becomes gray and falls down, the animation turns super nice and I really appreciated her support. Comparing to the bee’s problem, the bird’s problem is a tiny one. It took me several hours to stop making the bird pic bumping back and forth horizontally.
Thirdly, the breaking apart of the bowl. Sebastian is smart as he cleverly transform the cat’s line into a text-pic. By cutting the text-pic into half and rotating each half, the effect goes that the lines was broken into pieces. But he had trouble cracking the bowl into pieces, it also took him several hours to figure that out.
The ending page wants to show that the beauty turned into a coquettish succubae. To make this effect naturally, I first used Photoshop to set the before-transforming and after-transforming pics’ width and length as the same. Then I made the lay-out of background pics of both main stage and end stage the same. Besides, I making “Love Gone Bad” look as if it withered, and a bloody style of “Look At Me Now” using PS.
I embedded the background music the last day before presentation. I learned that in order to make the typing effect and the music to start loading upon opening the page, I need to put the calls of functions under the same “window.onload”, otherwise there will be a conflict and either javascript won’t work.
Documentation
Apart from the general rule of file documentation (one project folder with folders separately for js, css, and put webpages individually), we also adopt many tactics documenting files to make everything clear. Because we need to make effects on different elements, merely one javascript file controlling all the effects would mess around, which opens the door for errors and conflicts. Hence, we made individual js file for each object (for a bee, a bird and a cat), linked them individually to our page, and documenting them under one “js folder”. This helps us a lot as we simply needed to make changes in individual js file without caring about the influence they make towards the other elements. Also, we made separate css files using the same logic. Though not included in the project folder, I personally referred to many demos, and the source codes are stored in separate folders under one main folder called “samples”.
For the collaboration, Sebastian and i shared a folder on google drive. Based on the initial page-settings, we uploaded our own project folder as long as we contribute to it. In the end, we combine everything we got.
Conclusion
Overall, as Sebastian and I had almost no coding experience, I think we did a great job on our project, and how well Sebastian and I were able to execute it. Our final product looked different from the story line I imagined it to look in my head since day 1, due to lack of consensus as well as unpractical thoughts upon our capabilities of realizing every thought. But we definitely managed to convey the complete idea of what the poem wants to tell readers through interactive webpages, WHICH IS OUR MAIN GOAL. Given the obstacles and struggles we went through, the teamwork spirit during collaboration, as well as tons of coding knowledge (especially those amazing effects!) we absorbed in such a short time, the journey is really a rewarding and satisfying journey.
In the end, please see below for the progress we made during the past two weeks: