Category: Project-06-Abstract-Clock

sketch

var xS = []; //for seconds
var yS = [];
var xM = []; //for minutes
var yM = [];
var xL = []; //for hours
var yL = [];
var dxS = []; // velocity in x direction 
var dyS = []; // velocity in y direction
var dxM = []; 
var dyM = []; 
var colS = []; //color array
var colM = [];
var colL = [];
var smR = 15;
var mdR = 25;
var lgR = 35;

function setup() {
    createCanvas(480, 480);  
    
	for (var i = 1; i < 61; i++) { // for loop initializing 60 seconds
        xS[i] = random(width/3+smR,width/3*2-smR);
        yS[i] = random(height/3+smR,width/3*2-smR);
        dxS[i] = random(-5, 5);
        dyS[i] = random(-5, 5);
        var colR = random(102,199);
        var colScale = (colR-137)/(199-137);
        colS[i] = color(colR, 85+(173-85)*colScale, 96+(190-96)*colScale);
    }
    
    for (var i = 1; i < 61; i++) { // for loop initializing 60 minutes
        xM[i] = random(mdR,width-mdR);
        yM[i] = random(mdR,height-mdR);
        while (dist(xM[i],yM[i],width/2,height/2) <= width/4+mdR/2) {
        	xM[i] = random(width);
        	yM[i] = random(height);
        }
        dxM[i] = random(-5, 5);
        dyM[i] = random(-5, 5);
        var colR = random(99,179);
        var colScale = (colR-99)/(179-99);
        colM[i] = color(colR, 59+(143-59)*colScale, 61+(145-61)*colScale);
    }

    for (var i = 1; i < 25; i++) { // for loop initializing 24 hrs
        xL[i] = random(lgR,width-lgR);
        yL[i] = random(lgR,height-lgR);
        while (dist(xL[i],yL[i],width/2,height/2) <= width/4+lgR/2) {
        	xL[i] = random(width);
        	yL[i] = random(height);
        }
        dxM[i] = random(-3, 3);
        dyM[i] = random(-3, 3);
        var colR = random(151,232);
        var colScale = (colR-151)/(232-151);
        colL[i] = color(colR, 120+(215-120)*colScale, 157+(241-180)*colScale);
    }
}

function draw() {
	var H = hour();
	var M = minute();
	var S = second();
	var cirC = [];
	
	background(241,227,228);
	noStroke();
	fill(235,219,204);
	ellipse(width/2, height/2,width/2);
	
    frameRate(4);
	for (var i = 1; i < S+1; i++) {  //for each ellipse - seconds
        fill(colS[i]);
        ellipse(xS[i], yS[i], smR);
        xS[i] += dxS[i];
        yS[i] += dyS[i];
		if (dist(xS[i],yS[i],width/2,height/2)>=width/4-smR/2) {
        	dxS[i] = - dxS[i];
        	dyS[i] = - dyS[i];        	
        }
	}
	for (var j = 1; j < M+1; j++) { //for each ellipse - minutes
		fill(colM[j]);
		ellipse(xM[j], yM[j], mdR);
		xM[j] += dxM[j];
		yM[j] += dyM[j];
		if (dist(xM[j],yM[j],width/2,height/2) <= width/4+mdR/2) {
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
        } else if (xM[j]+mdR>width || xM[j]-mdR<0){
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
    	} else if (yM[j]+mdR>width || yM[j]-mdR<0){
    		dxM[j] = - dxM[j];
    		dyM[j] = - dyM[j];
    	}
        
	}
	for (var j = 1; j < H+1; j++) { //for each ellipse - hours
		fill(colL[j]);
		ellipse(xL[j], yL[j], lgR);
		xL[j] += dxM[j];
		yL[j] += dyM[j];
		if (dist(xL[j],yL[j],width/2,height/2) <= width/4+lgR/2) {
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
        } else if (xL[j]+lgR>width || xL[j]-lgR<0){
        	dxM[j] = - dxM[j];
        	dyM[j] = - dyM[j];
    	} else if (yL[j]+lgR>width || yL[j]-lgR<0){
    		dxM[j] = - dxM[j];
    		dyM[j] = - dyM[j];
    	}
        
	}
	
	

}

For my project, I used the amount of circles to represent the time. Then central circle represents the seconds that are randomly distributed within the circle. The circles outside of the central circle represents the minutes. The other larger moving circles represent the hours. They have different moving velocity to show the difference among them.

project06-3.js

//shariwa sharada
//ssharada@andrew.cmu.edu
//project 06
//section a 


//creating global var to be used in varyingly in different functions
var diameter;
//array of points for x point of second ellipses - 60 variables for 60 seconds 
var placeX = [300,305,310,320,325,330,340,345,350,360,365,370,380,385,390,400,405,410,420,425,430,440,445,450,460,465,470,480,485,490,500,505,510,520,525,530,540,545,550,560,565,570,580,585,590,600,605,610,620,625,630,640,645,650,660,665,670,680,690,700]
//array of points for y point of second ellipses - 60 variables for 60 seconds 
var placeY = [300,305,310,320,325,330,340,345,350,360,365,370,380,385,390,400,405,410,420,425,430,440,445,450,460,465,470,480,485,490,500,505,510,520,525,530,540,545,550,560,565,570,580,585,590,600,605,610,620,625,630,640,645,650,660,665,670,680,690,700]
//array of points for x point of minute ellipses - 60 variables for 60 minutes 
var placeXMin = [50,60,75,85,100,110,125,135,150,160,175,185,200,210,225,235,250,260,275,285,300,310,325,335,350,360,375,385,400,410,425,435,450,460,475,485,500,510,525,550,575,600,625,650,675,700,725,750,775,800,825,850,875,900,925,950]
//array of points for y point of hour lines - 24 variables for 24 hours
var placeYHr = [50,75,121,150,176,200,253,300,350,375,450,473,500,550,600,675,699,737,775,803,825,869,900,925]


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

