ziningy1 – section c – project 06 – abstract clock

I start this project by considering what aspects can be manipulated with the passage of second, minute and hour. So I come up with the idea of growing size, color and transparency. Based on simple arc shapes, the second, minute and hour arc will change all those aspects in different rate. The second hand, for example, will change most dramatically so it creates this exploding effect every minute.

preliminary sketch:

sketch

//Zining Ye 
//15104 lecture 1 recitation C
//ziningy1@andrew.cmu.edu 
//Project-06



function setup() {
    createCanvas(480, 480) 
    
}

function draw() {

    var s = second();  
    var h = hour(); 
    var m = minute(); 
    var centerx= width/2;
    var centery= height/2;
    var adjust = 90;
    var gunit = 10; //growing rate  



    angleMode(DEGREES);
    background(220);


   
    // second hand(arc)
    // convert the 60 seconds to 360 degree 
    var slength = map(s,0,59,0,359); 

    //the color changes with the second changes 
    fill(5*s,s*2,s*2,2*gunit*(s/4));
    noStroke();
    //draw the second arc, the size will grow with time  
    arc(centerx,centery,gunit*s,gunit*s,0-adjust,slength-adjust);

    //convert the 60 minutes to 360 degree 
    var mlength = map(m,0,59,0,359); 
    //color changes as the second hand
    fill(4*m,m,m,gunit*(m/4));
    noStroke();
    //size also grow with time with a smaller rate 
    arc(centerx,centery,5*m,5*m,0-adjust,mlength-adjust);

    //convert the 24 hours to 360 degrees 
    var hlength = map(h,0,23,0,359); 
    fill(4*h,h/2,h/2,gunit*h/3);
    noStroke();
    //size grow in a even smaller rate than minute hand
    arc(centerx,centery,4*h,4*h,0-adjust,hlength-adjust)



}