let sSize, mSize, hSize;

​

function setup() {

  createCanvas(400, 400);

  cx = width / 2;

  cy = height / 2;

  sSize = 150;

  mSize = 130;

  hSize = 100;

}

​

function draw() {

  background(0);

​

  // Draw clock hands

  let s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;

  let m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;

  let h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;

​

  // Draw second hand

  push();

    translate(cx, cy);

    rotate(s);

    fill(255, 100, 150);

    rect(-2, -sSize/2, 4, sSize, 5);

  pop();

  // Draw minute hand

  push();

    translate(cx, cy);

    rotate(m);

    fill(150, 100, 255);

    rect(-4, -mSize/2, 8, mSize, 8);

  pop();

  // Draw hour hand

  push();

    translate(cx, cy);

    rotate(h);

    fill(150, 255, 100);

    rect(-6, -hSize/2, 12, hSize, 10);

  pop();

​

  // Draw clock face

  noFill();

  strokeWeight(2);

  stroke(255, 100, 150, 100);

  circle(cx, cy, sSize + 50);

  stroke(150, 100, 255, 150);

  circle(cx, cy, mSize + 30);

  stroke(150, 255, 100, 200);

  circle(cx, cy, hSize + 10);

  stroke(255, 255, 255, 100);

  circle(cx, cy, 200);

​

  // Draw background shapes

  noStroke();

  fill(255, 100, 150, 50);

  rect(50, 50, 100, 100);

  fill(150, 100, 255, 75);

  rect(150, 150, 80, 80);

  fill(150, 255, 100, 100);

  rect(250, 250, 60, 60);

​

  // Draw center dot

  fill(255);

  stroke(255);

  ellipse(cx, cy, 10);

}

​