Project 6: Abstract Clock

luca’s clock

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

function draw() {

    //set variables as time
    var sc = second();//second of clock
    var mt = minute();//minute of clock
    var hr = hour();//hour of clock
    var yh = hr*20;//y position of hour ellipse

    //color change

    background(0,0,0)

     if (yh >= 400 & yh < 420){//20:00 - 21:00
        background(99,30,80);
    } else if (yh >= 420 & yh < 480){//21:00-00:00
        background(57,25,84);
    } else if (yh >= 0 & yh < 80){//00:00-04:00
        background(1,8,79);
    } else if (yh >= 80 & yh < 120){//04:00-06:00
        background(0,173,255);
    } else if (yh >= 120 & yh < 160){//06:00-08:00
        background(252,255,181);
    } else if (yh >= 160 & yh < 240){//08:00-12:00
        background(255,255,112);
    } else if (yh >= 240 & yh < 300){//12:00-15:00
        background(255,221,64);
    } else if (yh >= 300 & yh < 360){//15:00-18:00
        background(255,121,84);
    } else if (yh >= 360 & yh < 400){//18:00-20:00
        background(167,60,90);
    }
   

    fill(233, 236, 239);
    //text(hr + ':' + mt + ':' + sc, 30, 300);//clock for reference

    push();
    stroke(233, 236, 239);
    strokeWeight(5);
    line(50,0,50,sc*8);
    line(200,0,200,mt*8);
    line(400,0,400,yh);
    pop();

    //clock hands
    ellipse(50,sc*8,60,60);//second
    ellipse(200,mt*8,90,90);//minute
    ellipse(400,yh,135,135);//hour


}

I enjoyed looking at the different approaches to keep time. I showed the passing of time through the movement of the circles and the changes in the background color. The left, middle, and right circles depict seconds, minutes, and hours, respectively. As the hour circle moves up and down, the background color also changes, reflecting the day’s time.