Try It

https://networked-media.inthecreat.ing/project2/

Overview

Starting out this project, I wanted to build a clock that goes beyond the 24 hours in a day. But in what way?

I realized that by removing the colon in 4 digit time format (HH:MM), I could get a 4 digit number that could represent a year between 0 and 2359 AD (e.g. 10:45 is the year 1045 AD). In this way, 24 hours become 24 centuries, spanning from past, present and into the future. But how to reflect this idea in the clock?

As stated in the initial concept, I wanted each year to point to some kind of historical event. Yet there’s hardly any way to represent each event visually on a webpage, apart from texts and images found on the internet, which could possibly be wrong or inaccurate, and unappealing. So I decided to pivot back to the concept of time itself. Time is just how we as humans interpret the universe, and how we perceive time is dependent on technology—whether it’s a computer, a mechanical clock, or else. Then, what if I create a timeline of how timekeeping technologies evolve, and the form of the clock is based on the technology at the time of the 4 digit time-year. For example, at 01:00, which maps to the year 100 AD, the clock would be a Sundial.

This way, the clock would reflect various different timekeeping technologies in the past, present and future.

The function circles back to the form.

Process

Essentially this idea requires me to create a number of distinct clocks that intertwine one another. After researching the various timekeeping technologies, I settled on these 10:

Roman Sundial (1st to 4rd Century)
Water Clock (5th to 8th Century)
Candle Clock (9th to 12th Century)
Verge and Foliot Clock / Single Hand Clock (13th to 16th Century)
Pendulum Clock (17th to 19th Century)
Nixie Tube Clock (20th Century)
LED Clock (20th Century)
Computer Clock (20th Century)
Smartphone Clock (21th Century)
Quantum Clock (Future?)

Next, I researched each of these technologies so that I can recreate them in the form of website. Here are the reference images and the ones I created:

Roman Sundial

Recreating the Sundial in graphical form was a bit of a challenge, especially the shadow which acts as a pointer to the current time. Without using a 3D engine, there's hardly any way to create an 100% accurate shadow. But I tried my best and drew a triangle shape with one corner pointing towards the current time mark. This is achieved with the clip-path property and the polygon() function in CSS, as well as sin and cos calculations done within the CSS file.

Water Clock

When I researched the Water Clock, there were several iterations and variations across different time and regions, but I choose to create a simplified version of this one, created in the Roman Empire. I removed some of the complex mechanisms and only created a pipe, a water container, a floating pointer and a cylinder with the hour marks. However, I did create the water dropping animation using CSS gradient background. Also, the cylinder is a bit too short for all 12 hour marks, so I decided to borrow from the original Water Clock, which involves rotating the cylinder. So I used CSS absolute positions to create 2 sets of 6 hour marks, and when the hour exceeds 6, the second set of marks will move in from the right, as if the cylinder is actually spinning.

Candle Clock

The Candle Clock is relatively simple, and for the candle flame, I used different border radii and a rotation of 45 degrees to create the shape and used a continuous scaling animation to create the dynamic effect.

Verge and Foliot Clock

For the Verge and Foliot Clock, I created a simplified version, but kept all the key details: the single hour hand is rotated by a series of gears, and there are 2 weights hanging from the top, which is key to moving the gears.

Pendulum Clock

The Pendulum Clock is quite similar to the previous one, in fact, I reused a lot of the CSS. This time, I added a swinging pendulum and two weights hanging from the bottom.

Nixie Tube Clock

The Nixie Tube Clock has always been one of my favorite retro tech objects. It is just a genius way of displaying electrically controlled data prior to the invention of LEDs and screens. I found a font type that recreates the feeling of the original clock perfectly, and used CSS text-shadow to create the glowing effect.

LED Clock

This one is probably the easiest to create. However, I defined the combination of LED strips that will resemble each digit in the CSS for a smooth transition between digits.

Computer Clock

For the Computer Clock I recreated the Original 1984 Apple Macintosh, which was the first consumer computer with a Graphical User Interface. I even recreated the window shape in the original machine’s OS and used the original font (Chicago, designed by Susan Kare) for displaying the time.

Smartphone Clock

This one is my favorite out of the 10 clocks. I once realized how easy it is to lose track of time when watching YouTube videos one after another, as there’s no display of time when you are in full screen. So I made this Smartphone Clock, despite its technology to track time being so advanced (virtually 100% accuracy when connected to the Internet), the smartphone often cause us to forget about time, unless you intentionally look for it (in this case, hover the smartphone shape with your cursor and the Lock Screen with time will appear).

Quantum Clock (for an imaginary future?)

How will time be perceived or recorded in the future? No one knows. But I created this mysterious quantum physics inspired clock. Each of the digits is in a quantum state, flipping between 0 and 9 (and a question mark, why not?). When you hover over the digits, it will show the time in that exact moment, similar to the observer effect in quantum physics.

References

All graphics are either created using pure HTML/CSS or original SVGs
No generative AI is used in the creation of this project