Carley Johnson Abstract Clock

sketch

/*Carley Johnson
Section E
cbjohnso@andrew.cmu.edu
Project-06
*/

function setup() {
  createCanvas(450, 450);
  background(34, 48, 86);
}

function draw() {
  strokeWeight(2);
  translate(width/2, height/2);
  background(34, 48, 86);
  
  var radius = int(min(width, height) / 2);
  var numPoints = 60;
  var angle = TWO_PI/numPoints;
  
  var secondsRadius = radius * 0.72;
  var minutesRadius = radius * 0.60;
  var hoursRadius = radius * 0.50;
  var clockDiameter = radius * 1.8;
  
  var s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  var m = map(minute() + norm(second(), 0, 60), 0, 60, 0, TWO_PI) - HALF_PI;
  var h = map(hour() + norm(minute(), 0, 60), 0, 24, 0, TWO_PI * 2) - HALF_PI;
  
  strokeWeight(2);
  stroke(255);
  beginShape(POINTS);
  var i = 0;
  while (i < numPoints ) {
      x = cos(angle*i) * secondsRadius; 
      y = sin(angle*i) * secondsRadius;
      vertex(x, y);
      i++;
  }
  endShape();  
  
  strokeWeight(2);
  noFill();
  ellipse(0, 0, (cos(m) * minutesRadius) * 2, (sin(m) * minutesRadius) * 2);
  
  stroke(255, 50, 90)
  strokeWeight(5);
  noFill(); 
  ellipse(0, 0, (cos(h) * hoursRadius) * 2, (sin(h) * hoursRadius) * 2);
  
  strokeWeight(1);
  noFill();
  ellipse(0, 0, (cos(s) * secondsRadius) * 2, (sin(s) * secondsRadius) * 2);
}

This was a tough project as the map function and looping (as well as the unused array function) are still a bit new and nebulous to me. Working through it helped, though. Math was never my strong suit, so these projects are getting a lot tougher. This idea came from a nautical theme, from the colors and the circles sort of like a compass (also with the notches on the outer rim). I would’ve liked to make the shapes more complex, but I focused my energy on mapping the time instead.