mstropka-Project-06-E

sketch

//Max Stropkay
//Section E
//mstropka@andrew.cmu.edu
//Project-06

function setup() {
    createCanvas(480,480);
    angleMode(DEGREES);
}

function draw(){
  background(225);
  //variables for hours, minutes, and seconds
  h = hour();
  m = minute();
  s = second();

  //display text under clock
  text(h%12 + ':' + m + ':' + s, 220, 400);
  //rotate entire canvas -90 degrees so 0 degrees is pointing up
  push()
  translate(width/2, height/2);
  rotate(-90);
  //draw arc
  strokeWeight(2);
  //end of arc is defined by the value of seconds
  var sAngle = map(s, 0, 60, 0, 360);
  fill(255, 51, 51, 40);
  arc(0, 0, 250, 250, 0, sAngle);

  //draw a smaller arc where the end is defined by the value of minutes
  var mAngle = map(m, 0, 60, 0, 360);
  fill(51, 153, 255, 50);
  arc(0, 0, 200, 200, 0, mAngle)

  //instead of mapping the value of hours, map the value of h%12,
  //so 12 hours fits into 360 degrees instead of 24
  //draw arc where the end point is defined by h % 12
  var hAngle = map(h % 12, 0, 12, 0, 360);
  fill(128, 128, 128, 70);
  arc(0, 0, 150, 150, 0, hAngle)

  pop();

}

For this project, I started with the code I used for assignment C, which drew arcs that formed completed circles as the values for hours, minutes, and seconds increased. In the assignment I hid the arcs and drew lines that pointed to the endpoints to create the hands of a clock. For this, I got rid of the hands and filled in the arcs with transparent colors.