Category: Project-06-Abstract-Clock

sketch

function setup() {
  createCanvas(500, 500);
  //sets up initial variables
  diameter = width/1.2;
  noStroke();
}

function draw() {
  background(155);
  //draws clock face
  fill(0);
  ellipse(width/2, height/1.85, diameter, diameter);
  //gets s,m,h within the circle
  s = second()*(TWO_PI/60);
  m = minute()*(TWO_PI/60); 
  h = hour()*(TWO_PI/12);
  drawHands();
  displayText();
  ticks();
}
  
function drawHands(){
  fill(225);
  //seconds
  arc(width/2, height/1.85, diameter, diameter,radians(270), 
     radians(270)+s);
  strokeWeight(5);
  //minutes
  noStroke();
  fill(155);
  arc(width/2, height/1.85, diameter*0.6, diameter*0.6, radians(270),
      radians(270)+m);
  strokeWeight(10);
  //hours
  fill(50);
  arc(width/2, height/1.85, diameter*0.3, diameter*0.3,  radians(270),
      radians(270)+h);
}

function displayText(){
  //draws text
  textAlign(CENTER);
  textSize(24);
  fill(255);
  noStroke();
  clockText = nf(hour(),2,0)+":"+nf(minute(),2,0)+":"+nf(second(),2,0);
  text(clockText, width/2 , 45);
}

function ticks(){
  //draws clock ticks
  strokeWeight(5);
  stroke(255);
  for (var angle = 0; angle < 360; angle+=6) {
    var x = width/2 + cos(radians(angle)) * width/2.4;
    var y = height/1.85 + sin(radians(angle)) * width/2.4;
    ellipse(x, y, 1, 1);
  }
}

I decided to try and do a variation of a normal clock by making its ticks add onto each other until it loops at the top again. I tried to make the colors compliment each other and having the second hand and the hour hand stand out more than the minute hand. I did this by creating three arcs on top of each other that incremented based on the minute, hour, and second functions. I also added round ticks at at intervals of 6 degrees to help better visualize the exact time. 

My project is 800*800, but the full width wouldn’t show. The idea is that within one minute, the egg is going to be fried, so the color is changing gradually(orange to yellow). The pan is going to turn every minute. There is also a dozen of eggs representing the current hour. Every hour an egg is going to disappear from the box. sketch

function setup() {
    createCanvas(800, 800);
}
function draw() {
	var S=second();
	var mappedS=map(S,0,60,0,600);
	background(220);
	//second
	rectMode(CORNER);
	noStroke();
	fill(200);
	rect(40,90,600,20);//darker background
	noStroke();
	fill("white");
	rect(40,90,mappedS,20);//second
	strokeWeight(1);
	//fill(0);
	//text(S,30,70);
	//little clock
	fill(200);
	ellipse(690,100,30,30);
	strokeWeight(2);
	stroke(150);
	line(690,100,690,86);
	line(690,100,700,100);
	//pan
	noStroke();
	fill(100);
	ellipse(width/2,height/2,250,250);//gray outer layer
	angleMode(DEGREES);
	push();
	translate(height/2,width/2);
	rotate(minute()/5*30);
	rectMode(CORNERS);
	rect(0,0,-20,-250);	//handle
	ellipse(-10,-250,20,20);
	pop();
	fill(60);
	ellipse(width/2,height/2,220,220);//dark inner layer
	//egg
	fill("white");
	noStroke();
	ellipse(width/2-10,height/2,100,90);
	var r=map(S,0,60,255,251);
	var g=map(S,0,60,127,238);
	var b=map(S,0,60,80,167);
	fill(r,g,b);
	ellipse(width/2,height/2,30,30);
	println();
	//hour
	var eggX=120;
	var boxX=60;
	var baseX=105;
	for (i=0;i<12-hour()%12;i++){
	fill("white");
	noStroke();
	ellipse(eggX,720,38,53);//one egg
	eggX+=50;
	}
	//box
	fill(158, 151, 142);
	noStroke();
	quad(boxX,725,boxX+670,725,boxX+650-20,760,boxX+40,760);
	for(i=0;i<12;i++){
		fill(158, 151, 142);
		noStroke();
		rectMode(CORNERS);
		rect(baseX,760,baseX+30,770);
		baseX+=50;
	}	
}

