This abstract clock uses the number of vertices in the polygon to determine the hour. The minute is represented by verticle dots and seconds are represented by the rotation of the polygon.
sketch
// Emily Franco
// Section C
// efranco@andrew.cmu.edu
// Project-06
//twelve hr clock
var h;
var backColor;
function setup() {
createCanvas(400, 400);
//convert hour to 12hr cycle
if (hour()>12){
h = hour()-12;
}else if (hour==0){
h = 12;
}else {
h = hour();
}
//set background to white if daytime and black for night time
if(hour()>=5 & hour()<=19){
backColor = color(215,218,219);
}else {
backColor = color("black");
}
background (backColor);
}
function draw() {
//draw minutes
minuteDots();
//draw hours and seconds
polyRotate ();
}
//-----HOUR-----
//draw polygon for hour - num of vertices = hour
function polygon(x,y,rad,points){
noFill();
strokeWeight(0.5);
var newX = 0;
var newY = 0;
//find angle increments
var angle = 360/points;
//if hour is 0 than shape is an ellipse
if(h==0){
ellipse(0,0,rad*2,rad);
}else {
//if house is more than 1, shape has same num of vertices
beginShape();
for(var i=0; i<360; i+=angle){
newX = x + rad * cos(radians(i));
newY = y + rad * sin(radians(i));
vertex (newX, newY);
}
endShape(CLOSE);
}
}
//-----SECOND-----
//draw rotating shape - each shape is a second
function polyRotate (){
push();
translate (width/2, height/2);
var angleIncrement = 6;
//map to 180 not 360 since shape has 2 sides
var secMap = map(second(),0,60,0,360);
for(var a=0; a<=secMap; a=a+angleIncrement){
//marking poly - light blue
//drawing "delay"
if(a>0){
push();
rotate(radians(a-angleIncrement));
stroke(12,222,245);
polygon(0,0,100,h);
pop();
}
//tracking poly - magenta
push();
rotate(radians(a));
strokeWeight(1);
stroke(255,13,223);
polygon(0,0,100,h);
pop();
}
pop();
//restart seconds
if(second()==59){
background(backColor);
}
}
//-----MINUTE-----
//draw dot in line for every minute
function minuteDots(){
push();
translate (width/2, 0);
//map minutes to height of minutes bar
var minuteHeights = map(minute(),0,60,20,height-20);
//draw dots
for (var d=20; d<=minuteHeights; d= d +height/60){
strokeWeight(4);
//marking poly - yellow
//drawing "delay"
if(d>20){
stroke(237,204,14);
point(0,d-height/60);
}
//tracking poly - magenta
stroke(255,13,223);
point(0,d);
}
pop();
//restart minutes
if(minute()>=60){
background(backColor);
}
}