vnling/impromptu

Impromptu

Project Description

Impromptu tells the story of a chance encounter (or lack thereof) between our team members, illustrating just how lucky you have to be to bump into your friends on campus. The user is given the opportunity to make four choices, one for each of us, which will determine whether or not we get to end up taking a break at the palms on campus. Design-wise, we were aiming to create a website that would be fairly minimal and allow our video to stand out; however, we intended for the whole experience to be lighthearted and very “slice of life”-esque.

Process

Scripting and Filming

We began by working on a shared document to create a shot list. We planned the videos in such a way that we would be able to shoot most of the footage individually, and eventually met up to shoot our collective scenes under the palms. When filming, we tried to keep what we had learned about getting good footage in mind: for example, anchoring our cameras as much as possible to get steady footage and leaving some overhead room in shots, as well as keeping them to a similar time frame as everyone else.

Video Editing

Doing the intro part was the most difficult because it required us to make sure that all these clips were playing together in a way they made sense. The “zoom” format made it so that we had to make sure that similar actions were happening at the same time. This was difficult to do with all the separate clips we were working with. One of the other difficulties was editing the separate clips (different endings) in such a way that they would flow smoothly together, no matter which combination was connected. As a result, we had to be very careful where we added the fade-to-black transitions. Because our initial shots were done generally in good lighting, there wasn’t much color grading to be done, except in some of the indoor shots.

Audio Editing

We decided to add background audio for all the shots we filmed, following the introductory video to create a sense of friendly, easy-going theme, and add some character to the project. We were aiming for ‘uplifting’ sounding music to match the overall storyline of meeting friends and going about with one’s day. Using samples on Ableton, we got some 4-5 tracks playing on a partial loop throughout scenes in the choices.

Coding

We began by creating a landing page to help frame our website and explain the concept of interactive decision-making to users. Next, we began by setting up the layout of the webpage with test videos so development and editing could happen concurrently. At this stage, we also implemented event checking so we could prompt users to make decisions on our behalf. Once the editing was done, we had to integrate all video possibilities into our code. We ended up having to hard code each possibility, since all our decisions were made independently. Lastly, we added final UX touches, such as allowing users to pause the video by clicking on it and prompting users to retry the experience at the end of the video, to create a smoother experience.

Reflection

For this project, we went through a number of different ideas. Our first idea was focused on a game-like video where the story (animations) were interspersed with quick platformer levels. However, when we tried planning it out, we realized that we probably wouldn’t have enough time to complete the game in time so we moved on to another project. It was useful for use to do this at this stage. If we had spent any more time on this idea we wouldn’t have been able to complete our current project. In general, our expectations for this project were met, there were just a few hiccups along the way. One of our realizations was how many endings there would be despite there being only 4 choices in total. When we were shooting our group scenes we had to double and triple check that we got all the combinations that we needed, in order to avoid having to re-shoot. There were a few missing clips (ie. decision-making clips) but we were able to scavenge other extra clips and use those instead. From a coding perspective, we were able to achieve reasonable resizability for most regular device screen sizes, which is something we’re quite proud of! This was done by styling elements responsively and also modifying the styles for mobile/tablet screens. Though there were a few bumps along the way, we are satisfied with how it turned out and glad that we were able to complete such an ambitious project.