Elena Deng-Project 6 Abstract Clock

sketch

/*Elena Deng
Section E
  edeng1@andrew.cmu.edu
  Project-06
}
*/

function setup() {
    createCanvas(400, 400);
    // var c=canvas
    // c.rotate(90)
    angleMode (DEGREES);
}

function draw() {

    var H = hour(); //calculates hours
    var M = minute(); //calculates minutes
    var S = second(); //calculates seconds
    var colRatio=2;  //reduces the color gradient each for loop
    noStroke(); //no stroke within the circles

    //does the background
      push();
      translate(200,200); //translates into the middle of the canvas
      background(5,15,53); //sets the background color
      pop();

      //hour hand
      for (var h=0; h<H; h++){
        var r=220; //sets r value
        var g=105; //sets g value
        var b=55; //sets b value
        var colRatio=4; //color value reduces more quickly
          push();
          translate (width/2, height/2);
          rotate((15*h)-.25*360) //24 hour clock
          fill(r+(colRatio*h),g+(colRatio*h),b+(colRatio*h));
          ellipse(35,0,20,20);
          pop();
      }

      //minutes hand
        for(var m =0; m<M; m++){
          var r=250; //sets r value
          var g=175; //sets g value
          var b=65; //sets b value
            push();
            translate (width/2, height/2);
            rotate((6*m)-.25*360); //sets minutes and rotates
            fill(r-(colRatio*m),g-(colRatio*m),b-(colRatio*m));
            ellipse(72,0,15,15);
            pop();
          }


      //seconds hand
        for(var s = 0; s < S; s++) {
        var r=120; //sets r value
        var g=105; //sets g value
        var b=15; //sets b value
        push();
        translate (width/2, height/2); //moves to the middle of canvas
        rotate((6*s)-.25*360); //sets seconds and rotates
        fill(r+(colRatio*s),g+(colRatio*s),b+(colRatio*s)); //sets fill
        ellipse(100,0,10,10);
        pop();
    }


}

This project was pretty fun to do! My favorite part of the result was the color palette as well as the overall effect of the circles. I decided to make it a 24 hour clock so that it can tell the difference between AM and PM.