The project is for Assignment 2 of the Communications Lab course in Interactive media, made possible by Ramsha, Tengis, Yiyang, and Vir. The goal of this collaborative group project was to create an interactive web comic that integrates a plot with imagery illustration and web implementation.
The overall concept was the story of an astronaut who goes into space for a mission but encounters an unexpected problem: a black hole. Time distorts as his rocket is sucked into the black hole, and he loses control over his spacecraft. And then, all of a sudden, he wakes up.
Todd, all of a sudden, wakes up scared. “That was such a bad dream,” he thinks. He puts on his suit and prepares his rocket to leave for his space mission to Mars. The rocket takes off from Earth into the vastness of space. On the way, Todd realizes something is wrong. He can no longer control his rocket! He sees far off in the distance, an enormous black hole. And as he moves closer to it, time seems to grow faster. He looks at his hands and he’s old! Todd fears for his life as his rocket gets sucked into the black hole.
In the first panel, the story begins when the astronaut wakes up. At the 6th panel, time has distorted and the astronaut is sucked into a black hole. At this point, our webpage loops back to the first panel without the need to scroll back up. This effect is added to create an ending that is open to the user’s interpretation. When the page loops back to the first panel, the user can interpret it as him waking up from a bad dream. This bad dream was “him getting sucked into a black hole.”
However, another interpretation is that when the astronaut is sucked into the black hole, he enters an infinite time loop where he keeps living the same day over and over. To create this effect, we added the infinite loop where the user keeps scrolling through the page and can go on forever. It is up to the user’s imagination to pick any ending.
The use of colors aligns with the emotions of the story. For example, when the rocket is out of control, we use a blinking gif to represent the panic.
Gifs are used to make the story more visual and to increase the user’s understanding of the story.
We added a backdrop of space as our page background, and added music to the webpage that corresponds to our “space” theme. This creates a more visual experience for the user as they read through, feeling like they are inside the story.
Moreover, the user can choose to play or pause the music themselves to their liking.
We used dialogue boxes to tell th thoughts of our character and used loud shapes to correspond to his emotions.
I was responsible for creating and designing the basic outline and responsive elements of the webpage. Since, our story itself had a never ending loop type of characteristic, I made the website scroll to reset immediately and subtly, so that it would look like a never ending panel. Furthermore, to make it more immersive, I embedded a space travel music to it so that it would be more immersive. Also, narrative text is added in case it would be harder for the audience to understand from just the pictures.
During the project, I was responsible for the illustrations of the comic, specifically the first 3 panels of our comic strip and the description of the panels for the webpage. To design them, I used Adobe Illustrator and free stock photos for backgrounds and for ideas. For the first panel, I added a night background to a graphic of our character waking up. I used shaped dialogue boxes to add the effect of surprise. For the second panel, I used another background on which I drew the character, and for the last panel, again I drew a rocket on a background.
While planning, I communicated with my team members to arrange our meetings, sent out calendar invites, set up zoom meeting, and coordinated with everyone so we can successfully meet to discuss the project’s progress.
During the discussion phase, I came up with the idea for the comic strip, and subsequent ideas for a fixed background in .gif format over which the panel will scroll. During the project, I was part of helping with coding the web-page and coming up with ideas and implementation for the interactivity and scroll animations. I used Visual Studio Code to do the same.
Keeping the goal of the project in mind, I feel satisfied with the comic we have produced. There were hitches along the way, such as adding the music and cross-implementing the interactivity and the looping, but we got through it and produced a functional and aesthetically pleasing project. It has also given me experience in coding and working with teams, which is sure to help me in the future.
In the initial conception of the comic, I have framed the overall effect of the web comic to be perceived by the audience together with my teammates. I decided that I would that our team will utilize the artificial intelligence as part of the imagery generation process.
As for personal contribution, I was responsible for the illustration part of the comic, namely panel 3-6. During the phase of imagery creation, I have utilized Adobe products such as Photoshop and Illustrator, as well as artificial intelligence as a source of creative inspiration. For example, for panel 3, I have adapted an image of the interior of a spacecraft, fused the AI-generated black hole into the background, and created the dynamic gif effect to portrait the emergency situation in the comic. Similar techniques were also applied to other panels that I created.
The first interactive comic/illustation I made as an individual and as a team, it to a large extent reached my expectation, although there are, of course, some minor possible areas of improvement, such as the animated display of panels and the asthetics of the imagery. However, I appreciate the collaborative work we have done together to convey a complete and intriguing story.