Week 14: Where do you want to wake up tomorrow? (Sarah)

Title: Where Do You Want to Wake Up Tomorrow?

Partner: Julia

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.

Code: For the website of our project we created 2 html pages, two css style pages, and one javascript page.

  • HTML: First we added the jQuery library and linked the html page to their corresponding css sheet and javascript file. We created a div for the home page video where we loaded the introduction video and created a function to check the video time. We then uploaded a giff for the title of our project so that would be the first thing the user sees when loading the page, but for some reason, the on click function did not work on the giff, so we created a div for a fake layer which allowed the user to click on the giff in order to continue to watch the video. Then we created another giff where we uploaded the an image of a door with a function so that when the user clicks, it redirects him or her to the main site.In this website, we also added some function using jQuery methods to change the opacity of the door when the mouse hovers over it. All of this is shown below.

For the second HTML page, we also added the jQuery library and linked the  css sheet and javascript files. We created divs for the image of the building, for each of the people we interviewed, for the audio playing on the website, for an image of an exit door, and for the viewing mode of the videos where we put little cross on the top right corner to exit the videos. Then. we created some functions with jQuery for the opacity of the images when hovering over them.

 

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.

 

  • Javascript: We had the following functions:
  • 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.

 

Leave a Reply