Here is the link of the first page of our project: http://imanas.shanghai.nyu.edu/~xy1242/project02/opening/index.html

Concept – Rationale, and reasons that you have chosen this project

This story is created by my partner. He once wrote a short story for his favorite tomato fish restaurant. He wrote his story as a recommendation to his friends. And we like this short story because it is fun and unusual. Therefore we want to use this story as the blueprint of our project. We think this story can have multiple kinds of interactions with animations driven by buttons. 

Development process/methodology – What did you make, and how did you make it?

Firstly, we think the original of our story does not completely fit our project. Thus we restructured our story and modified some details to create the design and thinking of both of us. Moreover, we revised some plots of the story to make it easier to understand. We also do this to create more interactive modes, giving our players a colorful and enjoyable experience while reading the story. The major part of our project is our pictures and the animation, and we used the minimum of the texts to tell this story clearly. Because we want our players to focus more on visual parts, though they are very simple, we think they are interesting and unique.

Analysis of tools used – Technical analysis, problems encountered, and how where they solved 

In our first website, we simply use opacity and buttons to provide the background of our story and introduce the two main characters. 

In the second website is mainly designed by my partner. 

In the third website, we use a little hover and combine it with the code I learnt from the website to make a picture rotate when the mouse is on it. And we use transition to make it look like an animation. And at first, we failed to make the animation. And we finally discovered that we must write the style data that need to be changed in the css file, or it will change immediately leaving out the transition function. 

In the forth website, we design a difficult inner structure and many functions to make the picture move regularly and circularly. We also pass the variable in one function to another function to make sure the picture stays at its position after its movement stops. Moreover, we make a cute “float function” to make the picture float. This time is not technically difficult, but it took us lots of time because its logic structure is complicated.

In the fifth website we make a recursion by using the “setTimeout” function, so that we can load a new image every second after clicking the button, and we use “clearTimeout” to stop this progress after clicking the button again. In this website, we also use the “transform” function to make the image reverse left and right.

The sixth, seventh and eighth websites are very similar only contain simple animation using the transition when moving the image. 

In the ninth website, we use the drag function learnt in class, and we also learnt to unable the drag function from the internet. So when the image is dragged to the place we want, it cannot be dragged anymore. 

In the tenth website, we also make a recursion by using the “setTimeout” function. And a difficult part of it is to make the image rotate and move at the same time. 

When we complete all above, we began to worked on the dialogue part. Every page should be started with clicking the “Next” button, and then you can see the dialogue or the instructions. Also, you cannot see and click the “Continue” button to go to the next website until you explore all the plots in the current website. We do this by adding a similar function with many if statements to every js file we had completed.

Critical Reflection – What do you think about your finalized work? What things would you change now?

We want our project to have two different endings but we do not have enough time. And the interactive modes are kind of monotonous since most of them are driven by button. I think we should improve our images and pictures, we only used little time in this part and it looks simple and rough. Also, I think we need some audio stuff to make the project more interesting and colorful. Moreover, if possible, I want the project to be in website with a long page rather than in many different websites.