float cx, cy, r;
float hcx, hcy, hr;
float mcx, mcy, mr;
float scx, scy, sr;
float lenHourHand, lenMinHand, lenSecHand;

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

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

void setup() {
  size(300,300);
  colorMode(HSB, 360, 100, 100);
  background(0,0,100); // white
  ellipseMode(RADIUS);

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

  hcx = width  / 2.0 - 40;
  hcy = height / 2.0 - 25;
  hr = 65;

  mcx = width  / 2.0 + 65;
  mcy = height / 2.0 + 20;
  mr = 40;

  scx = width / 2.0;
  scy = height / 2.0 + 80;
  sr = 30;

  lenHourHand = hr * 0.8; // length of hour hand
  lenMinHand  = mr * 0.8; // length of minute hand
  lenSecHand  = sr * 0.9; // length of second hand
}

void draw() {
  fadeToWhite();

  drawClockBase();
  drawHourWindow();
  drawMinWindow();
  drawSecWindow();
  
  drawHour();
  drawMin();
  drawSec();
} 

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

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

void drawClockBase() {
  noFill();
  stroke(0);
  strokeWeight(1);
  ellipse(cx, cy, r, r);
}

//--------------------
//  draw hour window
//--------------------

void drawHourWindow() {
  noFill();
  stroke(0);
  strokeWeight(1);
  ellipse(hcx, hcy, hr, hr);

  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 = hr * dx;
    float dy1 = hr * dy;
    float dx2 = (hr - lenRuleH) * dx;
    float dy2 = (hr - lenRuleH) * dy;
    stroke(0,0,0);
    line(hcx+dx1, hcy+dy1, hcx+dx2, hcy+dy2);
  }

  float lx, ly;
  fill(0,0,0);
  textSize(16);

  lx = (hr - lenRuleH) *  cos(2 * PI * 0 / 360.0);
  ly = (hr - lenRuleH) * -sin(2 * PI * 0 / 360.0);
  text("3", hcx+lx-10, hcy+ly+8);

  lx = (hr - lenRuleH) *  cos(2 * PI * 90 / 360.0);
  ly = (hr - lenRuleH) * -sin(2 * PI * 90 / 360.0);
  text("12", hcx+lx-10, hcy+ly+16);

  lx = (hr - lenRuleH) *  cos(2 * PI * 270 / 360.0);
  ly = (hr - lenRuleH) * -sin(2 * PI * 270 / 360.0);
  text("6", hcx+lx-5, hcy+ly-1);

  lx = (hr - lenRuleH) *  cos(2 * PI * 180 / 360.0);
  ly = (hr - lenRuleH) * -sin(2 * PI * 180 / 360.0);
  text("9", hcx+lx, hcy+ly+8);
}

//-----------------------
//  draw minute window
//-----------------------

void drawMinWindow() {
  noFill();
  stroke(0);
  strokeWeight(1);
  ellipse(mcx, mcy, mr, mr);

  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 = mr * dx;
    float dy1 = mr * dy;
    float dx2 = (mr - lenRuleM) * dx;
    float dy2 = (mr - lenRuleM) * dy;
    stroke(0,0,0);
    line(mcx+dx1, mcy+dy1, mcx+dx2, mcy+dy2);
  }
}

//----------------------
//  draw second window
//----------------------

void drawSecWindow() {
  strokeWeight(1);
  fill(0,0,50);
  noStroke();
  ellipse(scx, scy, sr, sr);

  fill(0,0,100);
  noStroke();
  ellipse(scx, scy+3, sr, sr);

  noFill();
  stroke(0);
  ellipse(scx, scy, sr, sr);
}

//-------------------------------
//  draw hour
//-------------------------------

void drawHour() {
  float h = hour();
  float m = minute();
  float angleH = -h * angleStepH - m * angleStepH / 60 + 90;
  float hx = lenHourHand *  cos(2 * PI * angleH / 360.0);
  float hy = lenHourHand * -sin(2 * PI * angleH / 360.0);

  strokeWeight(3);
  stroke(225,100,50);
  line(hcx, hcy, hcx+hx, hcy+hy);
}

//-------------------------------
//  draw minute
//-------------------------------

void drawMin() {
  float m = minute();
  float angleM = -m * angleStepM + 90;
  float mx = lenMinHand *  cos(2 * PI * angleM / 360.0);
  float my = lenMinHand * -sin(2 * PI * angleM / 360.0);

  strokeWeight(3);
  stroke(225,100,50);
  line(mcx, mcy, mcx+mx, mcy+my);
}

//----------------
//  draw second
//----------------

void drawSec() {
  float s = second();
  float angleS = -s * angleStepS + 90;
  float sx = lenSecHand *  cos(2 * PI * angleS / 360.0);
  float sy = lenSecHand * -sin(2 * PI * angleS / 360.0);

  strokeWeight(1);
  stroke(0);
  line(scx, scy, scx+sx, scy+sy);
}