/*

 * @name Clock

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

 */

​

let cx, cy;

let secondsRadius;

let minutesRadius;

let hoursRadius;

let clockDiameter;

let t = 0; // time variable

​

​

​

function setup() {

  createCanvas(720, 400);

  stroke(255);

​

  let radius = min(width, height) / 2;

  secondsRadius = radius * 0.71;

  minutesRadius = radius * 0.6;

  hoursRadius = radius * 0.5;

  clockDiameter = radius * 1.7;

​

}

​

function draw() {

  colorMode(HSB, windowWidth, 100,100);

  background(mouseX,100,50); 

​

  // make a x and y grid of ellipses

  for (let x = 0; x <= width; x = x + 30) {

    for (let y = 0; y <= height; y = y + 30) {

      // starting point of each circle depends on mouse position

      const xAngle = map(mouseX, 0, width, -4 * PI, 4 * PI, true);

      const yAngle = map(mouseY, 0, height, -13 * PI, 4 * PI, true);

      // and also varies based on the particle's location

      const angle = xAngle * (x / width) + yAngle * (y / height);

​

      // each particle moves in a circle

      const myX = x + 2 * cos(2 * PI * t + angle);

      const myY = y + 24 * sin(2 * PI * t + angle);

​

      ellipse(myX, myY, 1); // draw particle

    }

  }

​

  t = t + 1; // update time

​

​

  // Draw the clock background

  noStroke();

  fill(10, 102, 15);

  ellipse(cx , cy, clockDiameter + 5, clockDiameter + 55);

  fill(255, 215, 255);

  colorMode(HSB, windowWidth, 100,100);

  ellipse(cx, cy, clockDiameter, clockDiameter);

  colorMode(HSB, windowWidth, 100,100);

​

​

  // 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(0);

  strokeWeight(5);

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

  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);

  // Draw the minute ticks

  stroke(100);

  strokeWeight(8);

  beginShape(POINTS);

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

    let angle = radians(a);

    let x = cx + cos(angle) * secondsRadius;

    let y = cy + sin(angle) * secondsRadius;

    vertex(x, y);

  }

  endShape();

   cx = width/2;

  cy = height/2;

​

}

function mousePressed() {

    let fs = fullscreen();

    fullscreen(!fs);

  }

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​

​