## alchan-Project 06-abstract clock

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

function draw() {
var m = month();
var d = day();
// map the current hour, minute, & second
// to an r, g, or b value
var hr = map(hour(), 0, 23, 0, 255);
var min = map(minute(), 0, 59, 0, 255);
var sec = map(second(), 0, 59, 0, 255);
var clock = {r: min, g: sec, b: hr};

// assign colors to minute and second
// (hour is present in both as the blue value)
var minColor = color(clock.r, 0, clock.b);
var secColor = color(0, clock.g, clock.b);

// draw gradient; the top color represents the minute
// & the bottom represents the second
// (hour is the blue value)
for (var c = 0; c <= height; c += 5) {
var amt = map(c, 0, height, 0, 1);
var gradient = lerpColor(minColor, secColor, amt);
fill(gradient);
rect(0, c, width, 5);
}

// draw a number of equally spaced lines dependant on month
// (the month is how many sections the area is divided into)
// day of month is represented by the y position of the lines
for (var i = 0; i <= m; i++) {
var monthDiv = width / m;
var dayPos = map(d, 0, 31, 0, height-10);
fill(255);
rect(monthDiv + i*monthDiv, dayPos, 1, 10);
}
}
`````` I played around with a few different ideas in my sketches (I thought about doing something related to lunar phases, a clock that represented time by randomly scattering dots on a grid, and a more representational clock that showed time by the growth of a flower).

I really wanted to create a clock that was abstract enough to almost be without a focal point, and decided to play around with color as a representation of time. I originally just had the r, g, and b values of the background assigned to the hour, minute, and second. This was a little boring for anyone who didn’t watch the clock for a long period of time, so I decided to play around with gradients and also incorporate the day and month

In the final clock, the top color represents the current minute, while the bottom color represents the current second. The hour is the blue value present in both colors. Month is represented by the number of divisions created by the white lines, and the y-position of the lines is roughly equivalent to the day of the month.

## afukuda-Project-06-Abstract-Clock

``````/*
* Name | Ai Fukuda
* Course Section | C
* Email | afukuda@andrew.cmu.edu
* Project | 06
*/

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

function draw() {
background(73, 106, 139);
noStroke();

// ADDING DESIGN ELEMENTS (FOR AESTHETIC)
for (y=200; y<300; y+=20) {                // STAR 'TICKS' (BOTTOM LEFT OF CANVAS)
fill(255, 248, 222);
for (x=0; x<480; x+=10) {
if (y%3 == 1) {                       // calling even rows
rect(2*x+270, y, 1, 7);
}
else {                                // calling odd rows
rect(2*x+260, y, 1, 7);
}
}
}

push();                                   // SHOOTING STAR LINES
stroke(209, 226, 244);
line(300, 20, 440, 25);
stroke(206, 236, 236);
line(300, 30, 440, 45);
stroke(255, 248, 222);
line(300, 40, 380, 58);
pop();

push();                                  // SHOOTING STAR RECT
rectMode(CENTER);
fill(209, 226, 244);
rect(455, 26, 5, 5);
fill(206, 236, 236);
rect(460, 47, 12, 12);
pop();

// ABSTRACT CLOCK ELEMENTS
var s = second();
var m = minute();
var h = hour()%12;     // so hour is given in 12 (not 24)

// SECOND - 'SHOOTING STAR'
push();
frameRate(40);                                 // defining speed
var step = frameCount % 40;
applyMatrix(1, 0, 0, 1, 40+step, 50+step/3);   // defining slope of 'shooting star' motion
fill(255, 248, 222);
rect(350, 8, 30, 30);
pop();

// MINUTE
push();
A = color(255, 250, 195); // light yellow
B = color(250, 241, 262); // yellow
C = color(254, 232, 147); // yellow yellow orange
D = color(255, 228, 183); // yellow orange
E = color(253, 205, 167); // orange
F = color(253, 210, 194); // orange pink
G = color(248, 202, 215); // pink
H = color(233, 208, 229); // light pink purple
I = color(204, 178, 213); // pink purple
J = color(182, 178, 215); // purple

interA = lerpColor(A, B, .5);
interB = lerpColor(B, C, .5);
interC3 = lerpColor(C, D, .33);
interC6 = lerpColor(C, D, .66);
interD3 = lerpColor(D, E, .33);
interD6 = lerpColor(D, E, .66);
interE3 = lerpColor(E, F, .33);
interE6 = lerpColor(E, F, .66);
interF3 = lerpColor(F, G, .33);
interF6 = lerpColor(F, G, .66);
interG = lerpColor(G, H, .5);
interH3 = lerpColor(H, I, .33);
interH6 = lerpColor(H, I, .66);
interI3 = lerpColor(I, J, .33);
interI6 = lerpColor(I, J, .66);
// interH = lerpColor(H, I, .5);

for (z=0; z<m; z++) {         // adding color gradient to minute spectrum
translate(-8, 2.2);
if (z<2) {
fill(A);
}
else if (z<4) {
fill(interA);
}
else if (z<6) {
fill(B);
}
else if (z<8) {
fill(interB);
}
else if (z<10) {
fill(C);
}
else if (z<12) {
fill(interC3);
}
else if (z<14) {
fill(interC6);
}
else if (z<16) {
fill(D);
}
else if (z<18) {
fill(interD3);
}
else if (z<20) {
fill(interD6);
}
else if (z<22) {
fill(E);
}
else if (z<24) {
fill(interE3);
}
else if (z<26) {
fill(interE6);
}
else if (z<28) {
fill(F);
}
else if (z<30) {
fill(interF3);
}
else if (z<32) {
fill(interF6);
}
else if (z<34) {
fill(G);
}
else if (z<36) {
fill(interG);
}
else if (z<38) {
fill(H);
}
else if (z<40) {
fill(interH3);
}
else if (z<42) {
fill(interH6);
}
else if (z<44) {
fill(I);
}
else if (z<46) {
fill(interI3);
}
else if (z<48) {
fill(interI6);
}
else {
fill(J);
}
rect(480, 100, z/3, z);
}
pop();

// HOUR
push();
fill(186, 227, 247);
translate(-92, -92);
arc(100, 100, 300, 300, HALF_PI - radians(7.5*h), HALF_PI);   // shows pie according to hour
pop();
} // end of draw function

``````

The design of my abstract clock is an abstraction of the solar system; with a shooting star indicating the seconds, the array of planets indicating the minutes and the degree of the sun visible indicating the hour of the current time. Although the different time units are represented distinctively, through the motion/ the flow of its directionality I tried to harmonize them better. One thing I would improve upon is the color gradation seen in the minutes; I feel like there is a much more efficient way to get the same affect.  ## jiaxinw-Project 06-Abstract Clock

``````//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!

## Project 6-Abstract Clock

``````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.