let secondsRadius;

let minutesRadius;

let hoursRadius;

let clockDiameter;

let brightness;

let saturation;

let colorS = 0;

let colorF = 0;

​

let t = 0;

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB);

  stroke(255);

​

}

​

function draw() {

  let brightness = int(map(mouseY,20,height,0,100));

  let saturation = int(map(mouseX,20,width,0,100));

  background(frameCount%360, saturation, brightness);

​

  let radius = min(windowWidth, windowHeight) / 2;

  secondsRadius = radius * 0.8;

  minutesRadius = radius * 0.3;

  hoursRadius = radius * 0.2;

  clockDiameter = radius * 1.5;

​

  cx = width / 2;

  cy = height / 2;

  // Draw the clock background

  noStroke();

  fill(mouseX, 204, 100);

  //fill(244, 122, 158);

  ellipse(width/2, height/2, clockDiameter + 25, clockDiameter + 25);

  fill(mouseX, 180, 60);

  //fill(237, 34, 93);

  ellipse(width/2, height/2, clockDiameter - 50, clockDiameter - 50);

​

  // Angles for sin() and cos() start at 3 o'clock;

  // subtract HALF_PI to make them start at the top

  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 the hands of the clock

  stroke(255);

  strokeWeight(1);

  line(width/2, height/2, width/2 + cos(s) * secondsRadius, height/2 + sin(s) * secondsRadius);

  strokeWeight(2);

  line(width/2, height/2, width/2 + cos(m) * minutesRadius, height/2 + sin(m) * minutesRadius);

  strokeWeight(4);

  line(width/2, height/2, width/2 + cos(h) * hoursRadius, height/2 + sin(h) * hoursRadius);

​

  // Draw the minute ticks

  strokeWeight(10);

  beginShape(POINTS);

  for (let a = 0; a < 360; a += 6) {

    let angle = radians(a);

    let x = width/2 + cos(angle) * secondsRadius;

    let y = height/2 + sin(angle) * secondsRadius;

    vertex(x, y);

  }

  for (let a = 0; a < 360; a += 8) {

    let angle = radians(a);

    let x = width/2 + cos(angle) * secondsRadius/2;

    let y = height/2 + sin(angle) * secondsRadius/2;

    vertex(x, y);

  }

  for (let a = 0; a < 360; a += 6) {

    let angle = radians(a);

    let x = width/2 + cos(angle) * secondsRadius*0.8;

    let y = height/2 + sin(angle) * secondsRadius*0.8;

    vertex(x, y);

  }

​

  endShape();

  t = t + 0.01; // update time

​

if (second()%3 == 0) {

     stroke (frameCount%360,150,100);

  strokeWeight(10);

  //fill(360 - frameCount%360,100,100);

  //rect(cx, cy, rectWH, rectWH);

  noFill();

    //ellipse (cx,cy, 500)

  ellipse(width/2, height/2, clockDiameter + 80, clockDiameter + 80)

​

  colorS = random (360);

  colorF = random (360);

  }

  else {

    colorS = 60;

    colorF = 100;

  }

  if (second()%2 == 0) {

     stroke (frameCount%360,150,100);

  strokeWeight(15);

  //fill(360 - frameCount%360,100,100);

  //rect(cx, cy, rectWH, rectWH);

  noFill();

    //ellipse (cx,cy, 500)

  ellipse(width/2, height/2, clockDiameter - 150, clockDiameter - 150)

​

  colorS = random (360);

  colorF = random (360);

  }

  else {

    colorS = 70;

    colorF = 120;

  }

}

​

function mousePressed() {

  let fs = fullscreen();

  fullscreen(!fs);

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}