How To...

Animate A Better Clock

Here's some coding that builds a clock and uses a lot of techniques. It's different from the one in Processing's Examples under Basics > Input > Clock which I think depends too much on sin and cos functions (yech, math!).

PROCESSING

A Clock

void setup() {
  size(500, 500);
}

void draw() {
  background(0);
  stroke(255);
  // center everything
  translate(width/2, height/2); 
  
  // Second hand
  strokeWeight(1);
  pushMatrix();
  // Since radians start at 90 degrees, and are counter-clockwise
  // add 90 to the degree value to correctly align it
  rotate(radians((second()*6) + 90));
  line(0, 0, -200, 0);
  ellipse(-200, 0, 4, 4);
  popMatrix();
  
  // Minute hand
  strokeWeight(4);
  pushMatrix();
  // Minute and hour hands don't jump to even positions.
  // There are 6 degrees between one minute marks,
  // so we need to move the minute hand by 10th the value of the
  // seconds (30 seconds moves the minute hand 3 degrees)
  rotate(radians(((minute()*6)) + 90 + (second()/10) ));
  line(0, 0, -180, 0);
  ellipse(-180, 0, 8, 8);
  popMatrix();
  
  // Hour hand
  strokeWeight(6);
  pushMatrix();
  // Hour hands move 30 degrees between hours, so
  // we divide the current minute value by 2
  // (30 minutes past the hour should move the hour hand 15 degrees)
  rotate(radians(( (hour()*30) + 90 ) + (minute()/2) ));
  line(0, 0, -100, 0);
  ellipse(-100, 0, 8, 8);
  ellipse(0,0,12,12);
  popMatrix();
  
  // Second ticks
  strokeWeight(1);
  pushMatrix();
    for(int i = 0; i < 60; i++) {
      rotate(radians(6));
      line(-200, 0, -190, 0);
    }
   popMatrix();

  // Minute ticks
  strokeWeight(2);
  pushMatrix();
    for(int i = 0; i < 12; i++) {
      rotate(radians(30));
      line(-200, 0, -170, 0);
    }
   popMatrix();
   
  // Numeric output
  // Put the hour in a variable so it can be reset for > 12
  int myHour = hour(); 
  String ampm = "AM"; // default to AM
  // hour() returns 1-24, so check if it's
  // greater than 12...
  if(myHour > 12) {
    // Subtract 12 to get non-military time
    myHour = myHour - 12;
    // and 13 is in the afternoon, so set ampm to PM
    ampm = "PM";
  } 
  String timeString = str(myHour) + ":" + str(minute()) + ":" + str(second()) + " " + ampm;
  textSize(18);
  // Theres a transform on everything, so set the text location
  // to far enough up and to the left to set it near the top left
  // when it gets transformed
  text(timeString, -240, -220); 

}

Challenge

How can we make it so the text based clock reads 12:37:05? In other words, how do we put a leading zero in front of the seconds and minutes when they're less than 10?

How about adding some sound? Here's a tick sound.

Resulting Display Window