Link: http://imanas.shanghai.nyu.edu/~ac6596/Adam’s_Big_Day/
A fair warning, this will be quite a long documentation. It contains a more personal take on this project and serves as a place to vent some frustration, but also has some takeaways that I hope will serve any curious students to not repeat my mistakes.
This is also the reason why it is unfathomably late. I apologize to whoever grades these things.
Forgive the informality, I tried to make this as persuasive as possible.
Description of the Project:
In the beginning of the project, my group decided to implement something simple, which would be a video that could change different perspectives of a person’s daily life. Essentially, the code would switch between perspectives like so:
The plan was to have a button that would interchange the perspectives of the three actors on their way to school. However, my groupmate, Kimmy, worried about the cohesiveness and interest of a viewer in the story. Who would actually want to watch someone’s trip to school? there has to be something to guide it, some sort of plot. Therefore, we decided on a chronological story which started the downfall. I will not lie, we did not accomplish our goal in a satisfactory way. The code, because of our ambitions, further complicated matters by breaking before we presented, having for me to stay behind and be late for class. To this, I am truly sorry for my professor, cici.
This is how the Division of Labor was broken down:
Filming = Adam/Kai/Kimmy
Conceptualization/Direction = Kimmy
Drawing and Text Message Editing = Kimmy
Editing Adam Scene (4:48) + gifs = Adam
Editing Kimmy Scene (2:38) = Kimmy
Editing Kai Scene (2:26) = Kai
Handling the functionality of HTML and majority of the javascript = Adam
Handling CSS and mouse-over functions of videos = Kimmy
Handling the mouse-over function of Kai video = Kai
Process:
Coding:
At the very start of the process, we thought it would be simple to just agree on a cohesive idea. This ended up being Kimmy’s idea, a video project on the story of three people coming to school.
Personally, for me, I thought it would be wise to start coding on the project as soon as possible. I was looking for possible solutions to using a single video div in order to display this.
My first code essentially showed this, with the following functions replacing the div with video files to change the video.
This, I thought would be the simplest way to change the code. This, however, was not the case. The method that I ended up experimenting with was changing the display of multiple videos that I would have playing in HTML, which looked something like this:
This is the basis for the mess that was our project.
By this time, however, I had figured out how to make it so that in different sections of time, we would be able to display various things and run functions, which will be shown below:
The above image is how to show and hide images. By using document.getElementbyId(‘whateveritisthatyouwant’).style.display = “____” you can change the display of an image’s CSS within javascript. This was the main function that was used to call functions.
The above image shows the functions labeled “change”, where these functions were used by various buttons in order to change the display of the videos. The function “video.currentTime” was then used to set different times of the videos that were being called. At the time, I thought this was simple code. Little did I know that with assets, I would be overwhelmed. This brings me to the next part.
Filming:
I am actually pretty proud of the shots that we did, although I did not really like waking up early to attend to everyone’s needs for being filmed. In the long run, however, we were able to make a decent film (in my opinion).
The breakdown for filming was like this: I filmed Kai’s dream state, Kimmy’s wake-up scenes as well as my own. Kimmy filmed shots of me in the gallery and walking to the gallery scene and Kai’s sleeping state was filmed by her roommate (whose’s shots I really did not like but like what can I do about that).
I learned a lot about videography (This was my first chance to film!), and was able to experiment a lot with the adobe premiere service, although I regret that I failed to compensate for a few things.
For example, for the first hour of me using it was literally trying to find the tools to use to edit. However, after that I found it to be a very useful tool. Love premiere and would recommend it over iMovie, even though there is a steep learning curve.
Notables that were forgotten would be the difference between the audio of the soundtrack that I used and the dialogue audio. I do regret it, but listening on headphones was a very different experience from the speakers. I suppose I should have taken that into consideration.
I also totally forgot to credit the producer.
Here’s the link, as well as the producer and such :
Titled: Post Malone, Swae Lee – Sunflower (Spider-Man) INSTRUMENTAL –
Youtube Producer: 101k
Editing:
Kimmy was a bit confused as to how to edit the second half of my video, so I had to take part in editing it. This was fine, as I was also going to re-edit the first half of my video because of some of cici’s comments on the framing of the shots. For example, there is a bathroom scene where I brush my teeth, which was originally a scene where I brushed my teeth and shaved. However, since the frame was a bit off and cici said something about having a straight line I decided to refilm it.
Also for consistency, I had to reshoot the entirety of my getting ready scene because initially, I put on a hat and headphones. However, I did not have those things when I went to the second part of the scene. Therefore, I had to reshoot those, but I was happy to include a new shot of me putting on my shoes with my socks ~ they were very cute poodles!
Additionally, I think another scene that was very fun to shoot was the entirety of Kimmy’s scene. I didn’t really do much directing, and I’m glad that Kimmy took the initiative to just act natural. We were able to take most of the footage in one shot, except for maybe her putting on her shoes ~ this was hard to do though because I had to lay down to get the right angle to capture her feet and the little shimmy that she does. Another cool but very hard shot to do was on the train. When filming on the train, it is important to be stable, but also know what you were filming. In this case, I think that my camera was very useful because it can angle the display case so that I can look at what I’m shooting at, even if it is at an odd angle. This made it easier for me to take shots of random people on the train (because it is very uncomfortable to do so for me). This is how I got stable train footage.
I must say though, I always felt very cumbersome carrying around the audio equipment and the tripod with me everywhere. If you ever film, get a small duffel filled with clothes! I find it much better than a camera/sling bag that you carry over both shoulders. Plus the clothes serve as cushioning! A very nice pillow indeed if you ever feel weary. Anyways, jokes aside let’s continue.
Issues we ran into -> So, literally the chaos of the past 2 days.
To sum up the past two days: Painful.
Chronologically here is my past day or so:
Monday -> 6:30 wake up -> Film -> go to school -> go to class -> finish comm lab -> go have dinner -> 6:30 begin working on comm lab -> 11:45pm leave ab -> 12pm stress out about comm lab -> 6:30 wake up -> 7:30 get to school and decide to skip class to work on comm lab -> work until 12:30 -> go back at 12:35 (I eat fast) -> work -> 2:00pm have everything break -> panic -> 2:30 talk about giving up -> 3:00pm get back to work -> 3:50 have my code break -> 4:45 go to comm lab with a semi half finished project because javascript broke on me.
I’m not really looking for pity, but I am incredibly tired. Is this what IMA students do? I guess you could call this an acceptable failure ~ try your best but still fail. Everything’s fine.
Moral of the Story: DONT BE TOO AMBITIOUS ON A VIDEO PROJECT. But ALSO DONT PROCRASTINATE ON ASSETS.
The main issue with this project is that assets were being worked on at the same time that the main code was being put together. Because of this, I often worked on adding, instead of making the code more efficient. after all, I didn’t really have time to add more stuff with the influx of new and changing assets at the time frame I was given. This was definitely rushed, and I blame myself entirely for it.
Here are some handwritten attempts to keep track of everything I labeled – apologies that it isn’t rotatable.
This is the entirety of the final code.
It is way too long.
However, in reflection, I guess this shows how I should probably be more efficient with my code. However, since I was mostly learning on the fly here and testing to see if each function worked it was going fine. However, due to the fact that so many files kept getting switched around and we changed from like 5 buttons to 10 buttons, it became incredibly hard to track what was going on in the code.
I think if I didn’t care so much about this project, this would have definitely been a lot worse because the way that I labeled each id made it so that I had to memorize the positions of where everything was. However, after working on it for so long it essentially became so that I knew every line of code that was being produced.
However, because of that it also made it so that I was the only one who could combine everything together. I’m going to have to blame the comm lab style of teaching for this because essentially even though we learned the code to understand what I had, it is hard for students to really practice what we learn in class. I think that I made a lot of progress in learning and being able to read javascript by doing these projects, but it is still a huge time commitment. Often times I spend about 2-3 hours minimum in the lab just trying to learn some code. This is not exactly what I want to do with my life, but I guess it is fun. Anyways, back to the analysis.
Essentially, what went wrong is that even though what was initially a simple project became something so utterly complex that it spanned too much code. With the addition of buttons and image elements in the equation, it was hard to allocate enough time to fix everything and code everything myself even with the stupid amount of time that I have already put into it.
If I had another week, perhaps it would have been for the best, especially with the expertise of the IMA fellows.
I was also not expecting this to be that hard, because the story behind user testing is that I was able to fix everything within 3 hours.
The story is that the weekend of, I was initially waiting for all the assets to appear because I had been promised stuff so that I could continue to work on the code. I was unable to really work on it because I had gone to Shenzhen (for future reference -> DO NOT GO ON SCHOOL FIELD TRIPS BEFORE PROJECTS ARE DUE) I lost a lot of time on coding and filming because of this.
However, I am not entirely sure this would have mattered due to complications with our assets. For example, there were a ton of coding questions that I had to fix for our user testing part, so when I arrived at around 12am on Monday I went back to the dorm and coded for 3 hours until I finished. Therefore, I thought that I could handle what I was given and that this project would not be that bad.
This was not bad. The demo too, was not bad. I don’t think we had working buttons, but we had hover functionality.
This was fine. But what was not fine was the fact that Kai finished hover functionality on Tuesday, which meant that I had to stay over to incorporate it into the already huge amount of code that I had.
Essentially, another lesson I might take away from this is to work on one thing at a time and not everything at once.
As Dave (IMA fellow) once told me, don’t use multiple javascript files or HTML files. It’s inefficient.
Post-Mortem:
After completing this project, I was incredibly tired and anxious about the turnout. It was not what I expected in terms of code, and I am quite ashamed that it is in quite a piss-poor state. However, I know I did the best I could and I guess I will just have to take the loss.
In this light, I guess better group communication would have been best to finish the project in the same manner. If we were able to complete our assets earlier, we would have been able to work on the code sooner and then probably fix all the issues. However, after the past two days, I am thinking that it would have taken a week and a half (after 7 hours of working I still had bugs, and my sanity is ruined).
It was also incredibly lucky (in a bad way) that Kai and I both had things to attend on the weekend. This sacrificed a lot of time that could have gone into making the video. But then again, I paid 2,000 kuai to go to Shenzhen and I also put my best into making the video project work.
Overall, I guess I am happy in the filmmaking aspect, although it could use work. I am not happy about the coding, but I guess I will manifest it into a dislike of my own coding organization habits.
These were already said, but I guess they would really apply to this project.
If we had more time, and I had a bit more experience coding in javascript this could have worked out very well. However, we probably should have stuck to a simple concept such as just changing perspectives. After my audio project though, I thought it to be inadequate. If I could petition for more time to work on projects, this would definitely be a fine example of it.
And if I were to abuse this medium as a free-space for ideas, I think that we all could have used more time to really think about our concepts. But then again, just my two grains of salt.
Essentially, I’m just happy that the barebones for the project are in place. It could use a major revamp though. Maybe I will ask Leon if I have time if he’d be willing to help organize the code.
I’m thinking now that I will clear my head and work on the next project, and hope that the coding lessons learned here will help me ace the next one.