Custom Graphics for real-time Clock

edited August 2016 in How To...

Hi all,

I'm a massive newb to processing, I've only just turned to it as a solution for a last minute job that's come in. I real-time clock animation that fits in with the themeing of an event.

I basically only have time to work on the graphics for the clock face and clock handle and was wondering if anyone out there could kindly tell me how to turn take code:

and turn it into one where the clock handles are an image and the background is an image, or just transparent so the image can be added in Resolume.

Maybe the script above is completely the wrong approach?

Any help much appreciated!!!



  • edited August 2016 Answer ✓

    You need four images all the same size, prefereably square with the centre of the clock face being at the centre of the image..

    1 Face without hands
    2 Hour hand
    3 Minute hand
    4 Second hand

    In images the 2 - 4 the hands should all be facing north (12 O'clock) with the background transparent. The rotating point of the hand should be the centre of the image.

    The images should be loaded in setup using the loadImage method.

    In the draw method you should
    1) get the time as per the example
    2) calculate the angles for the hour, minute and second hands - zero degrees being at 12 O'clock, 90 degrees being at 3 O'clock etc.
    3) Use the image method to display the clock face
    4) For each hand in turn using the following algorithm


    Rotations are cumulative the push/popMatrix will isolate the rotation for each hand.

  • Unfortunately this also involves learning more coding which I have said I do not have time to do, but I will find someone who can implement this stuff for me, thank you

  • Answer ✓

    This clock was created with the code below and based on my algorithm above.

    /* @pjs preload="clock_face.gif,clock_minute.gif,clock_hour.gif"; */
    PImage face, m_hand, h_hand;
    float m_angle, h_angle;
    void setup() {
      size(500, 500);
      face = loadImage("clock_face.gif");
      m_hand = loadImage("clock_minute.gif");  
      h_hand = loadImage("clock_hour.gif");
    void draw() {
      translate(250, 250);
      float s = map(second(), 0, 60, 0, TWO_PI);
      float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI); 
      float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2);
      image(face, 0, 0);
      image(h_hand, 0, 0);
      image(m_hand, 0, 0);

    Each image was 500x500 pixels and followed the instructions above. I leave the second hand for you to do :)

  • Thank you so much! I always prefer to learn for myself when I can, just time restrictions at the moment


  • minute() + norm(second()

    good job 8)

  • the one thing i would add is frameRate(5) else you're doing 60 times too much work (and my processor is maxing out)

  • cool thanks where do I add that?

  • anywhere in setup()

Sign In or Register to comment.