Week 11 – Video Project (Moon)



If you see any anomalies (blank / stuck page), please refresh your browser. The video assets are too large 😀


Keywords in mind before we set the topic: mirror, dream is opposite to reality, mask – take off, smash into pieces, put it back on, true self, reconciliation / suicide.

And below we have a Google Doc documenting the ideas in our mind when brainstorming for the subject of the Video Project. (Sorry for the Chinese!)


Also some pictures we got inspired from (credits to Pinterest). One of our main interaction methods derives from the last picture! (Though we are unable to get any fancy reflective masks :p)


We hope you can understand the idea we try to covey by the media itself, but if you still feel a little confused, here is the main storyline:

The snapshots in the very beginning foreshadows the plot that the viewer is going to explore. We carefully chose the snapshots to be representative of friends, parents, and society, and Our main character suffered from abandonment, abuse and isolation from these three sources. We decided to deploy these three snapshots in the very beginning of our project and let them play automatically one after another. The reason behind this is that we want to not only build the audience’s expectation and also set the overall tense and depressed atmosphere. The style of video editing – quick and sudden transition, and cold & simple fonts all serve this purpose.

After the snapshots, we are going to enter the actual content of our video project (by opening a new html page called “content.html”). In the beginning of the content, we stick to the mechanism of snap-shooting: displaying various short clips to convey the main idea. We want the viewers to feel that the main character is in a extremely low mood, and would do weird (possible dangerous) things in such mood.

And then it comes with one of our two interactions part. The video is going to pause automatically when the main character is holding one of the pieces of the mask she just broke by smashing her head onto the tap. The viewer need to press&hold the mouse in order to keep the video playing. We set this interaction because we want to let the viewer know that this means going back to the painful past, which our main character is not willing to. So instead of a easy-peasy click, we demand a harder press&hold. And if the user release the mouse before the transition completes, the video is going to jump back to the place where our main character is holding and looking at the mask. We designed it to be this way to reveal that the main character is actually avoiding going into the painful memories and stay how she is now.

In the memories (there are in total three pieces, echoing the three snapshots in the very beginning of our project), viewers need to click certain key objects when the video pause to continue the plot. We made such interaction to stress certain objectand keep the viewer in a active position – not like a movie where the viewer can only passively accept everything that is put onto the screen. The objects are spitball before the elevator, character’s bandaged hand, character herself and knife on the ground.



Having recalled all the painful memories, the main character put all pieces together, and fancied that the mask becomes complete again. Please note that this is not a good: we made the mask become complete again (without any flaws) after the main character put together all pieces to show that this is actually her fantasies instead of reality, that the mask can never be put together again.


In order to make this piece artistic as well as interactive, we spent some time considering about the interaction mechanism, and decided that we are only going to use press&hold and click. From the feedback we received, the interaction could be made more intuitive by changing the cursor style when we want the viewer to interact with our video. I personally think that this is indeed a good point, but often got ignored. After all, we changed the cursor style for the start button in the beginning menu of our project. We could’ve applied the same idea to all interactions later on. And here is what it is for our two interactions now. (sorry for the image, WordPress seems not like vertical ones)



















I took full responsibility of the coding part.




scriptt.js (for index.html)

script.js (for content.html)

I think the essence of the codes can always be found in script.js I’ve tried to make the code easy to read, please feel free to dig into it if you would like to!

Here are some highlights:

The press&hold&flashback motion is a bit tricky, and I also used some interesting tricks to avoid redundant codes by switching the boolean value of variable played. You may also find that in the init() function, I’ve realized that the interactive field position&size will stick strictly to the browser size. So, the user can play with their browser whatever they want without running into trouble experiencing our project. I personally regard this as a huge step towards, since I avoided such problem by using popup windows in the Interactive Comics project.


Overall, I think the work we present to everyone matches the idea in our mind. Maybe some fine-tunes for the video editing can be done, but it’s safe to say that we have really created something we are truly proud of.

Leave a Reply