# Abstract Clock

// project 06
// gnmarino@andrew.cmu.edu
// Gia Marino
// Section D

var theta = 0;     // references theta in draw function only
var m;   // current minute
var h;   // current hour

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

function draw() {

translate(width/2, height/2);

// rotates whole clock

rotate(radians(theta));

// draws the whole clock

NightAndDay();    // draws the night and day sides of the circle
sun(0, height/2 - 80);
moon(0, -height/2 + 80);
clouds(width/2 - 25, 0);
diamonds(-width/2 + 25, 0);

// takes current time and calculates how much to rotate the clock
// every minute the clock should turn .25 degrees
// every hour the clock should have rotated 15 more degrees

m = minute();
h = hour();
theta = (h * 15) + (m * .25);

}

function sun(sunX, sunY) {

push();

// orangey yellow color for sun

fill(253, 208, 25);

// moves sun to coordinates stated in draw function

translate(sunX, sunY);

circle(0, 0, 50);    // middle of sun

// strokeWeight and loop makes the sun rays

strokeWeight(2);

for (theta = 0; theta < 360; theta += 45) {
rotate(radians(theta));
line(30, 0, 37, 0);

}

pop();
}

function moon(moonX, moonY) {

push();

fill(220);  // light grey

// moves moon to coordinates stated in draw function

translate(moonX, moonY);

circle(0, 0, 50);

pop();
}

function diamonds(diamondX, diamondY) {

push();

noFill();
strokeWeight(5);

// counter keeps track how many times the for-loop loops
// needs to start at 12 so the diamonds don't fill in when it's before noon

var counter = 12;

// loop rotates and draws diamonds

for (theta = 7; theta < 177; theta += 15) {

push();

rotate(radians(theta));

// moves diamonds to coordinates stated in draw function

translate(diamondX, diamondY)

// scale & rotate are used to make diamonds look better along the border

scale(.25);
rotate(radians(90));

// if statement says the diamonds should be filled in based on the hour
// diamond fills in after every hour passes
// if clock hasn't passed that hour yet then diamond stays unfilled
// diamonds fill in for 1pm to 12 am

if (counter < h) {
fill(255);
} else {
noFill();
}

// draws 1 diamond every time

beginShape();
vertex(-20, 0);
quadraticVertex(-10, -5, 0, -30);
quadraticVertex(10, -5, 20, 0);
quadraticVertex(10, 5, 0, 30);
quadraticVertex(-10, 5, -20, 0);
endShape();

pop();

counter += 1; // adds 1 everytime loop ends

}

pop();
}

function clouds(cloudX, cloudY) {

push();

strokeWeight(5);
noFill();

// counter keeps track how many times the for-loop loops
// counter starts at zero so clouds starts filling after 1st hour has passed

var counter = 0;

// loop rotates and draws clouds

for (theta = 7; theta < 177; theta += 15) {

push();

rotate(radians(theta));

// moves clouds to coordinates stated in draw function

translate(cloudX, cloudY);

// scale & rotate are used to make clouds look better along the border

scale(.25);
rotate(radians(90));

// if statement says the clouds should be filled in based on the hour
// cloud fills in after every hour passes
// if clock hasn't passed that hour yet then cloud stays unfilled
// clouds fill in for 1 am to 12 pm

if (counter <= h) {
fill(255);
} else {
noFill();
}

// draws 1 cloud every time

beginShape();
vertex(0, 0);
quadraticVertex(-45, 5, -40, -10);
quadraticVertex(-35, -30, -15, -20);
quadraticVertex(-20, -40, 0, -40);
quadraticVertex(20, -40, 15, -20);
quadraticVertex(35, -30, 40, -10);
quadraticVertex(45, 5, 0, 0);
endShape();

pop();

counter += 1; // adds 1 everytime loop ends

}
pop();
}

function NightAndDay() {

push();

// yellow half circle represents day time

fill(255, 238, 127);     // yellow
arc(0, 0, width, height, radians(0), radians(180));

// navy half circle represents night time

fill(60, 67, 129);     // navy
arc(0, 0, width, height, radians(180), radians(360));

pop();

}

For this assignment I actually got inspiration from the Minecraft clock because it is the first example I could think of for a non-western standard clock.

I started off by deciding that I wanted the daylight half circle to be fully on the top and vice versa with the night side.

I ended up deciding that I wanted the clock to emulate how the sky typically looks if you are at a reasonable latitude on earth. So, when it is noon and the sun is highest in the sky then I want the clock’s yellow side to be fully on top so it looks like  what you’d see if you’d looked outside at noon. It also kinda shows when the sun rises and sets too.

Lastly, I decided that I wanted someone to be looking at my clock and know what time it is and not completely guess. So, I made little hour symbols (the clouds and diamonds) light up every time an hour passes. This makes it when you look at the clock you can count how many clouds or diamonds are white and know it’s been x amount of hours.