function draw(){
	background(0);

	var hr = hour(); //hour variable 
	var mn = minute(); //minute variable 
	var sc = second();//second variable 

	//creating the ellipses for the seconds
	//this draws the same number of ellipses at the given second 
	//the ellipses position change with each second  
	push();
	for (var i = 0; i<sc; i++){ //for loop relative to the number of seconds 
		var diameter = random(20,180);
		frameRate(1);
		fill(random(214,254), random(92,132), random(131,171), random(0,70)); //adding transparencies to the fill 
		stroke(random(214,254), random(92,132), random(131,171), random(120,225));
		strokeWeight(random(0.5, 2.3));
		ellipseX = random(placeX); //making the index value chosen from the array random 
		ellipseY = random(placeY); //making the index value chosen from the array random 
		ellipse(ellipseX/2, ellipseY/2, diameter/2, diameter/2); //drawing the ellipses 
	}
	pop();

	//making the minutes ellipses 
	//the position of the ellipses in the y axis does not change 
	//this draws the same number of ellipses at the given minute.
	push();
	for (var j = 0; j<mn; j++){ //for loop relative to the number of minutes 
		stroke(random(215,255), random(174,214), random(5,45), random(70,100));//randomising stroke colours
		fill(255, 194, 25, 70);
		strokeWeight(random(0.1, 1.2));
		drawMin(placeXMin[j]/2); //making it relaitive to the x value of the ellipse and the for loop  
		//calling it from another functions that defines what to draw
	}
	pop();

	//making the hour lines/blobs
	//the position of these blobs does not change in the x direction 
	//this draws the same number of lines as the number of hours in a range of 1-24
	push();
	for (var k = 0; k<hr; k++){ //making the for loop relative to the hour 
		stroke(random(0,40), random(137,177), random(155,195));
		fill(20, 157, 175, 10);
		strokeWeight(random(5, 10));//making the lines blobs 
		drawHr(placeYHr[k]/2);//making it relative to hour variable, the for loop, y position array
	}
	pop();
}

//giving the parameters for the ellipses drawn for the minutes representation 
function drawMin(x){
	var diameter = random(10,50);
	ellipse(x, width/2, diameter/2, diameter/2);//only calling fro the x position to be changed. 
}

//giving the parameters for the lines drawn for the hours representation 
function drawHr(y){
	var diameter = random(30,70);
	line(height/2, y, height/2, y+5); //only calling the y value to be changed 
}

For this project I was inspired by the gear system that watches have. The way the ellipses interact represent the complexity of a traditional gear system.

Everything is relative to the second values which is why everything moves as the second changes but the objects are only added as the individual variable changes. This is similar to the idea that in a gear system, if even one part if off by the slightest bit, everything is affected.

The pink ellipses depict the seconds – the number of these ellipses show the number of seconds that have passed, and every second that goes by the placement of these ellipses randomises while adding another ellipse i.e.: a second.

The yellow ellipses represent the minutes with the number of minutes increasing from left to right as the number of minutes increase.

The central blobs represent the hours in a 24 hours clock with the number increasing from top to bottom as the number of hours increase.

sketch

/*Jessica Nip
Section A
jknip@andrew.cmu.edu
Project-06
*/

var sealevel = 250;
var boatlevel = 230;
var rodX = 230;
var rodY = boatlevel+35;
var manX = 170;
var manY = 200;

 //-------------------------
function setup() {
    createCanvas(360, 360);
}
 
 //-------------------------
function draw() {
    background(209,236,245);
    noStroke();

//fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    var mappedS = map(S, 0, 59, 0, rodX);

//create text elements for hours and minute on top
    fill(0);
    textStyle(BOLD);
    text("x " + H, 60,40);
    text("x " + M, 310,40);

//create fish icon
    fill(253,189,3);
    noStroke();
    arc(290, 35, 22, 15, 0, TWO_PI-QUARTER_PI, PIE);
    triangle(275, 45, 270, 35, 290, 35);

//create fish bucket icon
    fill(120);
    rect(20, 20, 30, 30, 5);
    noFill();
    stroke(120);
    arc(35, 25, 30, 20, PI, TWO_PI);

//create sea
    fill(26,91,147);
    rect(0, sealevel, width, height);

//create fishing rod
    noFill();
    stroke(120);
    arc(rodX, rodY, 80, 210, PI+QUARTER_PI, TWO_PI);

//create fisherman
    fill(29,70,149);
    noStroke();
    ellipse(manX, manY, 15, 15);
    arc(manX+10, manY+18, 40, 40, 0, PI+QUARTER_PI, PIE); //add additional spacing between head and body

//create fish bucket
    fill(120);
    rect(manX-80, manY+15, 30, 30, 5);
    noFill();
    stroke(120);
    arc(manX-65, manY+20, 30, 20, PI, TWO_PI);

//create boat
    noStroke();
    fill(235,121,85);
    arc(width/2.5, boatlevel, width/2, height/5, 0, PI);

//create fish
    fill(253,189,3);
    noStroke();
    //map fish movement to seconds of clock
    arc(mappedS+35, rodY, 22, 15, 0, TWO_PI-QUARTER_PI, PIE);
    triangle(mappedS+15, rodY, mappedS+35, rodY, mappedS+20, rodY+10); 

}

When thinking about how to best represent the passing of time, I considered different active and passive activities from eating, exercising, etc. I decided to represent the passage of time in fishing — letting the fish bucket represent hours, the number of fishes caught as minutes, and the movement of fish as seconds.