Project 6-Abstract Clock

Dave AbClock

function setup() {
angleMode(DEGREES); //set angles to be degree
createCanvas(480, 480);

}

function draw() {
     //set back ground to be white
     stroke(20,30);
    var sec = second(); //return seconds
    var min = minute(); //return minutes
    var hr = hour(); //return hours
    seccount = map(sec,0,60,0,360)+90; //convert the second value to the angle usable for clock
    mincount = map(min,0,60,0,360)+90; // convert the minute value to the angle usable for clock
    hourcount = map(hr,0,12,0,360)+90; //convert the hour value to the angle usable for clock
    //adding 90 degree to begin the clock at 12 O clock direction

    movement(); //initiate movement
}
function movement(){ //same as above except radius changed and color 
    var centerx = width/2; //center of x 
    var centery = height/2; //center of y
    var radius = 150; //set radius to 150
    var x1 = -cos(seccount) *radius; //x1 coordinate for seconds
    var y1 = sin(seccount) * radius; //y1 coordinate for seconds
    var x2 = -cos(mincount) *radius; //x coordinate for minute
    var y2 = sin(mincount) * radius; //y coordinate for minute
    var x3 = -cos(hourcount) *radius; // x coordinate for hour
    var y3 = sin(hourcount) * radius; // y coordinate for minute
    var drad = dist(centerx+x2,centery-y2,centerx+x1,centery-y1); //distance of seconds to minute
    var drad2 = dist(centerx+x1,centery-y1,centerx+x3,centery-y3); //distance of seconds to hour
    fill(y3*12,y1*6,y2*3,120); //color of triangle to be based on second, minute, and hours
    triangle(centerx+x1,centery-y1,centerx+x2,centery-y2,centerx+x3,centery-y3); //create triangle on x,y coordinate of time
    fill(0,0,255,200);// color of seconds to be blue 
    ellipse(centerx+x1,centery-y1,x1,x1); //second hand circle
    fill(50,50,50,dist(centerx+x2,centery-y2,centerx+x1,centery-y1)); //minute hand size and opacity change
    ellipse(centerx+x2,centery-y2,drad/2,drad/2); // minute hand circle
    fill(0,255,0,dist(centerx+x1,centery-y1,centerx+x3,centery-y3)); //hour hand size and opacity change
    ellipse(centerx+x3,centery-y3,drad2/2,drad2/2); //hour hand circle

    //indication of actual points
    fill(0);
    ellipse(centerx+x1,centery-y1,10,10);
    ellipse(centerx+x2,centery-y2,10,10);
    ellipse(centerx+x3,centery-y3,10,10);

}

 

I first started by looking at the http://procyonic.org/clocks/. this website gave me idea that I could create some sort of orbit system just like planetary system. In stead of making them orbit, I wanted to create some sort of relationship among three points that are representing time. I connected them into triangle and overlap of the triangles created interesting form.

After creating a clock code program , I connected three points with triangle p5 function. That was not enough to give abstraction to generated form. I decided to move further and place ellipse on each of the points to make is legible, but at the same time establishing another layer of relationship. I made size the ellipse to be different based on distance of points from the seconds hand location and color to change based on the clock time.

As a result, I have a generative clock that is interesting to stare and keep record to see what kind of forms generate as time passes.