Visualizing Time

Some non-traditional clocks made with JavaScript.



When
Spring 2018

Tools
HTML
CSS
JavaScript(p5.js)


collaboration
Individual
The Challenge

Students were asked to make 3+ clocks using p5.js that represent time in an innovative way.



1. Space Clock

Hours, minutes and seconds are represented as planets.






2. What Color Is It Now?

Generates a color palette based on what time it is. Some times of the day are better looking than others.






3. Time Wave

Inspired by liquid filling a container. Colors are randomly generated.





4. Designer Clock

This is a designer clock. It uses Helvetica and is (not 100%) black.




Inspired by the designer mug.



Sketches