float StartSecondsAsRadiansOffset;
int mx;
int my;

void setup() {
  size(600, 600);
  colorMode(HSB, 360, 100, 100);
  background(0);
  noStroke();
  mx = width/2;
  my = height/2;
  smooth();
  StartSecondsAsRadiansOffset = map(second(), 0, 60, 0, radians(360)) - radians(89.5);
}

void draw() {
  fill(0,0,0,5);
  rect(0,0,width,height);
  float s = map(millis() % 60000, 0, 60000, 0, TWO_PI) + StartSecondsAsRadiansOffset;
  float m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI; 
  float h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
// Draw the ticks
  float Scolor = (second()+1)*6;
  for (int a = 6; a < (second()+1)*6; a+=6) {
    fill(Scolor,50,100,3+(a/10));
    float x = mx + ( cos(radians(a)- HALF_PI) * 220 );
    float y = my + ( sin(radians(a)- HALF_PI) * 220 );
    ellipse(x, y, 8, 8);
  }
// Draw the second
  fill(Scolor,100,100,50);
  ellipse(cos(s) * 220 + mx, sin(s) * 220 + my, 16, 16);

// Draw the ticks
  float Mcolor = (minute()+1)*6+second();
  for (int a = 6; a < (minute()+1)*6; a+=6) {
    fill(Mcolor,50,100,3+(a/10));
    float x = mx + ( cos(radians(a)- HALF_PI) * 160 );
    float y = my + ( sin(radians(a)- HALF_PI) * 160 );
    ellipse(x, y, 12, 12);
  }
// Draw the minute
  fill(Mcolor,100,100,10);
  ellipse(cos(m) * 160 + mx, sin(m) * 160 + my, 24,24);

// Draw the ticks  
  float Hcolor = (hour()+1)*15+minute();
  for (int a = 30; a < (hour()+1)*30; a+=30) {
    fill(Hcolor,50,100,2+(a/30));
    float x = mx + ( cos(radians(a)- HALF_PI) * 100 );
    float y = my + ( sin(radians(a)- HALF_PI) * 100 );
    ellipse(x, y, 30, 30);
  }
// Draw the hour
  fill(Hcolor,100,100,10);
  ellipse(cos(h) * 100 + mx, sin(h) * 100 + my, 60, 60);
}

void mouseDragged() {
  mx = mouseX;
  my = mouseY;
}