Clock.

Clock.

The current time can be read with the second(), minute(), and hour() functions. In this example, sin() and cos() values are used to set the position of the hands.


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();
}

Functions Used

min()

Determines the smallest value in a sequence of numbers, and then returns that value

Learn More
ellipse()

Draws an ellipse (oval) to the screen

Learn More
radians()

Converts a degree measurement to its corresponding value in radians

Learn More
fill()

Sets the color used to fill shapes

Learn More
size()

Defines the dimension of the display window width and height in units of pixels

Learn More
cos()

Calculates the cosine of an angle

Learn More
minute()

Processing communicates with the clock on your computer

Learn More
line()

Draws a line (a direct path between two points) to the screen

Learn More
stroke()

Sets the color used to draw lines and borders around shapes

Learn More
vertex()

All shapes are constructed by connecting a series of vertices

Learn More
sin()

Calculates the sine of an angle

Learn More
beginShape()

Using the beginShape() and endShape() functions allow creating more complex forms

Learn More
setup()

The setup() function is run once, when the program starts

Learn More
strokeWeight()

Sets the width of the stroke used for lines, points, and the border around shapes

Learn More
draw()

Called directly after setup(), the draw() function continuously executes the lines of code contained inside its block until the program is stopped or noLoop() is called

Learn More
hour()

Processing communicates with the clock on your computer

Learn More
endShape()

The endShape() function is the companion to beginShape() and may only be called after beginShape()

Learn More
background()

The background() function sets the color used for the background of the Processing window

Learn More
map()

Re-maps a number from one range to another

Learn More
norm()

Normalizes a number from another range into a value between 0 and 1

Learn More
noStroke()

Disables drawing the stroke (outline)

Learn More
second()

Processing communicates with the clock on your computer

Learn More