> show canvas only <


/* built with Studio Sketchpad: 
 *   https://sketchpad.cc
 * 
 * observe the evolution of this sketch: 
 *   https://studio.sketchpad.cc/sp/pad/view/ro.ihDeu6rZ4q6/rev.1635
 * 
 * authors: 
 *   Gabriƫl Moawad

 * license (unless otherwise specified): 
 *   creative commons attribution-share alike 3.0 license.
 *   https://creativecommons.org/licenses/by-sa/3.0/ 
 */ 



int cx, cy;
float secondsRadius;
float minutesRadius;
float hoursRadius;
float clockDiameter;

void setup() {
  size(300,300);
  smooth();
  
  stroke(255);
  
  int radius = min(width, height) / 2;
  pointsRadius = radius * 0.73
  secondsRadius = radius * 0.66;
  minutesRadius = radius * 0.50;
  hoursRadius = radius * 0.33;
  clockDiameter = radius * 1.8;
  
  cx = width / 2;
  cy = height / 2;
}

void draw() {
  background(255, 0);
  
  float sBar = second() * 5;
  float mBar = minute() * 5;
  float hBar = hour() * 12.5;

  noStroke();
  
  fill(250, 20, 140)
  rect(0, 0, hBar, 100);
  
  fill(210, 30, 140)
  rect(0, 100, mBar, 100);
  
  fill(160, 30, 240)
  rect(0, 200, sBar, 100);
  
  // Klok outline en vorm
  fill(0); 
  rect(123, 225, 54, 160);  
  rect(98, 283, 104, 25);  
  
  fill(220, 120, 220); 
  stroke(0);
  ellipse(150, 150, 240, 240); 
  
  noStroke();
  rect(125, 225, 50, 150);  
  rect(100, 285, 100, 15);    
  
  float s = TWO_PI * second() / 60;
  float m = TWO_PI * minute() / 60;
  float h = TWO_PI * ( hour() < 12 ? hour() : hour() - 12) / 12;
  
  drawArc( 200, 160, 30, 240, s );
  drawArc( 150, 210, 30, 140, m );
  drawArc( 100, 250, 20, 140, h );
  
  // Angles for sin() and cos() start at 3 o'clock;
  // subtract HALF_PI to make them start at the top
  float s = map(second(), 0, 60, 0, TWO_PI) - HALF_PI;
  float m = map(minute(), 0, 60, 0, TWO_PI) - HALF_PI; 
  float h = map(hour(), 0, 24, 0, TWO_PI * 2) - HALF_PI;
  
  // Klok wijzers
  stroke(0);
  strokeWeight(2);
  line(cx, cy, cx + cos(s) * secondsRadius, cy + sin(s) * secondsRadius);
  line(cx, cy, cx + cos(m) * minutesRadius, cy + sin(m) * minutesRadius);
  line(cx, cy, cx + cos(h) * hoursRadius, cy + sin(h) * hoursRadius);
  
  //Teks tijd
  fill (0);
  text(hour() + ":" + minute(), 134, 285); 
  
  // Tijdspunten
  strokeWeight(2);
  beginShape(POINTS);
  for (int a = 0; a < 360; a+=6) {
    float angle = radians(a);
    float x = cx + cos(angle) * pointsRadius;
    float y = cy + sin(angle) * pointsRadius;
    vertex(x, y);
  }
  endShape();
 
}

void drawArc( float r, color a, color b, color c, float angle) {
  fill(250); 
  ellipse(150,150,r,r);    
  fill(a, b, c);
  arc(150,150,r,r,-PI/2,-PI/2 + angle);
  fill(255);
  ellipse(150,150,r-30,r-30);
}