Project 06 – Abstract Clock

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);
    }
}

Leave a Reply