For this time visualization, I used the heating up of a mug to portray each hour transition. The cup sits on the heater which increases in flame particles as each second passes by, and every minute, a particle of steam emerges from the cup. When time reaches the hour, A large puff of steam appears to indicate that the cup is overheated, a combination of all the minute steam and small flame particles building up.

https://www.openprocessing.org/sketch/609801

For my visualizing time project, I was inspired by tides and ocean currents. The purple color represents the hours, the teal color represents the minutes, and the light blue represents seconds. I had some difficulties making waves that moved with the time, so my first try involved rectangles:

After some help, I was able to add waves with fill underneath to represent different times of the day.  The wave that represents seconds moves the oscillates most rapidly. The wave that represents minutes is slower than the seconds wave. The hours wave is the slowest wave. As time goes on the “current” rises, then falls at the repeat of its respective time interval.

Below: 3:40PM

Between 9PM and 4AM, the background color and image change to represent nighttime.

Below: 2:33AM

Code in OpenProcessing (doesnt have the background image): https://www.openprocessing.org/sketch/609529

For this project, I decided not to do a traditional clock that measure regular time, but a biological clock that measure the pain level of cramps over time during menstrual cycle. The level of pain is represented by the amount of wine in the wine glass. The day is represented by the darkness of the color of the wine. Every time a pain killer is consumed, a person would appear and drink the wine. The pain killer also appears overtime, and the amount consumed is displayed with text. At the end of every cycle, a black screen will appear with a message(shown above).

For demonstration purposes, I scaled the time down. So the wine glass will refill every minute.

visualizing time project

VisualizingTime <– processing zip file because the images wouldn’t upload on open processing

Visualizing Time Through a Subway Cart

In this program, I used the state of a subway cart to visualize time. The seconds are represented by how fast or slow the riders are moving. Starting at 0 seconds, where there are little to no movements, the riders are moving faster as the clock reaches 60 seconds. At every minute, the orange “tracker” on the black and white “route map” on the back left of the train cart moves up one “train stop.” Each stroke represents a minute and every 10th minute is marked. For every hour, the number of people in the train cart changes. If the actual time is between 7-9 am or 3-8 pm, which is approximately the times for rush hour in real life, the train cart will be more crowded than usual.

Link: https://www.openprocessing.org/sketch/609513

 

link:https://www.openprocessing.org/sketch/609265

 

 

For this project I visualized time through a pair of eyes. Throughout the day, base on the hour the eyelids will open wider approaching noon and narrower away from noon. Likewise based on the hour and minute, the eye bags under the eyes will grow darker approaching midnight and lighter away from midnight. With the passing of minutes every hour, the pupils will move across the eye. On even hours it moves from left to right and on odd hours it moves from right to left. Every 3 seconds the eyes will blink.

Link: https://www.openprocessing.org/sketch/609503

The biggest difficulty I had in this project was finding a way to animate the blinking. I needed a way to store how much the eye would close for each frame within the function while keeping track of which way it was going. In the end I had to use a boolean variable in addition to the integer height variable to keep track if the eye was moving down for the blink or moving back up.

 

I designed my clock similar to that of the show “24”, which covers the life of a counter-terrorism agent as he works against the clock (specifically in 24 hours) to defuse a bomb. My clock was inspired by the clock that worked as an interlude between each major part of the episode, when the clock dramatically ticks down from 24 hours to 0. I then used alternating color squares with different colors to emphasize the different times of day.

Disclaimer: these screenshots were taken at the same time of day, but with alternating the code, so some of the times may not be entirely correct.

 

Link:    https://www.openprocessing.org/sketch/609490

The central idea of my clock is to use the change of color to present passing time. The top, thinnest arc presents seconds; it goes through every color per minute. The middle arc presents minutes, which goes through all the color per hour. And the bottom arc presents hours, going through all the color per day (24 hours). The change of their color is in the same order of colors of rainbow.

Here’s my rainbow at different time.

At 4:37:01 AM                                                                                                                                    

8:37:16AM   12:37:16 PM

04:05:38 PM

 

Nowadays, the most common way to present time is by using digits, so I was thinking about what can also be presented by digits, and this is how I came up with my idea to use color presenting time.

The most difficult part of this project is how to code the change of color. I did a research on RGB colors of a rainbow, and summarized a pattern as shown in the picture below (my draft). At different phases of time, each element of RGB color have different values, and they may be changing or fixed. So in my coding, I use boolean to separate each phase, and if statements to control the value of element of colors.