sketch

//Grace Cha
//Section C
//heajinc@andrew.cmu.edu
// 6. Project 06 – Abstract Clock

//This is inspired by cellular mitosis and splitting of chromosomes. 
//The way you tell time is by  measuring the center to each side of the width

//HOUR:  Tallest circular object (up/down way)
//Minute: medium tallest object 
//Second: shortest object
var prevSec;
var millisRolloverTime;

//time variables
var H;
var M;
var S;

//These lines are for the random changing dots
var x = [];
var y = [];
var dx = [];
var dy = [];
var col = [];
var dots = 100;

function setup() {
    createCanvas(600, 600);
    millisRolloverTime = 0;
    for (var i = 0; i < 200; i ++){
        H = hour();
    	M = minute();
    	S = second();
        x[i] = random(width) * cos(radians(20));
        y[i] = random(height) * sin(radians(20));
        dx[i] = H;//use seconds just as a velocity movement 
        dy[i] = M;//this does not actually move per second. 
        col[i] = color(random(255), random(255), random(255),150);  
    }
}
function draw() {
    background(0); 
    M = minute();
    S = second();

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

    //this makes time go by 12 hours
    if (H > 12){
    	H = H - 12;
    }
    //this make 12 o clock "12" rather than "0"
    if (H == 0){
    	H = 12;
    }

    push();
    var r = 40 + 25 * sin(millis() / 1000.0 );
    var g = 230 + 25 * sin(millis() / 1000.0 + HALF_PI);
    var b = 230 + 25 * sin(millis() / 1000.0 - HALF_PI);
    fill(0,g,b,140);
    text("Hour: "   + H, 10, 22);
    pop();


    push();
    var r = 100 + 25 * sin(millis() / 1000.0 );
    var g = 100 + 25 * sin(millis() / 1000.0 + HALF_PI);
    var b = 100 + 25 * sin(millis() / 1000.0 - HALF_PI);
	fill(r,g,0);
    text("Minute: " + M, 10, 42);
    pop();

    push();
    var r = 230 + 25 * sin(millis() / 1000.0 );
    var g = 230 + 25 * sin(millis() / 1000.0 + HALF_PI);
    var b = 230 + 25 * sin(millis() / 1000.0 - HALF_PI);
    fill(r,0,0);
    text("Second: " + S, 10, 62);
    pop();
    
    var hourGrowth= map(H, 0, 12, 0, width);
    var minuteGrowth = map(M, 0, 59, 0, width);
    var secondGrowth  = map(S, 0, 60, 0, width);
    
    //These are just random changing lines to add some interest 
    for (var i = 0; i < dots; i ++){
    	fill((col[i]),150);
        noStroke();
        ellipse(x[i], y[i], 5, 5);
        x[i] += dx[i];
        y[i] += dy[i];

        if (x[i] > width) {
            x[i] = 0;
        }  else if (x[i] < 0) {
            x[i] = width;
        }
        if (y[i] > height){
            y[i] = 0;
        }
        else if (y[i] < 0) {
            y[i] = height
        } 
    }

    //Second movement
    push();
	var r = 230 + 25 * sin(millis() / 1000.0 );
    var g = 230 + 25 * sin(millis() / 1000.0 + HALF_PI);
    var b = 230 + 25 * sin(millis() / 1000.0 - HALF_PI);
	for(var i = 0; i <20; i ++){
		strokeWeight(1);
		noFill();
		stroke(r,0,0,90);
		var c = (i * 10);
		ellipse(width/2, height/2, secondGrowth,c);
	}
	pop();


	//Minute Movement
	push();
	for(var i = 0; i <40; i ++){
		strokeWeight(.8);
		
		noFill();
		var r = 100 + 25 * sin(millis() / 1000.0 );
        var g = 100 + 25 * sin(millis() / 1000.0 + HALF_PI);
        var b = 100 + 25 * sin(millis() / 1000.0 - HALF_PI);
		stroke(r,g,0,120);
		var b = (i * 12);
		ellipse(width/2, height/2, minuteGrowth, b);
	}
	pop();
	
	//Hour Movement
	push();
	var r = 40 + 25 * sin(millis() / 1000.0 );
    var g = 230 + 25 * sin(millis() / 1000.0 + HALF_PI);
    var b = 230 + 25 * sin(millis() / 1000.0 - HALF_PI);
    //background (r,g,b); 
	for(var i = 0; i < 30; i ++){
		strokeWeight(.7);
		noFill();
		stroke(0,g,b,140);
		var d = (i * 20);
		ellipse(width/2, height/2, hourGrowth, d);
	}
	pop();
}

