Project link: http://imanas.shanghai.nyu.edu/~js9686/video-project/index.html
Last update: since Chrome does not offer autoplay function, I changed all the autoplay into an event listener in JavaScript that allows the user to click to start. Play it when you click it.
Project Philosophy (Jamie’s idea!)
People tend to believe that the development of things results from multiple factors, including environmental actors, the subjective choice from an individual, etc. People may believe that the result of one thing in front of us is generated from all these factors in a reasonable way.
However, when too many factors are mixed up and intertwined with each other, how can we make sure that the result we see is led to by an integrative action from all the factors that we are aware of, rather than – a random result that can be led to regardless of what factors are influencing it?
Things, therefore, may develop in a random fashion, and the result may not be led to, as what people imagine, by the factors that they are aware of. Then, what is the power that is determining this seemingly random result?
Project Description
Following our philosophy, we designed an interactive website that allows the users to make choices, choose options, and see the results.
The first scene begins with a water-dropping scenario. When water drops on one joint of your fist, the direction of where the droplet would go may also have to do with many factors, as you are aware of: the inclination of your fist, the roughness of your pore, or the orientations of your fine hair. However, do they actually making the final destination of the water drop different?
The thing that we want to convey here in this project is that: we all make choices, and sometimes would regret some choices that we have made. However, no matter what choices or options that you may have chosen, even if you believe that that you have made a really really bad choice, the result of things may have little to do with that very choice.
Then, we designed three plots respectively to let the users make choice.
The first one is a moral situation whether you would like to pick the fish up or not. The second one is on whether you would help your friend cheat in the exam. The third one is through the first person perspective deciding whether the user himself/herself would commit suicide or not. Then, there’s a following ending where we explicitly talked about what our philosophy is.
Process:
Jamie, Clover, and I are collectively working on this project. We went shooting together according to the storyboard. Jamie was in charge of directing and filming the scenes, and she was also the major editor. Clover was the professional actress in our film. She was also involved and assisted in coding and editing, without whom our project couldn’t be polished as it is right now. I was the major coder and involved in filming and recording as well.
Following the storyboard, we began to brainstorm where and how we could get the footage that we need. Things went on smoothly, and we just went for shooting on April 12 and 13.
Difficulties during filming:
In the suicide scene, we wanted to have footage that shows the process of falling down to the water. In order to do that, we borrowed GoPro and wanted to record the moment of sinking into the water. However, it turned out that GoPro has fairly strong light sensitivity, and it looks really fake when we went back to see the footage. We finally decided not to use that.
Also, the read-write rate of SD card was not strong enough for a long-time shooting. We have to reduce the resolution of the footage to accommodate that hardware deficiency. We strongly recommend IMA to purchase some decent SD cards for cameras to solve this issue.
DIfficulty in coding:
- cannot full screen. Shows like this:
layout1
solution: I referred to the “full screen” sample on our GitHub, and change the code using:
window.onload = function() { adjustVideoSize(); }
window.onresize = function() {adjustVideoSize();}
function adjustVideoSize() {
if (window.innerWidth/window.innerHeight >= 16/9) {
fishVid.width = window.innerWidth;
fishVid.height = window.innerWidth * 9/16;
} else {
fishVid.width = window.innerHeight * 16/9;
fishVid.height = window.innerHeight;
}
2. layout of divs: cannot horizontally be laid out; cannot standardize all items in the same size. See:
Solution: I consulted Leon, and he gave me a wonderful tool to use when adjusting the page layout:
outline: 2px red solid;
outline-offset: -2px;
It helps greatly to see the relationships among browser size, the size of container/div, and the small divs that I am going to arrange.
To arrange responsible layouts, to calculate the percentages of what I need is of great help. First, set the small divs in a large div/container in which the width = 100%. Then, calculate the width of each small div that I need out of 100%.
3. I wanted to trigger a function after a video is ended. Initially, I used this method that was introduced in class: I read the currentTime of the video showing, and console.log that time. Then, set up an “if” function using the time point near to the end to trigger the function that I want. However, it doesn’t work.
I googled and found that I can use “onended:xxxxx” to read whether a video is ended or not, and it solved my problem. (But I still don’t know why my former method doesn’t work.)
4. js cannot close the window via a button: the window.close() function doesn’t work.
This is what I did as an alternative: I opened a blank page to close the current page. But I still don’t know how to close the page ideally. Therefore, I deleted this function.
5. After uploading the code, some pages couldn’t work properly. Then I checked the code, and found out two problems:
a) javascript linking to another html failed. I’ve arranged so many js files so I get myself confused in one of the files.
b) some file names have misspelled alternating letter cases.
Then I solved these problems.
Unsatisfactory things:
My code is not scalable enough. I used too many HTML, javascript, and CSS pages inside each segment to trigger interactions, and it added a lot of confusion to my coding partner Clover because every time when we wanted to add a new page to an old page, it was hard to find how to link to the new page and where the original source is. It was only me, the original coder, who was completely clear about what each line of code means. Next time when doing a collective project (or even an individual project), it is always good to make the code clear, simple, and scalable. (It is hard and needs practice, I know.)
For this project, it could have been easier just by linking the common js/css files to different segments, but it’s already towards the end when I discover this trick.
Last update: since Chrome does not offer autoplay function, I changed all the autoplay into an event listener in JavaScript that allows the user to click to start.
Screenshots of our project:
