HTTP/2 200 date: Sat, 11 Oct 2025 10:31:17 GMT content-type: text/html server: cloudflare last-modified: Thu, 28 Oct 2010 14:02:44 GMT cf-cache-status: DYNAMIC vary: Accept-Encoding nel: {"report_to":"cf-nel","success_fraction":0.0,"max_age":604800} report-to: {"group":"cf-nel","max_age":604800,"endpoints":[{"url":"https://a.nel.cloudflare.com/report/v4?s=CCCViIEURNDL97wgYKZg1GHkPaLHitHw7VrWvtiam4S9X7OBofTUoB5Vjj8Bym8Ht4wVJlry5IwQs3fxWoCPKdQ%2FqFyVFKIbCyQH4Cw%3D"}]} content-encoding: gzip cf-ray: 98cdafde8fa8ff9d-BOM alt-svc: h3=":443"; ma=86400

Processing.js

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. *

Original Processing.org Example: Clock

// All Examples Written by Casey Reas and Ben Fry
// unless otherwise stated.
void setup() {
  size(200, 200);
  stroke(255);
  smooth();
}
void draw() {
  background(0);
  fill(80);
  noStroke();
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  ellipse(100, 100, 160, 160);
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI;
  float h = map(hour() % 12, 0, 12, 0, TWO_PI) - HALF_PI;
  stroke(255);
  strokeWeight(1);
  line(100, 100, cos(s) * 72 + 100, sin(s) * 72 + 100);
  strokeWeight(2);
  line(100, 100, cos(m) * 60 + 100, sin(m) * 60 + 100);
  strokeWeight(4);
  line(100, 100, cos(h) * 50 + 100, sin(h) * 50 + 100);
}