Merge pull request #7 from processing/Clock

Clock

Author: calebfoss

examples/curated/22_Clock.js

@@ -1,63 +1,84 @@
-/*
+/**
  * @name Clock
- * @arialabel Functioning pink clock on a grey background
- * @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.
+ * @description The current time can be read with the
+ * <a href="https://p5js.org/reference/#/p5/second" target="_blank">second()</a>,
+ * <a href="https://p5js.org/reference/#/p5/minute" target="_blank">minute()</a>,
+ * and <a href="https://p5js.org/reference/#/p5/minute" target="_blank">hour()</a>
+ * functions. This example uses
+ * <a href="https://p5js.org/reference/#/p5/map" target="_blank">map()</a>
+ * to calculate the angle of the hands. It then uses
+ * <a href="https://p5js.org/reference/#group-Transform" target="_blank">transformations</a>
+ * to set their position.
  */
-let cx, cy;
+
+// Declare variables for shape radii
 let secondsRadius;
 let minutesRadius;
 let hoursRadius;
 let clockDiameter;
 
 function setup() {
-  createCanvas(720, 400);
+  createCanvas(710, 400);
   stroke(255);
+  angleMode(DEGREES);
 
+  // Set radius for each shape based on canvas dimensions
   let radius = min(width, height) / 2;
   secondsRadius = radius * 0.71;
   minutesRadius = radius * 0.6;
   hoursRadius = radius * 0.5;
   clockDiameter = radius * 1.7;
 
-  cx = width / 2;
-  cy = height / 2;
+  describe('Functioning pink clock on a grey background.');
 }
 
 function draw() {
   background(230);
 
+  // Move origin to center of canvas
+  translate(width / 2, height / 2);
+
   // Draw the clock background
   noStroke();
   fill(244, 122, 158);
-  ellipse(cx, cy, clockDiameter + 25, clockDiameter + 25);
+  ellipse(0, 0, clockDiameter + 25, clockDiameter + 25);
   fill(237, 34, 93);
-  ellipse(cx, cy, clockDiameter, clockDiameter);
+  ellipse(0, 0, clockDiameter, clockDiameter);
 
-  // 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;
+  // Calculate angle for each hand
+  let secondAngle = map(second(), 0, 60, 0, 360);
+  let minuteAngle = map(minute(), 0, 60, 0, 360);
+  let hourAngle = map(hour(), 0, 12, 0, 360);
 
-  // Draw the hands of the clock
   stroke(255);
+
+  // Second hand
+  push();
+  rotate(secondAngle);
   strokeWeight(1);
-  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
+  line(0, 0, 0, -secondsRadius);
+  pop();
+
+  // Minute hand
+  push();
   strokeWeight(2);
-  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
+  rotate(minuteAngle);
+  line(0, 0, 0, -minutesRadius);
+  pop();
+
+  // Hour hand
+  push();
   strokeWeight(4);
-  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
+  rotate(hourAngle);
+  line(0, 0, 0, -hoursRadius);
+  pop();
 
-  // Draw the minute ticks
+  // Tick markers around perimeter of clock
+  push();
   strokeWeight(2);
-  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);
+  for (let ticks = 0; ticks < 60; ticks += 1) {
+    point(0, -secondsRadius);
+    rotate(6);
   }
-  endShape();
+  pop();
 }