Karel Martens, Three Times (in Blue and Yellow), 2016 (video)

In 2016 Dutch Graphic designer Karel Martins presented his Three Times (in Blue and Yellow) clock at the P! gallery in New York. Three yellow and blue spinning disks representing the hours, minutes, and seconds of the current time. It does very little, other than spin contentedly. But, on the way, the passing of time produces a collection of interesting graphic arrangements.

The clock has been a favourite subject for artists and designers for many years. In this project, you are asked to create a clock to represent the current time. It is not essential that the time of day be literally readable from it, but your clock should appear different at all times of the day, and it should repeat its appearance every 24 hours (or other relevant cycle, if desired).

Before you begin, enrich your concept of clocks and timekeeping by reading/viewing the following resources:

You are challenged to develop a conceptually strong design for your clock. We strongly encourage you to seriously question basic assumptions about how time is represented.
For example you might be interested in the notion of always running behind schedule. In that case you might consider designing a clock that represent a countdown. What it looks like, or what this countdown might actually count down to (a deadline or the last train back home?) is in this case up to you but should be in sync with your overall concept/theme.

In p5.js time is a simple variable you can add to your sketch. P5.js communicates with the clock on your computer and can return hour(), minute(), second(), and millis(). The minute() function for example simply returns the current minute as a value from 0 – 59. You’re also welcome to use day() and month() for a clock which changes over the seasons or human lifespans..

On Kawara, Date Painting(s), David Zwirner Gallery, New York 2012

For more inspiration and a brief history on Visualising time visit Golan Levin’s lecture.


  • Sketch first on paper.
  • No, really. Ponder things like biological time (chronobiology), ultradian rhythms and infradian rhythms, solar and lunar cycles, celestial time, geological time, decimal time, historical time, psychological time, and subjective time. Read about the incredibly interesting history of timekeeping. Check out thisthat, and the other link we recommended to you above. Research to inform your ideas and concepts.
  • Create your clock in p5.js. If you have a good reason to use a different programming toolkit (Processing, openFrameworks, three.js, etc.), that’s okay; please inform the professor to make alternative arrangements.
  • You’re strictly prohibited from using Roma, Arabic, or Chinese numerals.
  • Limit your design to a canvas which is no larger than 800 x 800 pixels, please.
  • When you’re done, save your P5 sketch in a folder called: task2-yourname
  • Write a paragraph or two (100-150 words) reflecting on your process and evaluating your product.
  • Document your work by embedding images of paper sketches from your notebook. These could be as simple as photos captured with your phone.

Coding Challenge #74: Clock with p5.js

Below is some p5.js code to get you started.