Xindi Lyu-Project 06- Abstract Clock-Section A

sketch

/*
Xindi Lyu
Section A
xindil@andrew.cmu.edu
Project-06-Abstract Clock
*/
var angleS=0;

function setup() {
 createCanvas(550,500);
 background(230);



}
   
    
function draw() {
        var S=second();
        var M=minute()
        var H=hour();
        noStroke();
      fill(70,100,70)
     ellipse(270,250,500,500);
        strokeWeight(2);
                 for(c=0;c<360;c=c+15){
            push();
        stroke(0);
        translate(270,250);//creating 24 strokes representing each hour of a day
        rotate(radians(c));
         line(0,0,250,0);//creating the base image for the hour section
        pop();
    }
    push();
            translate(270,250);
            rotate(radians(15*H));
            stroke(255);//highlighting the hour represented
            line(0,0,250,0)
            
            pop();
            push();
            translate(270,250);
            rotate(radians(15*H-15));
            stroke(0);
            line(0,0,250,0)//reseting the hours passed
            
            pop();
             
                noStroke();
    fill(70,100,70);
    ellipse(220,250,300,300)


        for(b=0;b<360;b=b+6){
            push();
        stroke(0);//creating 60 strokes representing each minute within an hour
        translate(220,250);
        rotate(radians(b));
         line(0,0,150,0);//creating the base image for the minute section
        
        pop();
    }
    
    push();
            translate(220,250);
            rotate(radians(6*M));
            stroke(255);
            line(0,0,150,0)
            
            pop();
             
             push();
            translate(220,250);
            rotate(radians(6*M-6));
            stroke(0);
            line(0,0,150,0)
            
            pop();

    noStroke();
    fill(70,100,70);
    ellipse(250,250,200,200)

 

        for(a=0;a<360;a=a+6){
            push();
        stroke(0);
        translate(250,250);
        rotate(radians(a));//creating 60 strokes representing each second within a minute
         line(0,0,100,0);
        pop();

        }
             push();
            translate(250,250);
            rotate(radians(6*S));
            stroke(255);
            line(0,0,100,0)
            
            pop();
              
        push();
        stroke(0);
        translate(250,250);
        rotate(radians(6*S-6));
         line(0,0,100,0);
        pop();
    noStroke();
    fill(70,100,70);
    ellipse(230,250,130,130)
}

I experimented with the offsetting circles and how lines cooperated with this geometry. I used simple colors and ways to indicated the time changes to maintain the visual clarity.