Jamie came to the idea and it is about even though you change the factors of some point but the result still not change. We discussed about the details of the plot, then we decided to make three scenarios. One is eating the fish, one is help cheating or not, the last one is jumping or not. Nan and Jamie finished the conversation part, then Jamie and I started drawing the story board.
This made the filming process easier.
The filming part:
We set off early and go to the Huangpu river to do this. I first go to film the walking part with Jamie, then I do some part of the acting.We really have fun when we doing the filming. Here is some photos we testing the machine and when we are filming. We asked the owner of the dog to let us film the dog in the video for a while. We also let the fish owner be our actor to make the whole scenarios looks close to life.
The website:
Jamie do the cutting of the film and Nan and I do the coding part. During this part, I found that lots of video cannot be loaded into the webpage also the size and the position need to be change, I seeked help during this process and finally made it. Also, I made the css but I found that in different size of the computer the size of some video can be too large and some can be too small, next time I will arrange the css better to make it suit into every size of the computer. After finding the autoplay don’t work, I made all the video into clicking the screen then it will play so the chrome can also play it.
The final looking of the webpage:
We made the button jumped out using the time count function so that the user can easily see the button when it come out.
We added the background movie so that it looks attracting or it will looks black and seems boring.
At the end of it we added the sources we used in this video.
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:
2. layout of divs: cannot horizontally be laid out; cannot standardize all items in the same size. See:
layout4-wlayout5-wlayout6-w
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.
the current time wrong message
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.
cannot close it
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.
For this video project, we adapted a short story called Carnation, Lily, Lily, Rose. This particular short story is part of a collection of short stories, each with it’s own peculiar theme.
Process:
The project consisted of two parts, shooting the adaption and formatting those films onto the website to create a narrative. For our purposes. we adapted certain chapters of the short story. Each chapter has it’s own story. The general premise is that this man has died and he is wandering in an un named place. He is writing these letters to a significant other, often the content is contemplating his life and his relationship to significant other. Adapting those chapters were difficult as we didn’t any prior filming experience. Nevertheless, we managed to film scenes that portrayed certain aspects of those short chapters. The scenes were shot on a samsung galaxy s9. The reason for this selection is due to a the equipment available to us. One of us had a dolly made for phones. We were able to take scenes with a lot of movement.The footage came out okay in the end. After some editing, we pieced it together to create three different scenes. Each scene is an adaptation of one of the letters of the short story.
For the website, we wanted interactions that look at certain scenes from different perspectives. For the first scene, we had two videos shot from two different perspective, one from over the shoulder and one from the ground. Both simulated the motion of walking. The second scene we had different filters. The third one generate several videos that hopefully create this creepy feeling.
Overall the project met our goals. We wanted to adapt the short story. However, one aspect we would like to work on is the interaction. As of right now, the interactions seems disconnected with the story. With more time, we hopefully could include interactions that matches the story.
I had such a fun time creating and working with Justin and Julia on this assignment. I firstly want to commend Justin on his incredible coding abilities and Julia on her expertise and professionalism with Premier Pro. I felt we had such a strong group of different skills that when we all worked together we created a project that we are truly proud of.
Description of the project.
The Project was inspired by a short story that Julia really liked. It’s called “Carnation Lily, Lily Rose” and essentially follows a recently deceased husband writing letters to the wife he cheated on. What we wanted to do was to adapt three of the letters into a screenplay and this formed thepremise of the project. The stories are quite abstract, philosophical, existential and at times nihilistic. We wanted to create something memorable by using voice over to accompany a silent video that conveys to the best of our ability to intensity of the emotions and feelings in the story.
Discussion of your process and how the project works.
The process for this project was very involved. The short story is 20 pages so the first thing we all did was read the story and work out what would be the best way to adapt it to a screenplay. We selected three scenes that we thought would be the strongest and more easily adaptable to screen. We chose the opening, a middle scene, and the ending scene.
The monologues are really abstract in themselves so we definitely had our work cut out for us when we were trying to adapt them. We changed and condensed some of them to make it more realistic for us to adapt into a screenplay. We took away abstract mentioning of a plane crash and changed it to a subway station fall instead.
We then created story boards to mark all the shots and changes. This process was crucial to encapsulating the emotions and feelings we needed to showcase in the story. I definitely used my story board when I was on location and it made the filming process so much smoother, efficient and effective as I knew exactly what I needed to shoot. Justin and Julia also prepared story boards and it made it so much easier to gauge the creative direction for the shoot. Justin obtained a friends stabilizer and we filmed off his phone. We were going to use the Canon Camera but decided against it and used his phone instead. The quality was really strong and was easy to move around considering a lot of our shots were dollys.
I was the actor in our film and was obviously heavily involved in that aspect of the project. Having had a lot of acting experience before, I really wanted the opportunity to have a project I could look back on and be really proud of. I spent a long time working out the best way to choose scenes, shots, lighting and angles to make the adaptation as close to what I envisioned as possible.
After this we each edited a scene using Premier Pro. This was the first time I had used Premier Pro and really enjoyed working with it. Prior to this my only experience had been iMovie which was really limited in comparison but nonetheless a good foundation. I played around with changing the pacing of the raw footage and made it match with the audio to create more seamless transitions.
After the scene construction we looked to the interactive elements. Justin’s coding skills are incredible and he was able to take our ideas and make them into a reality. In the first scene we use interaction by clicking on the sides of the screen to change the perspective of the video. You can either watch the video by only following my feet or by watching me across the street in like a voyeuristic type of approach. For the second scene we chose to have the user select a different filter for the scene and the third is the repetitive image of the eye.
The website itself is simplistic and minimalistic which is what we wanted as the audio/video should be the focal point. You click to begin and the website automatically scrolls down and plays the first video. At the conclusion of the first, it does the second and the third so you are able to completely be immersed in the project.
A post-mortem on whether or not the project met your goals.
The project exceeded all of my goals! I could not be prouder of how everything turned out. I am honestly so proud and cannot praise my team highly enough. They all worked so incredibly hard on this. We did take on a really big task and it definitely paid off.
I hadn’t had much editing experience but I am now confident in Premier Pro and have a new found appreciation and love for cinematography and video production. I am usually the person being directed in front of the camera so having the creative control for a change was actually really refreshing and gave me an unforgettable experience that I thoroughly enjoyed.
If I had more time I would have tried to experiment a little more with Premier Pro to develop some of the transitions but for the first time in making a short film, I felt we did a really good job.
Screenshots of the Project
The majority of my work was in storyboards, filming and editing so that is where my screenshots come from.
The first screenshot showcases the raw footage on the left and the sequence order on the right hand side.
The second screenshot shows where everything is in the film log. You can see the effects on some aspects of the video as well as muted sound and black spaces timed perfectly with the audio.
The Third Screenshot is the RAW Video Footage folder which stored all the originals. I would create other folders so I could manipulate the footage without ruining the original should I want to play around with it.
The Fourth and Fifth are Story Boards that were used when shooting on location to aid in the effective and efficient scene shooting process.
