p5.js Analog Clock Examples

A collection of analog clock designs done in JavaScript using p5.js

Theory of Operation

The analog clocks in this directory use p5.js’ rotate() command to rotate each hand before drawing them. The radial coordinates work like so:

              3*PI/2 at the top
                    |
PI on the left    - o -       0 on the right
                    |
              PI/2 at the bottom

To get 0 at the top, the program rotates the whole drawing 3*PI/2 radians. This gives the following map:

                    0 at the top
                        |
3*PI/2 on the left    - o -       PI/2 on the right
                        |
                   PI at the bottom

Then the program rotates the drawing surface proportional to the angle of each hand, then drawing the line for the hand. The formula for rotating a given hand is dependent on the number of divisions of the circle needed (e.g. 12 for minutes and hours, 60 for seconds) and the actual value of the time unit in question. The formula is

unitValue * 2 * PI / number of divisions

For example, if it’s 15 minutes past the hour, then:

15 * 2 * PI / 60 = PI/2 = the hand is pointing to the right.

Te circle around the edge of clock001 is simply an arc starting at 0 and going to the position of the seconds.

See the Clocks in Action

clock001 A basic analog clock with the hands offset from the center, and the seconds represented by an arc around the edge of the circle.

clock002 A variation on clock001 which takes serial input from a microcontroller and sets the time using values from a rotary encoder and pushbutton attached to the microcontroller. The Arduino code is included.

clock003 A variation on clock001 which takes keyboard input from a microcontroller and sets the time using values from a rotary encoder and pushbutton attached to the microcontroller. The Arduino code is included.

SunMoonClock Some clocks depend on the position of the sun and the moon. The suncalc library calculates these for you, using your geolocation and the time. This example draws a clock like the previous example, but also adds the moon and sun. It uses the suncalc library and your geolocation to calculate the sun and moon’s position (azimuth) relative to you. It then draws them in their proper positions for the current date and time, and your location. North is shown at the top of the clock.

Decimal Clock - a clock based on the French revolution-era decimal time scheme.

Color Clock - a clock that tells time using the HSV color wheel. Red is twelve o’clock, green is 4 o’clock, blue is seven o’clock. The inner circle is the hours, and grows over 24 hours. The middle circle is the minutes. The outer ring is the seconds.

See also Christer Nilsson’s Bezier Clock, which uses p5.js to make a clock of Bezier curves