Shannon Ha- Project 06 – Abstract Clock

sketch

//Shannon Ha
//sha2@andrew.cmu.edu
//Section D
//Project 06

function setup() {
    createCanvas(400, 400);
    angleMode (DEGREES); //converts radians to degrees
}

function draw() {
    var H = hour();
    var M = minute();
    var S = second();

      background(H * 5,M,S); // background color changes according to time

      //small circle for hours
      for (var h = 0; h < H; h++){
        var r=150;
        var g=200;
        var b=50;

          push();
          translate (width/2, height/3 - 30);
          rotate((15*h)-0.25*360) //24 squares to count hours
          noStroke();
          fill(r-H, g-M, b-S); //color alternates as time changes
          rect(35,0,20,20);
          pop();
      }

      //bigger circle for minutes
        for(var m = 0; m < M; m++){
          var r=250;
          var g=130;
          var b=10;
            push();
            translate (width/2, height/2 + 50);
            rotate((6*m)+ 0.25 *360); //60 circles to count min
            noStroke();
            fill(r+H, g+M, b+S); //color alternates as time changes
            ellipse(72, 0, 15, 15);
            pop();
          }


      //line seconds
        for(var s = 0; s < S; s++) {
        var r=160;
        var g=105;
        var b=60; //sets b value
        push();
        translate (width/2, height/2 + 50);
        rotate((6*s)- 0.50 * 360); //60 rotating lines
        stroke(H, M, S*2); //color alternates as time changes
        strokeWeight(2);
        line(100,100,10,10);
        pop();
    }


}

For this project, I wanted to explore how to use a variety of shapes to express time so I used a combination of lines, circles and squares in a rotating motion simulate the effect of a clock.