For the second project of this course we were asked to develop an interactive comic in pairs. After having a brief conversation with my partner we decided that we both wanted a friendly sweet theme. At first, we decided to do a story that is focused around the campus cats, however we were later inspired by a post that Alyzia found on Facebook that briefly describes that life story of a robot that is capable of experiencing all human-like emotions. Later, we developed this story to be a more complex one where a scientist is found hiding underground from an apocalypse, and decides to relieve her loneliness by creating a robot that experiences all feelings mankind does. As the user scrolls down the comic he/she gets to witness the scientist/robot relationship develop as they become more attached to each other while sharing their daily activities together. Towards the end of the story line the scientist suddenly dies. The comic is designed to end in two different possible ways that the user gets to choose from the start. In the happy scenario the robot will have another companion to ease his loneliness and sadness, however in the sad scenario the robot will have a broken heart after losing his one best friend. The sense of time passing that we intendenly created will help include the user inside the comic, as he/she will get to share the feelings of happiness and loss the robot experiences. Although, we initially thought about adding text to the comic, as we later felt it will be for the user’s benefit to have the space and opportunity to use his/her imagination to the maximum and leave the untold details behind the story line up to the user’s perception.
When we were dividing our tasks, we agreed that Alyazia will handle the artistic aspect of the comic given the fact that she is insanely talented at this, and I will be handling the majority of the coding with Alyazia’s help. I made sections and inner divisions for each panel with an image and then styled each section with the height of the panels and how long they’d stay on and the space between each panel and then for the inner division container I made it sticky. So basically it scrolls through the section where it goes from relative to sticky to relative for each panel. So while the same panel is on the screen at a certain scroll point the javascript switches the panel image to the next version of it. I referenced a lot of the example code we made in class especially the one about the value of the Y scroll, and I changed images based on their Y value so how far the viewer has scrolled. For the interactivity part, we focussed on the scrolling mechanism and the two ending that the user chooses from. Although, personally believe that we were able to achieve most of our initial goals and expectations, I hope that I was able to get the sound on/off button that I wanted to add to work but unfortunately I couldn't do it.