Time- Zone Widget

One interesting thing about time is that it's very relevant to change we can perceive. After moving to New York, I had to keep in mind the difference in timezones (EST and IST) while talking to my friends and family. I'm sure many people who've moved across countries face this to some degree or even across timezones within the united states. There is a reasonable window of time to contact each other during the day or night. I decided to make a visual representation of this using different clocks and a circular area that becomes bigger as a reasonable time window

Critical Computation Lab

Parsons MFA Design and Technology 2021

Inspiration

The geometry of the solar sundial, in which the time is indicated by the shadow, and progresses through the day where we're mostly active. With different time-zones, the overlap of sunlight available of active-hours differ in different time-zones hence the sun-area over lapping the two clocks signifies a window of time to connect for people in different timezones.

The clock is blue orange during the first half of the day (AM) and blue during the second half of the day(PM) to tell them apart.

Indian Standard Time

Area not overlapping clocks shows that it's probably too early/late time-window to connect

Eastern Standard Time

Indian Standard Time

Area overlapping clocks shows that it's an acceptable time-window to connect

Eastern Standard Time

Indian Standard Time

Area heading towards overlapping the clocks shows that it's probably slightly too early/late time-window to connect

Eastern Standard Time

Process

I used P5.Js to program the time overlapping sun-area concept with the two clocks in different time-zones.

Circular window of time

Manually noted down cut off times in both timezones after seeing the times I spoke to friends and family
Based on time windows mapped the radius to increasing and decreasing segments based on hours during the day
Using the map function and boolean functions created those time windows where the diameter of the circular area is increasing or decreasing accordingly

The Code

View the full project here