Group: Chenchen & Mary
Project Name: A Girl’s Readme
In this comic project, our group created an interactive non-linear story about a girl using HTML, CSS, and JS. The way to interact is mainly hovering above the glowing objects and clicking on the buttons.
At the beginning of the story, this girl always thought others pay too much attention to her and felt uncomfortable. Users will see the monologue of this girl and what other people are like in her point of view by interacting with the people on screen. Then the users will be led to her bedroom and by “choosing to play with different animals in her dream” (clicking on the animals), users will see beautiful scenes about the girl playing with animals in her dream. In each of the scenes, there will be different animations displayed after users interacting with it. The animals will say some educational saying to the girl to change her wrong attitude towards the world. The users can wake the girl up at any time but there will be different endings based on how many animals they interacted with. If they click above 2 animals, the result will be that the girl is happy because now she finds something in the world that is more meaningful and beautiful than worrying about others’ attention on her. If they click a little number of animals, the result will be the girl is still unhappy because of those people she thought that are watching, talking, and criticizing her. We will give users a second chance to change the girl’s mind, which will lead back to the bedroom for them to choose more animals.
Our concept is that there is no use concerning and paying too much attention to others attention and opinion on us all day long, rather, one has other more meaningful and prettier things to pay attention to in the world.
Our concept partly comes from a popular game called “travel frog”, in which a small frog travel around Japan, hiding in the grass with a mouse, view the flower with butterfly .etc. It also comes from my experience just like this girl who always thinks others are focusing on her.
This is the flow chart:
I am in charge of painting all the characters.
I also did some PS. The challenging thing is how to make the background match up with the hand-painted style of sketch and the color of characters. To do this I used the filter “Dry Brush” and reduce the brush detail while increase brush size.
e.g.This is original:
after my editing:
Mary is in charge of filling in colors to my sketch and also using PS to modify the background.
- Creating HTML, CSS & JS files
In this part, I am in charge of creating files from the bedroom scene to wake-up scene and also think up the content of texts of the whole project to guide the users.
The challenging thing is that we want to create a global variable in JS to count how many animals scenes users viewed, so we cannot use <a href=”…”> </a> to open a new HTML file, rather, we need to stay on one HTML file. With the help of Professor Moon and Jiwon, we managed to use <iframe>.
In my first try, I used bedroom.html as a home page, and add one new iframe to open an animal HTML file as a window every time users click on one animal icon. We also have go-back button on each HTML files of an animal. I used DOM property (display: none” and “display: block”) to manipulate wipe out and show the button. Although I put the go-back button on top of the iframe, the button will be covered by new iframe added.
After asking Professor for help, I revised it. This time, I only changed the content of one iframe element then it works.
The following is the code:
Animations are also not an easy task. When we first thought about having sunlight rotating following mouse, we didn’t think about how to get the angle in degree. Luckily, we found that there is function in JS which can get the arctan. Using this data in radian system, I then multiplied a constant to get the number in degree. We also came across problems related to the sharp edge of the sunlight.png. I fixed this by positioning the center of rotating sunlight outside the screen.
This is the display of sunlight with sharp edge:
The following is that code related:
The final result:
Mary worked on other files.
To get a sense of consistency, I suggested making the interactive elements that are not button-like glowing. This is because we were worrying if these elements don’t look like buttons and without special effects, users don’t know what to interact with. In my suggestion, these elements will grab the users attention to lead them to interact with it.
To create linkage between HTML files that are not related to the global variable, I used <a href=”…”><a>.
Mary is in charge of making adjustments after I first link them together.
This project achieved our expectation. We are pleased to see the consistent design style and pretty animations after we tried many versions. If time allowed, we could study more about iframe since for we cannot hide the back button in the scene of girl and fish since we don’t know how to display it again when we change the content of iframe from clicking a button on this page.