Month: October 2016

sketch

//Zhuoying Lin
//section a
//zhuoyinl@andrew.cmu.edu
//Project 06 abstruct clock

var xh = [];
var yh = [];
var xb = [];
var yb = [];
var col = [];


function setup() {
    createCanvas(600, 600);
    for (i = 0; i<100; i++) {
        xh[i] = random(50,550);
        yh[i] = random(50,550);
        xb[i] = random(0,600);
        yb[i] = random(0,600);
        col[i] = random(150,255);
    }
    frameRate(4);
}

function draw() {
    background(0);
    var h = hour();
    var m = minute();
    var s = second();

    push();
    translate(width/2, height/2);

    for (i = 0; i<s;i++) {
         stroke(col[i]);
         strokeWeight(0.5);
         noFill();
         ellipse(0, 0, 540-i*9, 540-i*9);//the decreasing circle in thebackground which represent seconds

    }
    pop();
    
    push();
    translate(width/2, height/2);
    for ( i = 0; i<m; i++) {

       
        rotate(radians(6));
        stroke(col[i]);
        strokeWeight(3);
        line(0, 0, 0, -290+random(-3,3));      
    }
    pop();//the amount of lines representing the minute

    for (i = 0; i<s; i++) {
        fill(random(0,255));
        noStroke();
        ellipse(xb[i], yb[i], 10, 10);
    }//draw the shining stars in the background, the amount is in relation to second

    push();
    translate(width/2, height/2);
    var angle = 360*s/60
    rotate(radians(angle-90));//make the circle of epplipse rotate according to seconds
    for (i = 0; i<h; i++) {
        rotate(radians(15));
        noStroke();
        fill(col[i]);
        ellipse(0, -258, 25,25);//number of circles which representing hours
    }
    pop();

    textFont("Helvetica")
    text(nf(h,2,0)+":", 535, 590);
    text(nf(m,2,0)+":", 555, 590);
    text(nf(s,2,0), 575,590);
   
}

For this project, I try to create a sense of universe to depict the fourth dimension. And I used multiple variables to represent the time move. Both the circle lines and circle of ellipses represent the time in second as a metaphor of planets in the space and their tracks. The number of long white lines represent the minutes which could also seen as light beam and the number of while ellipse represent the hours. The sparkly little ellipse in the background do not show the times but they could be seen as stars far away.

sihand – contour clock

//Sihan Dong
//sihand@andrew.cmu.edu
//Section B
//Week 06 project: abstract clock - erosion

var s;
var m;
var h;
var angMinute;
var angSecond;
var arrayS = [];
var arrayM = [];
var arrayH = [];
var gradientH = [];
var colorH1 = [];
var colorH2 = [];
var interval = 40;

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

function draw() {
	background(0, 0, 50);
	drawHour();
	drawSecond();
	drawMinute();
    drawTime();
}

function drawHour() {
	h = hour();
	noStroke();

	for (ih = 0; ih < 13; ih++) {
	//dimension of the centripetal circles
		arrayH[ih] = width - ih*interval;
	//set up the value of the gradient used to generate green and blue
		gradientH[ih] = 255 - 20*ih;
		
	//the certipedal circles represent the hours, where the 
		//land contour
		if (ih+1 > h%12 || ih+1 < 13) {
			//gradientH.pop();
			colorH1[ih] = color(0, gradientH[ih-h%12], 0);
			fill(colorH1[ih]);	
		}
		//ocean contour
		if (ih < h%12) {
			colorH2[ih] = color(0, 0, gradientH[h%12-ih-1]);
			fill(colorH2[ih]);
		}
		
		ellipse(width/2, height/2, arrayH[ih], arrayH[ih]);
	}
}

function drawMinute() {
	m = minute();
	noStroke();
	//fill()
	
    	
	
    for (var im = 0; im < m; im++) {
    	push();
    	
    	translate(width/2, height/2);
    	angMinute = map(m, 0, 60, 0, TWO_PI);
    	angMinute = im*angMinute/m;
    	rotate(angMinute-PI/2);
    	
    	fill(0, 0, 255);
    	rect(0, -3/2, (width - (h%12)*interval)/2, 3);
  		ellipse((width - (h%12)*interval)/2, 0, 10, 7);
    	pop();
	}
}

function drawSecond() {
	s = second();
	noStroke();
	angSecond = map(m, 0, 60, 0, TWO_PI);

	for (is = 0; is < 60; is++) {
		push();
		arrayS[is] = map(is, 0, 60, 65/2+2, width/2);
		
		if (is < s) {
			translate(width/2, height/2);
    		rotate(angSecond-PI/2);
			//fill(255);
			fill(0, 0, map(is, 0, 60, 255, 0));
			ellipse(arrayS[is], 0, 4, 4);
		}
		pop();
	}	
}

function drawTime() {
//the circular background for the text
	noStroke();
	fill(0);
	ellipseMode(CENTER);
    ellipse(width/2, height/2, 65, 65);

//text that shows the real time
	fill(255);
    textAlign(CENTER);
    text(h + " : " + m + " : " + s, width/2, height/2+5);
}

This project was inspired by colored contour maps (shown below). Seconds are represented by a line of dots: “precipitation”; minutes are represented by a serious of “streams”; and hours are represented by the change in the contour. The idea is that every hour passed, the sea level, represented by the blue area, rises to a certain level. In other words, the island, which represented by the green area, relatively sinks by the same level. The changes are illustrated in the updated image via changes in the shades of green and blue, which abides by the common appearance of a contour map.

 

For this project I decided to try to represent time as dripping water droplets. I wanted to show the hours, minutes, and seconds dripping down from the top of my canvas. I was thinking about water evaporating and dripping as a way to tell the passage of time. I chose to do a 24 hour time because thats what the assignment asked for and I think that the chance for that row to be longer will be a cool visual effect. I used loops to create the vertical columns of drips and add one drip for each second/minute/hour. The first column is hours, the middle is minutes, and the last is seconds.

sketch

//Shannon Case
//Section D
//scase@andrew.cmu.edu
//project 06

function setup() {
    createCanvas(300,800);
    background(0);
}

function draw() {

    background('#9fdbdd');
    var m = minute();
    var s = second();  //sets variables
    var h = hour();
    var size = 10;
    var yOffset = 10;
    var spacing = 10;




for(var i = 0; i<h; i++){

    fill('#409bad');
    ellipse(40, yOffset+i*spacing, size, size);
}

for(var i = 0; i<m; i++){

    fill('#4078ad');
    ellipse(120, yOffset+i*spacing, size, size);
}

for(var i = 0; i<s; i++){
    
    fill('#0f025e');
    ellipse(200, yOffset+i*spacing, size, size);
}

}