Working link: http://imanas.shanghai.nyu.edu/~cz1317/project4/index0.html
Partner: Cherry, Chenchen, Vivian
In this project, we wanted to convey an idea that “you cannot make decision based on the partial reality you saw”. We were inspired by a misunderstanding story we saw before and create this story–a man goes back home and finds his wife holding a knife towards his ill mother. Should he divorce with her?
After discussed many ways of interaction, we finally decided to make it into the way that ask users to check 3 CCTV videos from 7–because of the low battery. We set the background to be that the man has doubted his wife for a long time so he installed CCTVs days ago, and so he can check the videos in the past 7 days, and there are 7 folders in the webpage, the users can click the folders to see the corresponding videos.
After finish watching 3 videos, user needs to choose between divorce or believe, and they will lead to 2 different endings–the wife leaves, or they hug. Finally, because users may still be confused, we show the 7 videos with wife’s voiceover to show what’s really going on. It turns out to be that the wife is actually taking good care of his mother and she is really considerate, but users are likely to choose divorce with her because they only see partial “reality” and assume the wife is a bad woman.
Here is our storyboard:
First need to shoot videos. I played the wife and Vivian played the mother, then I asked Sumner to act as my husband. Then we decorate dorm’ room to make it more like a home, find the right angle, then shoot.
The first several scenes are more difficult, for example, the “sleeping pill” and the “drip” one. This two scenes both need zoom in to show the details, but it is very difficult to zoom in stably and smoothly, and we need 2 people to adjust at the same time:
Also, because I need to put the sleeping pills in the specific position(because we use MF here) with a specific orientation, we use pencil to draw a circle on the table:
We shoot this scene for more than 20 times to get this successfully:
After finish all the shooting work, we divided following work to be more efficient. All of us are responsible for 2-3 video clips and 1-2 website index (We have different website interface so we decided to built 6 html, because that is more convenient to split work, and we use window.open to connect them).
First, because we show videos in the CCTV’s format, I use Final Cut Pro to add the filter and adjust the time and date, then I use iMovie to adjust length, sounds and other details.
The most difficult part is dealing with sound. When recording the videos, there are continuous annoying noise of the camera in some clips, and it is very disturbing. So I decided to remove all the sound of the video and record them again. The conversations, the sound of opening a door, the sound of phone calling etc. But after apply all of those sounds, I found that it is a bit unnatural, because it is too quiet–there are no background noise as it should be. So then I find a quiet place to record the white noise of quiet environment, then add the white noise to the videos, finally it sounds natural.
Another thing is, after the preview class, we found that some users cannot figure out the relationship of the 3 characters in the beginning of the video, and it is not a good idea to add a picture like this:
verbal words should be more effective, so we screenshot this picture when there are both wife and mom, and made the husband to introduce the relationship:
To make it more clear, I use Ken Burns to zoom in and zoom out while the husband is introducing:
Also, we use fade in and fade out a lot when dealing with sound to reduce the background noise and make the transition more natural:
- Code for first page is here, in this page, we just add instructions and show the relationships here, and users can press “Enter” to start. I combine html, css and js files into one here:
2.In the second html, we use window.open to connect, and played the video that the husband went in and saw the wife holding a knife.
3. Then in the third one, we mimic Macbook to design the interface. At first we used the alert function, but it is not good-looking and too small. So we use Photoshop to create the picture:
4. After users see three videos, we give them 2 choices, and each button lead to different end, we use Photoshop to make the button so it is prettier, and the code is here:
5. The final 2 html is two different endings. First we show what the wife thinks and then the button “reality”. Then we display the video of the true story, and the story ends. The code for the bad ending is here:
After all, I like our project. I believe the idea is successfully conveyed and it is educational. But there are still some point that I think we can improve.
- First thing is the quality of the videos. Though we tried our best, but there are still some points that there are slightly shake or unsmooth movement.
- Personally, I would like to improve my acting. For examples, the clip where I toss and turn restlessly, I think I should have act better to show that I am stressed out and cannot fall asleep. Also, the clip where I leave with my luggage, I think I should do some other things to show my reluctance to leave, so that the user may be more guilty afterwards.
- As for website, I think our website is a little bit too simple. Though I don’t think too complex is a good idea, but if we have more time, I think we can add some more suitable functions to make it more interactive and more interesting. Also, I think combine all 6 file into 1 is a good idea that the code would more beautiful.
- Because we use CCTV format, some clip’s angle are too low. We have considered this problem but finally we decided that it is the best shooting angle, but it cause inconsistence. So I guess if we have more time we would figure out a way to adjust it to make our project more consistent.