float cx, cy, r;

float lenRuleM = 5;  // length of min rules
float lenRuleH = 12; // length of hour rules

int angleStepM = 360 / 60; // min angle
int angleStepH = 360 / 12; // hour angle 

void setup() {
  size(300,300);
  colorMode(HSB, 360, 100, 100);
  background(0,0,100);

  cx = width  / 2.0;
  cy = height / 2.0;
  r = width / 2.0 - 30;
}

void draw() {
  fadeToWhite();
  drawBoard();
  drawTime();
}

void fadeToWhite() {
  fill(0,0,100,50);
  rect(0,0,width,height);
}

//--------------------
//  draw clock board
//--------------------

void drawBoard() {
  noFill();
  ellipseMode(RADIUS);
  ellipse(cx, cy, r, r);

  for( int angle = 0 ; angle < 360 ; angle += angleStepM ) {
    float dx =  cos(2 * PI * angle / 360.0);
    float dy = -sin(2 * PI * angle / 360.0);
    float dx1 = r * dx;
    float dy1 = r * dy;
    float dx2 = (r - lenRuleM) * dx;
    float dy2 = (r - lenRuleM) * dy;
    stroke(0,0,0);
    line(cx+dx1, cy+dy1, cx+dx2, cy+dy2);
  }

  for( int angle = 0 ; angle < 360 ; angle += angleStepH ) {
    float dx =  cos(2 * PI * angle / 360.0);
    float dy = -sin(2 * PI * angle / 360.0);
    float dx1 = r * dx;
    float dy1 = r * dy;
    float dx2 = (r - lenRuleH) * dx;
    float dy2 = (r - lenRuleH) * dy;
    stroke(0,0,0);
    line(cx+dx1, cy+dy1, cx+dx2, cy+dy2);  
  }

  float dx, dy;
  fill(0,0,0);
  textSize(16);

  dx = (r - lenRuleH) *  cos(2 * PI * 0 / 360.0);
  dy = (r - lenRuleH) * -sin(2 * PI * 0 / 360.0);
  text("3", cx+dx-10, cy+dy+8);

  dx = (r - lenRuleH) *  cos(2 * PI * 90 / 360.0);
  dy = (r - lenRuleH) * -sin(2 * PI * 90 / 360.0);
  text("12", cx+dx-10, cy+dy+16);

  dx = (r - lenRuleH) *  cos(2 * PI * 270 / 360.0);
  dy = (r - lenRuleH) * -sin(2 * PI * 270 / 360.0);
  text("6", cx+dx-5, cy+dy-1);

  dx = (r - lenRuleH) *  cos(2 * PI * 180 / 360.0);
  dy = (r - lenRuleH) * -sin(2 * PI * 180 / 360.0);
  text("9", cx+dx, cy+dy+8);
}

//-------------------------------
//  draw time (hour and minute)
//-------------------------------

void drawTime() {
  int s = second();
  int m = minute();
  int h = hour();
  
  float angleS = -s * angleStepM + 90;
  float angleM = -m * angleStepM - s * angleStepM/60 + 90;
  float angleH = -h * angleStepH - m * angleStepH/60 + 90;

  float lenHourHand = r - 50; // length of hour hand
  float lenMinHand  = r - 20; // length of minute hand
  float lenSecHand  = r - 10; // length of second hand

  float hx = lenHourHand *  cos(2 * PI * angleH / 360.0);
  float hy = lenHourHand * -sin(2 * PI * angleH / 360.0);

  float mx = lenMinHand *  cos(2 * PI * angleM / 360.0);
  float my = lenMinHand * -sin(2 * PI * angleM / 360.0);

  float sx = lenSecHand *  cos(2 * PI * angleS / 360.0);
  float sy = lenSecHand * -sin(2 * PI * angleS / 360.0);

  strokeWeight(3);
  stroke(225,100,50);
  line(cx, cy, cx+hx, cy+hy);
  line(cx, cy, cx+mx, cy+my);
  
  strokeWeight(1);
  stroke(0,0,0);
  line(cx, cy, cx+sx, cy+sy);
}