Process: 

I was inspired by the movements of mitosis to construct my abstract clock.  The way that chromosomes are split from the center to the sides of the cell is something I tried to replicate.  Each circular object is differnt measure: second, mins, hour.

The idea is that time is measured by the distance from the center to each side of the width.  The Hour is the tallest circular object (up/down way), the minute is medium tallest object, and the seconds are the shortest object.  The smaller dots are random generated dots that are different whenever the page is refreshed.

 

 

sketch

//Jihoon Park
//Section A
//jihoonp@andrew.cmu.edu
//project-06

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

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
	var Mil = millis();
	
	var glac = (sin(radians(Mil/3600/1000*180)));	//size change of glacier by minute
	var shadR =(cos(radians(Mil/12/3600/1000*180)));//size change of penguin by second
	var penR = abs(sin(radians(Mil/1000/60*180)));	//rotation of shadow by hour

	var snow = [0,2,4];
	
	var centX = width/2;
	var centY = height/2;
	background(117, 230, 232);					//creates the sky


    textSize(15);							//text specifications
    fill("darkblue");
    textFont("Courier New");
    										//writes out time above
    text(nf(H, [], 0), 110, 30);
    text(":", 130, 30);
    text(nf(M, [], 0), 140, 30);
    text(":", 160, 30);
    text(nf(S, [], 0), 170, 30);
	
	fill(42, 135, 232);							//creates the water
	noStroke();
	rect(0,100, 600, 300);

	fill(230,232,232);							//creates background glacier
	strokeWeight(2);
	beginShape();
	vertex(0, 70);
	vertex(100, 80);
	vertex(120, 110);
	vertex(110, 115);
	vertex(80, 115);
	vertex(80, 110);
	vertex(0, 110);
	endShape(CLOSE);

	beginShape();
	vertex(200, 100);
	vertex(230, 85);
	vertex(240, 100);
	endShape(CLOSE);

	beginShape();
	vertex(380, 105);
	vertex(370, 80);
	vertex(520, 83);
	vertex(520, 75);
	vertex(600, 75);
	vertex(600, 110);
	endShape(CLOSE);
	
	//creates the glacier that increase and decrease according to minute
	fill(225, 255, 236);						
	strokeWeight(1);							
	stroke(0);				
	//noStroke();
	ellipse(300, 250, 200+200*glac, 100+100*glac);
	

	//creates shadow that rotates by hour

	fill(140);
	noStroke();
	push();
	translate(centX, 260);
	rotate(shadR);
	ellipse(0,50, 50, 100);
	pop();

	
	//creates penguin that grows by second

	fill(255,238,95);							
	triangle(290, 240, 285, 260, 295, 260);				//penguin left foot
	triangle(310, 240, 305, 260, 315, 260);				//penquin right foot

	fill(14, 25, 41);
	noStroke();
	ellipse(300, 220-50*penR, 30+25*penR, 60+50*penR); 	//penguin body
	ellipse(300, 180-50*penR, 20+25*penR, 30+50*penR); 	//penguin head
	ellipse(300, 240-15*penR, 40+10*penR, 40+10*penR); 	//penguin butt
	push();
	translate(310+15*penR, 210-40*penR);
	rotate(radians(-30));								//penguin right fin
	ellipse(0,0, 10, 40);
	pop();
	push();
	translate(290-15*penR, 210-40*penR);					
	rotate(radians(30));
	ellipse(0,0, 10, 40);								//penguin left fin
	pop();

	fill(240);
	ellipse(300, 230-50*penR, 15+25*penR, 50+50*penR); 	//penguin belly

	fill(255, 238, 95);
	noStroke();											//penguin beak
	beginShape();
	vertex(300, 180-60*penR);
	vertex(305, 182-60*penR);
	vertex(300, 184-60*penR);
	vertex(295, 182-60*penR);
	endShape(CLOSE);

	fill(255);
	ellipse(295, 175-60*penR, 10, 5);					//penguin left eye
	ellipse(305, 175-60*penR, 10, 5);					//penguin right eye
	fill(0);	
	ellipse(295, 175-60*penR, 2,2);						//penquin left pupil
	ellipse(305, 175-60*penR, 2,2);						//penquin right pupil

	for(i=0; i<width; i+=100) {							//snow
		for(j=0; j<height; j+=100) {
			fill(255);
			noStroke();
			ellipse(i*random(0,2), j*random(0, 2), 5,5);
		}
	}
}

