Time Visualization – Xinyu Liu's Documentation Blog 🥕

Time Visualization

Description and Concept

The project is inspired by my time tracking experience. As I tracked my time, I found that only using the 24-hour measurement for time visualization is not effective, because the duration of time I feel when doing different things differs greatly from the recorded amount of time on the calendar.

In this project, I visualize users’ perception of time instead of the objective amount of time and encourage people who are busy carrying on daily routines and schedules to take a moment and rethink what they truly want and value.

The project contains four parts: 1) Intro animation (without user interaction), 2) user inputs (2 kinds of data: the time spent on and the likeness of different activities), 3) User-input-generated animation (showcase the perception of the speed of the time according to likeness), and 4) revisualization of time based on perception (combine and compare the 2 kinds of data and conclude a final message).

The main techniques used in this project are: 1) utilizing the real-time database to record and retrieve user inputs; 2) pixel manipulation; 3) time sequencing.

The main focuses are: interactive experience (data inputs & mouse clicking) & transmediality (time-visuals).

Demo Video

Conceptual development

During the meeting, Professor Moon suggested I use the update function to store data with an ID defined by me so that the data will be more organized:

Fabrication

1) Cannot retrieve data from the firebase

At first, I tried to use this code to retrieve data:

The code was modified from the firebase documentation “read and write data”. I deleted the child(userId) since I didn’t find one.

I can see from the console that the snapshot.val() returns the following:

Then, I use dt = snapshot.val().work to get the number. But when I console log the dt, it returns a message saying “undefined”:

Then, I try to use the get() method: dt = dbRef.child(“ActivityT”).get(); I console.log it and get the following (There’s a lot of nested info in the “Promise”. I don’t know what they are but I cannot find my data inside):

Later when I consulted Professor Moon, he told me that the userId is an essential part of the get function. But I don’t have to use this method to retrieve data. Instead, I can use snap.val() to get the data:

2) Cannot utilize data on another web page

On the user input page, I stored the data in a list so that I don’t have to retrieve data from the firebase to sum them together. But when I tried to utilize data on another web page in the setup function, the data couldn’t be stored in the list.

I also tried to return a RefVal list with reference and the values as its elements:

But the list couldn’t be used correctly:

Finally:

3) Time sequencing

I used frameCount as the time signal for displaying the texts and animation:

But every time I run the code, the time for loading the sound is different and the sound couldn’t match the animation accurately. I will solve this problem by using other signals in the future.

4) Background Music

I downloaded two raw music from Youtube: the first is a clean wall clock sound effect and the second is the music box bgm. I adjusted the volume of the music downloaded. Then I cut the audios and assemble them together to make it the right length.

5) Re-visualize the time

I used a rectangle (window width) to hide the lower part of the histogram and adjust the y position of the histogram rectangles to visualize the objective time: