void setup()
{
  size(600, 600);
  colorMode(HSB);
  surface.setResizable(true);
  smooth();
  frameRate(2);
}

void draw()
{
  // setup the size relationships
  final float cx = width/2.0;
  final float cy = height/2.0;
  final float radius = min(cx, cy);
  
  final float faceRadius = radius * 0.9;
  final float secondsRadius = radius * 0.72;
  final float minutesRadius = radius * 0.65;
  final float hoursRadius = radius * 0.5;
  final float minuteDotSize = radius * 0.015;
  final float hourDotSize = radius * 0.03;
  
  float h, m, s;    // time 
  float hpos;
  
  // get the time
  s = second();
  m = minute();
  h = hour();
  hpos = map(h%12, 0, 12, 0, 60);
  
  // make the background
  background(0);
  fill(30);
  ellipseMode(RADIUS);
  ellipse(cx, cy, faceRadius, faceRadius);
  
  // draw the hands
  drawHand(cx, cy, hpos, hoursRadius, 4);
  drawHand(cx, cy, m, minutesRadius, 3);
  drawHand(cx, cy, s, secondsRadius, 2);
    
  // draw the ticks 
  for (float i=0; i<60; i++) {
    drawTick(cx, cy, i, secondsRadius, minuteDotSize, hourDotSize);
  }
}

color angle60Color(float angle)
{
  return color(map(angle, 0, 60, 0, 256), 180, 255);
}

void drawTick(float x, float y, float angle, float radius, float sm, float lg)
{
  float trueAngle;
  float trueSize;
  
  trueAngle = map(angle-15, 0, 60, 0, 2*PI);
  if (angle%5 == 0) trueSize = lg;
  else trueSize = sm;
  fill(angle60Color(angle));  //HSB
  noStroke();
  rectMode(CENTER);
  rect(x + radius * cos(trueAngle),
  y + radius * sin(trueAngle), trueSize, trueSize);
}


void drawHand(float x, float y, float angle, float radius, int weight)
{
  float trueAngle;
  
  trueAngle = map(angle-15, 0, 60, 0, 2*PI);
  strokeWeight(weight);
  stroke(angle60Color(angle));  //HSB
  line(x, y, 
  x + radius * cos(trueAngle),
  y + radius * sin(trueAngle));
}