# yuvian-clock

new clock

For my first clock, I chose to represent time in a way similar to that of a normal clock. With a familiar elliptical shape, I used three rings to represent the hour, minute, and second. According to the time, I placed dots along the three rings which are evenly divided between the 360 degrees of a circle. Because it may get hard to read at times, I also added a feature that would allow the user to see the actual time when they move their mouse over the center of the clock. Afterwards, I added some styling to the clock - namely, the grey ring and circle to help differentiate between hours, minutes, and seconds.

```//60212 CLOCK SKETCH

var h, m, s;

function setup() {
createCanvas(500,500);
}

function draw() {
background(0);

h = hour();
m = minute();
s = second();

ellipseMode(CENTER);

//white circle bg for hours
stroke(90);
noFill();
strokeWeight(15)
ellipse(width/2,height/2, 380)

//grey circle bg for seconds
fill(30);
noStroke();
ellipse(width/2,height/2, 200,200)

if (mouseX > 200 && mouseX < 300 && mouseY > 200 && mouseY < 300) {
displayTime();
}

push();
translate(width/2, height/2);
angleMode(DEGREES)
rotate(-90)
dotSize = 3;
noStroke();
///////////////////////////////////
// var hColor = map(h,0,23,50,255);
var hColor = color(0)
// var hColor = color(226, 9, 63)
var hDotSize = 5;
fill(hColor);
for (var i = 0; i <= 360; i+= 360/h) {
if (h == 0) {
h = 12
} else {
}

}
///////////////////////////////////
var mColor = map(m,0,59,50,255);
// var mColor = color(53, 87, 255)
fill(mColor);
for (var i = 0; i <= 360; i+= 360/m) {
if (m > 0) {
}
}
///////////////////////////////////
var sColor = map(s,0,59,50,255);
// var sColor = color(255, 86, 128)
fill(sColor)
for (var i = 0; i <= 360; i+= 360/s) {
if (s > 0) {
}
}
///////////////////////////////////
pop();
}

function displayTime() {
noStroke();
fill(255);
textAlign(CENTER);
textSize(15);
// xTime = 60
// yTime = 40
xTime = width/2;
yTime = height/2;

if (h==0) {
h = 12
}

//display zero in front of single digit second
if (s < 10 && m >= 10) {
text(h + " : " + m + " : 0" + s, xTime, yTime);
}
//display zero in front of single digit minute
else if (s >= 10 && m < 10) {
text(h + " : 0" + m + " : " + s, xTime, yTime);
}
//display zeroes in front of single digit seconds and minutes
else if (s < 10 && m < 10) {
text(h + " : 0" +m + " : 0" + s, xTime, yTime);
}
//keep seconds and minutes as is when two digits
else {
text(h + " : " + m + " : " + s, xTime, yTime);
}
}
```

face clock

Now this clock is much more interesting to look at. For this project, I altered another clock I had previously made. In this sketch, I incorporated color, animation (somewhat), and gave this "clock" a lot more personality.

```var hr, mn, sc;
var end_hr, end_mn, end_sc;

function setup() {
createCanvas(400,400);
}

function draw() {
background(255);

hr = hour();
mn = minute();
sc = second();
end_hr = map(hr % 12,0,12,0,360);
end_mn = map(mn, 0, 60, 0, 360);
end_sc = map(sc, 0, 60, 0, 360);

/////////// time /////////////////////////

//Display time
if (sc < 10) {
noStroke();
fill(135, 158, 163);
textAlign(CENTER);
textSize(20);
strokeWeight(5);
text(hr + " : " + mn + " : 0" + sc, 80, 30);
} else {
noStroke();
fill(135, 158, 163);
textAlign(CENTER);
textSize(20);
strokeWeight(5);
text(hr + " : " + mn + " : " + sc, 80, 30);
}

push();
strokeWeight(8);
noFill();
angleMode(DEGREES);
translate(width/2,height/2);
rotate(-90);
//seconds - innermost
stroke(164, 206, 216);
arc(0, 0, 250, 250, 0, end_sc);

//minutes - middle
stroke(35, 126, 196);
arc(0, 0, 320, 320, 0, end_mn);

//hours - outside
stroke(31, 56, 119);
arc(0,0,345,345,0,end_hr);
pop();

///////////// static face ///////////////
push();
angleMode(DEGREES);
translate(width/2,height/2);
rotate(-90);

//Top of face
stroke(0);
strokeWeight(7);
noFill();
arc(0,0,280,280,280,80);

//Bottom of face
noFill();
arc(0,0,300,300,150,210);
pop();

//black eyebrows
stroke(0);
fill(0);
rectMode(CENTER);
rect(130, 150, 25, 5, 15);
rect(270, 150, 25, 5, 15);

//eyes
ellipseMode(CENTER);
ellipse(120, 200, 20, 20);
ellipse(280, 200, 20, 20);

//nose
noStroke();
strokeWeight(6);
fill(204, 95, 95);
rect(width/2, 230, 15, 30, 20);

//lips
stroke(0);
noFill();
rect(width/2, 280, 60, 20, 20);

//teeth
line(width/2, 270, width/2, 290);
line(width/2 - 15, 270, width/2 - 15, 290);
line(width/2 + 15, 270, width/2 + 15, 290);

///////// face animations ///////////////

if (sc % 2 == 0) {
//eyebrows raise
//cover old eyebrows w white
stroke(255);
strokeWeight(8);
rectMode(CENTER);
rect(130, 150, 25, 5, 15);
rect(270, 150, 25, 5, 15);
//new raised eyebrows
strokeWeight(5);
stroke(0);
rect(130, 140, 25, 5, 15);
rect(270, 140, 25, 5, 15);

//mouth becomes smaller
//cover old mouth
//lips
strokeWeight(10);
stroke(255);
noFill();
rect(width/2, 280, 60, 20, 20);
//teeth
line(width/2, 270, width/2, 290);
line(width/2 - 15, 270, width/2 - 15, 290);
line(width/2 + 15, 270, width/2 + 15, 290);
//new small mouth
strokeWeight(6);
stroke(0);
ellipse(width/2, 280, 20,20);
}
}
```