Custom Graphics for real-time Clock

CursorStudio

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: https://processing.org/examples/clock.html

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!!!

quark

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

pushMatrix()
rotate(angle_for_hand)
image(image_for_hand)
popMatrix();

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

CursorStudio

Ok

CursorStudio

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

quark

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");
  imageMode(CENTER);
}

void draw() {
  background(255);
  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);
  pushMatrix();
  rotate(h);
  image(h_hand, 0, 0);
  popMatrix();
  pushMatrix();
  rotate(m);
  image(m_hand, 0, 0);
  popMatrix();
}

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

CursorStudio

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

Jamie

koogs

minute() + norm(second()

good job 8)

koogs

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

CursorStudio

cool thanks where do I add that?

koogs

anywhere in setup()