Title: Where Do You Want to Wake Up Tomorrow?
Description and Idealization: For this project, Julia and I decided to ask people in what world or where do they want to wake up tomorrow. So we recorded people answering this question and then drew animations on the video using Premiere and Photoshop. We also asked to speak creatively on the topic, so some of the answer they gave us a quite long. The website is quite simple, but since we wanted to be consistent with the style, we decided to also use drawing for the home page, the buttons. After the home page, the website redirects the user to a page with a long drawing of a building and drawings of the people we interviewed on each window. The reason why we used drawings in our project was because wanted to inspire people to actually try to live in the world the want to live in and encourage them to do things they want to do instead of just conforming to what their situations are. Similarly, this is also the reason why we decided to have the people inside a building looking out the window, because we think this represents how people are trapped in their lives and are in a metaphorical sense looking out the window and seeing the world.
Videos: For the videos, we wanted to have the same style for all of the video and we wanted to keep it simple, so we recorded headshots of the people answering the question. Also, we asked the question on camera because we wanted to capture their thinking process. With these, we then made an introduction video to our project. The videos were edited using Adobe Premiere, where we put the videos and the audio together (since we recorded the audio separately). We used a drawing pad to sketch drawings on Photoshop for the animations. To do the animations, we had to save the drawings as a bunch of different images. Then, on Premiere, we used the animation tools to put the together and add them to the videos.
The reason why we decided to use jQuery is because this made our code way simpler and easier to program, but it was a bit confusing, specially because of the syntax that we were not familiar with. We also used jQuery here to gradually change the background color of the page, which we learned in a tutorial on this website.
- CSS: For the css of the home page, adjusted the width and height of each div and gave them their appropriate characteristics, such us cursor style, background color, visibility modes and their position. We also used keyframes to give fading in and fading out animations to the giff.
For the other css style sheet, we defined several classes for the different colors of the background and same as in the other style sheet, we gave the according characteristics to all of our id’s, but also created another keyframe animation to zoom the videos in whenever the user clicked on the image.
- To redirect the home page to the main page and vice versa.
- To hide the home page giff and the fake layer, and make the video visible. Also used jQuery to give the fade in animation to the video.
- To check if the current time of the video is greater than the full length of the video and if so, to make the enter door visible and the video hidden.
- To play the videos. But since we did not want to create separate functions for each video, we decided to use jQuery. Here, we appended the videos using their id and make them visible. We also added css animation for the opacity. We also created variable in order to position the video in the exact center. And lastly, this function also plays the videos.
- The last function we created was to exit the video, where the background music would start playing again, the video would be hidden and it would pause, and the video id would be removed so that we could append a different video when clicking on a different person.
Overall, Julia and I are very happy with out project but we wish we could have added more interactivity between the user and our project. We also wanted to add a page where the user could get to answer where he or she wants to wake up tomorrow, but we simply could not figure out how to do it.