# Yingying Yan – Project 06 – Abstract Clock

``````/*
Yingying Yan
Section E
yingyiny@andrew.cmu.edu
Project-06
*/

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

function draw() {

background(13, 18, 54)

translate(240,240)
//change hour, min and sec into variables
var hr = hour();
var min = minute();
var sec = second();

//rotate the entire canvas so people can read it as a clock

rotate(-90);
noFill();

//remap hour into 360 degree angles and draw an
//arc that keeps track of the hours
var mappedHr = map(hr % 12, 0, 12, 0, 360);
push();
stroke(5, 167, 221);
strokeWeight (20);
arc(0,0,300,300, 0, mappedHr);
pop();
//remap min into 360 degree angles and draw an
//arc that keeps track of the minutes
var mappedMin = map(min, 0, 59, 0, 360);
push();
stroke(223, 230, 244);
strokeWeight(10);
arc(0,0,200,200, 0, mappedMin);
pop();

//remap second into 360 degree angles
var mappedSec = map(sec, 0, 59, 0, 360);

//re rotate the circlces or planets
push()
rotate(-45)

//planet one which follows the hour
push()
rotate(mappedHr);
noStroke()
fill(42, 51, 127, 100);
ellipse(100, 100, 50, 50);
pop();

//planet two which follows the minutes
push()
rotate(mappedMin);
noStroke()
fill(181, 175, 215);
ellipse(70, 70, 25, 25);
pop()

//planet three which follows the seconds
push();
rotate(mappedSec);
strokeWeight(2);
fill(38, 13, 52);
ellipse(50, 50, 10, 10);
line(0,0,47.5,47.5);
pop();
pop();

}

``````

For this project, I wanted to make a simple clock without hands or number. But something similar to how one planet rotates around another in a certain amount of time. So I choose to keep track of hour, minutes and sections with a circle similar to the shapes of the planets. I began with something very complicated but I could not figure out how to do that, so I changed my mind to make something simple and abstract.