The clock incorporates three different elements to tell change in time. The penguin grows and shrinks by the second, the iceberg it stands on also grows and shrinks by the minute, while the shadow of the penguin rotates by the hour. There is no absolute measure of time in my clock, but it only shows the change. Though in the beginning, I imagined a penguin hatching out of an egg to grow as time goes by, but that turned out unfeasible with my coding skills…

sketch

//Rebecca Enright
//Section A
//renright@andrew.cmu.edu
//Abstract Clock

function setup() {
    createCanvas(640,480);
    background(0);
} 

function draw() {
    background(0);
    //create variables for time functions
    var h = hour();
    var m = minute();
    var s = second();
    var mi = millis();

    //create sun 
    fill(255,255,0);
    ellipse(width/2,height/2,100,100);
    
    //create light blue second ellipse
    push();
    translate(width/2,height/2);
    //rotates ellipse every second (1 orbit = 1 minute)
    rotate(radians(360/60 * s));
    fill(0,255,191);
    ellipse(150,150,25,25);
    pop();
    
    //create green minute ellipse
    push();
    translate(width/2,height/2);
    //rotates ellipse every minute
    rotate(radians(360/60 * m));
    fill(181,255,0);
    ellipse(50,50,10,10);
    pop();
    
    //create maroon hour ellipse
    push();
    translate(width/2,height/2);
    //rotates ellipse every hour
    rotate(radians(360/24 * h));
    fill(189,0,75);
    ellipse(100,100,35,35);
    pop();

    //creates purple millisecond ellipse
    push();
    translate(width/2, height/2);
    //rotates ellipse every millisecond (1 orbit = 1 minute)
    rotate(radians(360/60000 * mi));
    fill(176,0,255);
    ellipse(75,75,15,15);
    pop();

}

It was fun thinking of ideas for this project, and when I was working with the simple clock assignment, I decided that I wanted to use rotation and reflect the general look of a clock, but in a different way.This then led me to the idea of a solar-system design. I also planned out the different “planets” and their locations in my sketch below.

sketch

//Jiyoung Ahn
//Section A
//jiyounga@andrew.cmu.edu
//Assignment -06-project


var cX = 0; //center x
var cY = 0; // center y
var dif = 100; //width difference


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

function draw() {
  background(250);

  var Hr = hour ();
  var Min = minute ();
  var Sec = second ();  
  noStroke ();  
  translate (250, 300);
  

  //second-red
  fill ('#f92b09');
  arc (cX, cY, width, width, PI, PI + (Sec%60)/60*PI);
  
  //second-orange
  fill ('#f9823e');
  arc (cX, cY, width-dif, width-dif, PI, PI + (Sec%60)/60 *PI);

  //minute - yellow
  fill ('#ede995');
  arc (cX, cY, width-2*dif, width-2*dif, PI, PI+(Min%60)/60 *PI);

  //minute - green
  fill ('#70cb95');
  arc (cX, cY, width-3*dif, width-3*dif, PI, PI+(Min%60)/60 *PI);

  //hour - blue
  fill ('#70afd7');
  arc(cX, cY, width-4*dif, width-4*dif, PI, PI + (Min%60)/60 *PI);

  //hour - navy
  fill ('#3d64d2');
  arc(cX, cY, width-5*dif, width-5*dif, PI, PI + (Hr%12)/12 *PI);
  
  //hour - purple
  fill ('#7f7ed0');
  arc(cX, cY, width-6*dif, width-6*dif, PI, PI + (Hr%12)/12 *PI); 

}

