# Project 6: Abstract 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.