Grace Cha–Project 06 – Abstract Clock

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.