I tried to create a clock with a shape of a rainbow. I divided 7 colors of rainbow by sec, min, hr. Though I took a simple concept of clock, it was quite a challenge for me to present different sizes of half ellipse.

abstractclock Experimenting with the colors and ellipses with the time functions.

function setup() {
  createCanvas(300, 300);
  background(240);
  
 
}
var sAngle = 6; 
var mAngle = 6;
var hAngle = 30;


function draw() {
    var s =  second();
    var m = minute();
    var h = hour();
    var centerx = width / 2;
    var centery = height / 2;
    var radius = 125;
    background(255);

    //circle
    fill(0,0,200);
    strokeWeight(10);
    ellipse(width/2,height/2,250,250);
    

    // minute hand
    fill(255,200,0);
    var y = cos(radians(mAngle*m*-1)) * radius;
    var x = sin(radians(mAngle*m)) * radius;
    stroke(5);
    ellipse(centerx, centery, centerx + x, centery - y);

    //second hand 
    fill(255);
    var y = cos(radians(sAngle*s*-1)) * radius;
    var x = sin(radians(sAngle*s)) * radius;
    strokeWeight(1);
    ellipse(centerx, centery, centerx + x, centery - y);

    // hour hand
    fill(200,0,0);
    var y = cos(radians(hAngle*h*-1)) * radius;
    var x = sin(radians(hAngle*h)) * radius;
    strokeWeight(5);
    ellipse(centerx, centery, centerx + x, centery - y);



   }

I wanted to make my abstract clock a simple clean representation of time. I liked the idea of revolving the time around a center of normal analog clocks, but instead make it something that built up rather than ticking by.

kdlee-project-06

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

function draw() {
    background(255);

//digital time vars
    var s = second();
    var m = minute();
    var h = hour();
    var hx = 125;//digital hour x location
    var mx = 144;//digital minute x location
    var sx = 164;//digital second x location
    var ty = 154;//digital time y location
//types digital time
    textStyle(BOLD);
    text(nf(h%12, 2, 0) + ":", hx, ty);//digital hour
    text(nf(m, 2, 0) + ":", mx, ty);//digital minute
    text(nf(s, 2, 0), sx, ty);//digital second

//radius vars
    var sRadius = 120;//second hand length
    var mRadius = 90;//minute hand length
    var hRadius = 60;//hour hand length
//circle arc angle vars
    var sAngle = map(second(), 0, 60, radians(0), radians(360));//converting 60 sec to 360 degrees
    var mAngle = map(minute(), 0, 60, radians(0), radians(360));//converting 60 min to 360 degrees
    var hAngle = map(hour()%12, 0, 12, radians(0), radians(360));//converting 12 hr to 360 degrees
//x & y revolving locations
    var sx = cos(sAngle) * sRadius;//rotating s hand X
    var sy = sin(sAngle) * sRadius;//rotating s hand Y
    var mx = cos(mAngle) * mRadius;//rotating m hand X
    var my = sin(mAngle) * mRadius;//rotating m hand Y
    var hx = cos(hAngle) * hRadius;//rotation h hand X
    var hy = sin(hAngle) * hRadius;//rotation h hand Y

    push();//begin drawing board
    translate(width/2, height/2)
    rotate(radians(270));//rotates from 0 or 2pi so starting point is upper vertical

    stroke("#F18F32");//orange seconds
    noFill();
    strokeWeight(20);
    arc(0, 0, sRadius * 2, sRadius * 2, 0, sAngle);
    dot(sx, sy);

    stroke("#E186CF")//purple minutes
    noFill();
    strokeWeight(20);
    arc(0, 0, mRadius * 2, mRadius * 2, 0, mAngle);
    dot(mx, my);

    stroke("#2CD9DE")//blue hours
    noFill();
    strokeWeight(20);
    arc(0, 0, hRadius * 2, hRadius * 2, 0, hAngle);
    dot(hx, hy);

    pop();
}

function dot(x, y){
    fill(255);
    stroke(0);
    strokeWeight(2);
    ellipse(x, y, 20, 20);
}