# sunmink-project06-Abstract Clock

``````//SunMin Kim
//Section E
//sunmink@andrew.cmu.edu
//Project 06

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

function draw() {
//show the current time
var h = hour();
var m = minute();
var s = second();

//color of the ocean changes depending on hours
var mapH = map(h, 0, 25, 0, 255);
background(mapH, 220, 250);

noStroke();
//tail
fill(230, 150, 70);
rect(365, 270, 80, 100, 40, 20, 20, 40);
//body
fill(230, 150, 70);
rect(50, 230, 320, 180, 20, 20, 20, 20);
//eyes
fill(255);
ellipse(120, 300, 50, 50);
//pupill
fill(0);
ellipse(122, 292, 30, 30);
//bubble1
fill(255);
ellipse(110, 50, 20, 20);
//bubble2
fill(255);
ellipse(105, 160, 20, 20);
//bubble3
fill(255);
ellipse(130, 110, 20, 20);

//changes form 24 hour to 12 hour clock
if (h == 0){
h = 12;
} else if (h > 12 & h < 24){
h -=12;
} else{
h = hour();
}

//draw hair every second
for (var c = 0; c <= s; c++){
strokeWeight (2.5);
stroke(255);
line(80 + 6 * c, 190, 63 + 5 * c, 230);
}

//size of mouth gets larger depending on the minutes
var mapM = map(m, 0, 100, 0, width);
noStroke();
fill(230, 80, 100);
rect(50, 350, mapM, 50, 5, 5, 5, 10);

fill(0);
textSize(8);
text( h + " hour(s) " + m + " minute(s) " + s + " second(s) ", 20,20);
}

``````

After finishing assignments using index variables, I was excited to create an abstract clock that transforms according to hours, minutes, and seconds. Thus for the abstract clock, I wanted to take benefit of making a clock that is interesting to watch more than few seconds.  Throughout this project, I struggled the most when coming up with triangle coordinates. I feel good with the outcome that I successfully used triangles for this wallpaper which was the most challenging part during the project.

Throughout this project, I struggled the most to come up with types of design that allows me to indirectly display the time flow. However, I felt great to successfully use different parts in the fish to represent the time flow.