Month: October 2016

sketch

var secR; // Initialise sec colour var
var secG;
var secB;
var minR; // Initialise min colour var
var minG;
var minB;
var hourR; // Initialise hour colour var
var hourG;
var hourB;
var h; // Initialise hour var
var m; // Initialise min var
var s; // Initialise sec var

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

function draw() { 
	background(255);

	secR = map(s,0,59,90,255); //Maps colour onto the seconds
	secG = map(s,0,59,90,180);
	secB = map(s,0,59,90,180);
	minR = map(m,0,59,90,177);  //Maps colour onto the minutes
	minG = map(m,0,59,90,91);
	minB = map(m,0,59,90,204);
	hourR = map(h,0,23,90,85); //Maps colour onto the hours
	hourG = map(h,0,23,90,134);
	hourB = map(h,0,23,90,186);

	h = hour(); // Hour variable
	m = minute(); // Minute variable
	s = second (); // Second variable

	text("Current Time:" +h,75, 50);
    text(":"+m,161,50);
    text(":"+s,178,50);


	noStroke();
	push();
	translate(width/5,height/2);
	fill(secR,secG,secB);
	ellipse(0,0,150,150);
	fill(minR,minG,minB);
	ellipse(150,0,150,150);
	fill(hourR,hour);
	ellipse(300,0,150,150);
	pop();



 
	
}

My inspiration for this abstract clock came from this website called What Colour Is It? that changes colour with the time. The website doesn’t split the time into hours/minutes/seconds, and it also displays the 6 value hex code for the colour. My only issue is that you can’t really see the minutes and hours change colour as you can the seconds.

mluria-06

/*  Submitted by: Michal Luria
    Section A: 9:00AM - 10:20AM
    mluria@andrew.cmu.edu
    Assignment-06-Project
*/


var n = 0.00; //transition from color to color
 

function setup() {
    createCanvas(400,400);
    background(255);
    colorMode(HSB, 100);
}


function draw() {

    var s = second();
    var h = hour() +3; //transition at 3AM

    //top color in gradient 
    var topH = s*1.5; //top saturation influenced by seconds
    var topS = 30
    var topB = 90;

    //bottom color in gradient 
    var bottomH = 100; 
    var bottomS = 0;
    //bottom brightness according to hour
    //darkest at 3AM
    var bottomB = map(h, 27, 0, 0, 100); 




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

        var topCol = color(topH, topS, topB); //define top color
        var bottomCol = color(bottomH, bottomS, bottomB); //define bottom color

        //transition from top color to bottom color according to height
        n = map(i, 0, height, 0, 1); 
        var centCol = lerpColor(topCol, bottomCol, n);
        stroke(centCol);
        strokeWeight(2);
        line(0, i, width, i); //draw a line of color

    }


}

When thinking about abstraction of time, what I found fascinating was how time could be represented with color. Maybe you would not know what was the exact hour by looking at the clock, but I thought the point of the project was mainly to get a sense of the time. This is why I created a gradient, where one side is influenced by the seconds and changes the saturation, whereas the other side’s brightness is influenced by the hour of the day. In this way, every second of the day has a unique frame that will reappear the next day.

I intended to imitate an hourglass. Use ellipses to represent sands(second), larger ellipse in the bottom to represent the minutes, and the angles of the tilting to represent hours. But I found it extremely difficult to correlate the number of sands with the seconds since there is no suitable arithmetic progression whose sum is 60. So I gave up. Then I realized some abstract shapes can have some fantastic effect as we did in string art. So I designed this clock. The strong contrast in color also makes some interesting effect when they overlap with each other.
sketch

var strokeR = 204;
var strokeG = 230;
var strokeB = 255;
function setup() {
    createCanvas(600, 600);
    frameRate(1);  
}

function draw() {
    background(0);
    strokeWeight(1);
    noFill();
    
    //rotate ellipse to represent seconds
    push();
    translate(width/2, height/2);
    for (var i = 0; i < second(); i ++) {
        strokeR = map(i, 0, 60, 255, 51);
        strokeG = map(i, 0, 60, 51, 204);
        strokeB = map(i, 0, 60, 0, 204);
        stroke(strokeR, strokeG, strokeB);
        rotate(radians(3));
        ellipse(0, 0, 30, 540);
    } 
    pop();
    
    //increase ellipse to represent minutes
    for (var j = 0; j < minute(); j ++){
        strokeR = map(j, 0, 60, 204, 255);
        strokeG = map(j, 0, 60, 153, 255);
        strokeB = map(j, 0, 60, 255, 255);
        stroke(strokeR, strokeG, strokeB);
        ellipse(300, 300, 9*j, 9*j);
    }
    
    //increase squares to represent hours
    for (var k = 0; k < hour(); k ++){
        strokeR = map(k, 0, 60, 255, 255);
        strokeG = map(k, 0, 60, 255, 255);
        strokeB = map(k, 0, 60, 102, 255);
        stroke(strokeR, strokeG, strokeB);
        quad(300, 30 +22.5*k, 30 + 22.5*k, 300, 300, 570-22.5*k, 570 - 22.5*k, 300);
        
    }

    
}

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.