Processing: Creating a Clock

For our homework we were tasked with making a clock. This is quite a simple task, all that was needed was to access the date and time data using the functions day();, month(); etc. That data is then saved in a string variable.

E.g. String s = second();
The second data from the computer’s internal clock is saved as a string called s.

That string can then be used in a text function like so:

text(s, 10, 10, 20, 20);

The numbers correspond to the x and y co-ordinates of the text area.

Below is my clock:

void setup() {
    size(300, 300); 
 
} 
void draw() {  
    String s = second();
    String m = minute();
    String h = hour();
    String d = day();
    String mo = month();
    String y = year();
    
    background (0);
    fill (255);
    
    
    textSize(36);
    text(d, width/2-100, height/2-70, width/2, height/2-40);
    text(mo, width/2-40, height/2-70, width/2+50, height/2-40);
    text(y, width/2+30, height/2-70, width/2+100, height/2-40);
    
    textSize(24);
    text (h + ": ", width/2-30, height/2, width/2, height/2+30);
    text (m + ": ", width/2+5, height/2, width/2+35, height/2+30);
    text (s, width/2+40, height/2, width/2+60, height/2+30);
    
  
}

I found a more complicated example of this exercise which was very interesting. Here an analogue clock is created by calculating the angles of the line of the hands. After the value of the seconds, minutes and hours is accessed, it is mapped to a value on the circle.

E.g. map(second(), 0, 60, 0, TWO_PI)

Then Pythagoras’s theorem is used to calculate the ending position of the line.

int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;

void setup() {
  size(640, 360);
  stroke(255);
  
  int radius = min(width, height) / 2;
  secondsRadius = radius * 0.72;
  minutesRadius = radius * 0.60;
  hoursRadius = radius * 0.50;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
}

void draw() {
  background(0);
  
  // Draw the clock background
  fill(80);
  noStroke();
  ellipse(cx, cy, clockDiameter, clockDiameter);
  
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  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 hands of the clock
  stroke(255);
  strokeWeight(1);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  strokeWeight(2);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  strokeWeight(4);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
  
  // Draw the minute ticks
  strokeWeight(2);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=6) {
    float angle = radians(a);
    float x = cx + cos(angle) * secondsRadius;
    float y = cy + sin(angle) * secondsRadius;
    vertex(x, y);
  }
  endShape();
}

This is actually quite a complicated version of solving this problem. A much simpler way would be to divide a circle into 60 parts (12 if using the hour hand) and get the co-ordinates of the ending point of the hands from that.

Processing.org, 2014. Clock [online]. Available from: https://processing.org/examples/clock.html [Accessed on 29/10/2014]

Leave a Comment