Category: Section B

sketch

/*Rachel Park
rsp1@andrew.cmu.edu
Section B @ 10:30AM
Project 06: Abstract Clock*/

var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(620, 620);
    noStroke();
    millisRolloverTime = 0;
}

function draw() {
    background(17,76,98);

    // Fetch the current time
    var H = hour();
    var X = (H%12);//so that the clock becomes a 12hr clock instead of 24 hr
    var M = minute();
    var S = second();


    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);

    //showing text of time
    fill(255);
    text(nf(X,2,0) + ':' + nf(M,2,0) + ':' + nf(S,2,0),width/2-30,15);


    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);

    // Making the seconds into a smoother transition
    var secondsWithFraction   = S + (mils / 1000.0);
    var secondsWithNoFraction = S;
    var secondBarWidthChunky  = map(secondsWithNoFraction, 0, 60, 0, width);
    var secondBarWidthSmooth  = map(secondsWithFraction,   0, 60, 0, width);


  //floorbed
  fill(250,247,196);
  rect(0,height-115,width,200);

  //drawing the snail (hour)
  noStroke();
  fill(207,230,239);
  rect(0, 500, hourBarWidth, 10);
  fill(234,207,239);
  ellipse(hourBarWidth,484,45,45);
  fill(155,124,161);
  ellipse(hourBarWidth,505,70,10);
  fill(155,124,161);
  ellipse(hourBarWidth+20,483,5,45);
  fill(155,124,161);
  ellipse(hourBarWidth+30,483,5,45);
  fill(255);
  ellipse(hourBarWidth+20,465,15,15);
  fill(255);
  ellipse(hourBarWidth+30,465,15,15);
  fill(25);
  ellipse(hourBarWidth+20,465,8,8);
  fill(25);
  ellipse(hourBarWidth+30,465,8,8);

  //drawing fish hook (seconds)
  push();
  noFill();
  strokeWeight(10);
  stroke(160);
  arc(100,secondBarWidthSmooth,70,70,0,PI);
  strokeWeight(5);
  arc(135,secondBarWidthSmooth-110,10,10,0,TWO_PI);
  strokeWeight(6);
  rect(133,secondBarWidthSmooth-100,5,100,10);
  stroke(50);
  rect(133,0,2,secondBarWidthSmooth-110,5);

  pop();

  //drawing the fish (minute)
  fill(94,229,239);
  ellipse(minuteBarWidth,275,100,80);
  fill(255);
  ellipse(minuteBarWidth+25,250,40,40);
  fill(0);
  ellipse(minuteBarWidth+35,250,20,20);
  fill(94,191,239);
  triangle(minuteBarWidth-80,255,minuteBarWidth-80,295,minuteBarWidth-40,270);
  //and exclamation point
  fill(255);
  rect(minuteBarWidth-5,130,10,60,10);
  ellipse(minuteBarWidth,210,10,10);

}

For my project, I wanted to make a clock but visually represented in a unique way. Here, I decided to make an instance/ scene of a fish underwater. The snail on the floorbed represents the hours (bc snails are slow anyway), the fish represents the minutes, and the fish hook represents the seconds. The scene here is that the fish is swimming away from the oncoming hook while the snail is just crawling away in a leisurely pace. As seen in the sketch, I initially wanted to use bubbles to represent the seconds, but went ahead and changed my idea to the fish hook instead.

(not sure if it’s just me, but for some reason I have to refresh the page a couple times to see the code work.)

sketch

/*
Jamie Ho
jamieh@andrew.cmu.edu
10:30
Project 6
*/

var d1 = 24;	//hour
var d2 = 60;	//minutes/seconds
var slope1;		//slope of the diagonal line from hour triangle
var slope2;		//slope of the diagonal line from minute triangle

function setup() {
   createCanvas(200, 400);
}

function draw() {
	//this if statement inverts the black-white colours depending on AM or PM
	if(hour()>11){		//PM
		background(0);
	} else {			//AM
	background(255);
	}
//HOUR	
	slope1 = (height/2-height/8)/d1;
	for(var i = 0; i < d1; i++){
		//12am, 3am, 6am, 9am, 12pm, 3pm, 6pm, 9pm
		//longer and thicker line 
		if(i%3 == 0){
			if(hour()>11){
				stroke(200);
			} else {
			stroke(0);
		}
			strokeWeight(1);
			line(0, height/8+i*slope1,
			 	 width/2+d1-i, height/8+i*slope1);
		} else {
		//thin lines for all other times
			stroke(100);
			strokeWeight(0.5);
			line(0, height/8+i*slope1,
			 	 width/2-d1+i, height/8+i*slope1);
		}
		//blue triangle fill for HOUR
		noStroke();
		fill(26, 136, 255, 200);
		if(i == hour()){
			triangle(width/2+d1-i, height/8+i*slope1,
				 width/2-d1+i, height/8+i*slope1,
				 width/2, height/2);
		}
	}
//MINUTE
	slope2 = (height*(7/8)-height/2)/d2;
	for(var j = 0; j <= d2; j++){
		//10 min, 20 min, 30 min, 40 min, 50 min, 60 min
		if(j%10 == 0){			
			if(hour()>11){		//PM
				stroke(200);
			} else {			//AM
				stroke(0);
			}
			strokeWeight(1);
			line(width/2-j, height/2+j*slope2,
			 	 width, height/2+j*slope2);
		} 
		//blue quad fill for MINUTE
		noStroke();
		fill(0, 99, 204, 200);
		if(j == minute()){
			quad(width/2-d2, height*(7/8),
				 width/2+d2, height*(7/8),
				 width/2+d2-j, height*(7/8)-j*slope2,
				 width/2-d2+j, height*(7/8)-j*slope2);
		}
//SECOND
		stroke(179, 204, 255);
		strokeWeight(2);
		if(j == second()){
		line(width/2, height/2, width/2, height/2+j*slope2)
		}
	}
//TWO TRIANGLES
	if(hour()>11){		//PM
		stroke(255);
	} else {			//AM
		stroke(0);
	}
	strokeWeight(2);
	noFill();
	//hour triangle
	triangle(width/2-d1,height/8,
			 width/2+d1, height/8,
			 width/2, height/2);
	//minutes triangle
	triangle(width/2, height/2,
			 width/2-d2, height*(7/8),
			 width/2+d2, height*(7/8));
}

For this project, I wanted to do something similar to the hourglass, but make it more geometric with just triangles and lines. The lines and background colours invert when AM switches to PM and vice versa.

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.