Category: Project-06-Abstract-Clock

sketch

//original x,y position for second leaves
var sy = -180;
var sx = 0;
//original x,y position for minute leaves
var my = -150;
var mx = 0
//original x,y position for hour petals
var hy = -70;
var hx = 0

//mark the initial frame as 0
var frameInSec = 0;
var frameInMin = 0;
var frameInHr = 0;

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

function draw() { 
    angleMode(DEGREES);
    background("lightblue");
    noStroke();

    //translate the center to the center of the canvas
    translate(width/2, height/2);

    //base leaves-seconds
    push();
    var numS = 60-second();//the number of second leaves on the canvas

    if (frameInSec != second()) {
        frameInSec = second(); // to see if the frame enter a new second
        sy = -180;//if it is a new second then reset the last leaf x,y to original position
        sx = 0;
    }

    
    //draw a leave rotate every 6 degrees 
    for (var i = 0; i <= numS; i++) {
        fill(100, 176, 96);
        rotate(-6);
        //if i smaller than the number then draw static leaves
        if(i < numS){
            ellipse(0,-180,20,40);
        } else {
        //if i is the number then the leave flies away
            ellipse(sx,sy,20,40);
            sy -= 3;  
            sx -= random(-10,3)
        }
    };
    pop();

    //middle layer leaves-minutes
    push();
    var numM = 60-minute();//the number of minute leaves on the canvas

    if (frameInMin != minute()) {
        frameInMin = minute(); // to see if the frame enter a new minute
        my = -150;//if it is a new minute then reset the last leaf x,y to original position
        mx = 0;
    }

    //draw a leave rotate every 6 degrees 
    for (var j = 0; j <= numM; j++) {
        fill(76, 132, 73);
        stroke(89,154,85)
        rotate(-6);
        //if i smaller than the number then draw static leaves
        if(j < numM){
            ellipse(0,-150,25,60);
        } else {
        //if i is the number then the leave flies away
            ellipse(mx,my,25,60);
            my -= 3;  
            mx -= random(-10,3)
        }
    };
    pop();

    //flower-hour
    push();
    var numH = 24-hour();//the number of hour petals on the canvas

    if (frameInHr != hour()) {
        frameInHr = hour(); // to see if the frame enter a new hour
        hy = -70;//if it is a new hour then reset the petal x,y to original position
        hx = 0;
    }

    //draw a leave rotate every 6 degrees 
    for (var g = 0; g <= numH; g++) {
        fill(219, 181, 122);
        stroke(215,167,92)
        strokeWeight(3);
        rotate(-15);
        //if i smaller than the number then draw static leaves
        if(g < numH){
            ellipse(0,-70,45,150);
        } else {
        //if i is the number then the petal flies away
            ellipse(hx,hy,45,150);
            hy -= 5;  
            hx -= random(-5,15)
        }
    };
    pop();

    //the heart of flower
    fill(113,83,37);
    ellipse(0,0,50,50)

}

I had a thought about creating a flower and letting people watch it disappearing to learn how time passes away. Therefore, I started a sketch like below:

The outer ring leaves represent seconds, and as one second is gone, the leave is also gone. The same as the middle ring of “minute” leaves and the flower which represents the hour. After I successfully made the leaves and petals disappear according to the time, I started to think, maybe adding the animation of how the leaves and petals “fly” away can be interesting. To achieve this, I came up with an idea of drawing a new leaf or petal at the last position and adding a random number to its changing position.

I am very happy that I finally made my flower clock come true!

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.