Category: Project-06-Abstract-Clock

sketch

function setup() {
    createCanvas(300, 300);// create the canvas 300x300 pixels
}

function draw() {
    noStroke();

    var h = hour() % 12;// create an hour variable, but in 12 hour time
    var m = minute();// create a minute variable
    var s = second();// create a second variable

    if (h==0){// make sure it's not 24 hour time, but 12 hour time
        h = 12;
    }

    background(h, m, s); // background color

    push();
    fill(124, 140, 165); // color it silvery blue
    translate(width/2, height/2);// put in center
    rotate(radians(180));// start at the clock's "zero"
    rotate(radians(m*6));// rotate each minute
    ellipse(0, 40, 10, 10);// draw the moon
    pop();

    push();
    fill(247, 218, 160); // color it blue-white
    translate(width/2, height/2);// put in center
    rotate(radians(180));// start at the clock's "zero"
    rotate(radians(s*6));// rotate each second
    ellipse(0, 80, 5, 5); // draw the star
    pop();

    push();
    fill(216, 144, 0); // color it yellow
    translate(width/2, height/2);// put in center
    rotate(radians(180));// start at the clock's "zero"
    rotate(radians(h*30));// rotate each hour
    ellipse(0, 20, 20, 20); // draw the sun
    pop();


}

I experimented with the concepts learned in our previous clock project to create this. I wanted to have the sun, moon, and a star all going in circles – and those celestial bodies to be representing the different hands of the clock. But instead of pointing to different times, they would rotate around an origin point so they looked like they were moving in space.

siminl-project6

// Simin Li
// Section C
// siminl@andrew.cmu.edu
// Project 6
var radiusMax = 130;
var rHour; // radius of hour circle
var rMin; // radius of minute circle
var rSec; // radius of second circle
var h; //hour
var Min; 
var sec;
var time; //the string of the current time
var row = [];//row of each seed
var collum = [];//collum of each seed
function setup() {
    createCanvas(640, 640);
    background(184,66,75);
}

function draw() {    

   if(sec > 58){
    background(184,66,75);
   }
   //when second reaches 59, refresh the page
var strapWidth = radiusMax * 1.25;//the width of wristwatch strap
    fill(255);
    rectMode(CENTER);
    noStroke();
    rect(width / 2,height / 2,strapWidth,height);//draw strap
    
var fromHour = color(255);//white
var toHour = color(126,165,103 );//green
var fromMin = color(202,108,98 );//light pink
var toMin = color(177,42,45);//dark red
var fromSec = color(255);//white
var toSec = color(219,183,178);//really light pink
var circleX = width / 2;
var circleY = height / 2; //center of clock face

    fill(220,190,140);
    ellipse(circleX,circleY,radiusMax,radiusMax);
    //draw full clock face
    
    h = hour();
    Min = minute();
    sec = second();

var shadeHour = lerpColor(fromHour,toHour,(h) / 24); 
var shadeMin = lerpColor(fromMin,toMin,(Min)/ 60);
var shadeSec = lerpColor(fromSec,toSec,sec / 24);
//fill shade of the circle according to the time
    rHour = sqrt(radiusMax * radiusMax  * (h + 1) / 24 );
    //radius of hour circle
    rMin = sqrt((rHour * rHour / 60) * (Min + 1));
    //radius of minute circle
    rSec = sqrt((rMin * rMin / 60) * (sec + 1));
    //radius of second circle
    noStroke();
    ellipseMode(RADIUS);
    fill (shadeHour);
    ellipse(circleX,circleY,rHour,rHour);
    //draw hour circle(second largest circle)
    fill (shadeMin);
    ellipse(circleX,circleY,rMin,rMin);
    //draw minute circle(second smallest circle)
    fill (shadeSec);
    ellipse(circleX,circleY,rSec,rSec);
    //draw second circle(smallest circle)

    time = nf(hour(), 0, 0) + " : " + nf(minute(), 0, 0) + " : " + nf(second(), 0, 0); 
    //nf converts to string
    textAlign(CENTER);
    fill(0);
    text(time, circleX, 634);//display numerical time
    

    seedsAt(sec);
    //draw seed
  }
  function seed(a,b){
    var k = 10; //size of seed
    fill(0);
    beginShape();
    curveVertex(a,  b);
    curveVertex(a + (1 / 2) * k,  b + k * 2.5);
    curveVertex(a + (2 / 3) * k,  b + k * 3.5);
    curveVertex(a,  b + 4 * k);
    curveVertex(a - (2 / 3) * k,  b + k * 3.5);
    curveVertex(a - (1 / 2) * k,  b + k * 2.5);
    curveVertex(a,  b);
    endShape(CLOSE);
    //draws a black watermellon seed at (a,b) by filling curve
    //altered from blood drop in Project 2
}
 function seedsAt(sec){

    //draws seeds at the time "sec" 
    for(i = 0; i < sec ; i ++){
                if((i + 1) % 6 == 0){
    //if 6 is a factor of the number of the second. 
    //eg when sec = 0, it is the 1st second 
        row[i] = (i + 1 ) / 6; 
        //the row of this second 
        collum[i] = 6;
        //the last collum
    }
    else{
    row[i] = (i + 1 - ((i + 1) % 6)) / 6 + 1; 
    collum[i] = (i + 1) % 6;
     
}
    if (collum[i] > 3){ 
    seed(2 * radiusMax + collum[i] * ((width - 2 * radiusMax)/ 7),row[i] * height / 11 - 30);
    //x position needs to avoid overlaping the watch
}
    else{
    seed( collum[i] * ((width - 2 * radiusMax)/ 7),row[i] * height / 11 - 30);

    }
}
 }

In this project I was inspired by a watermelon and wanted to the size of the clock face. I wanted to make the clock abstract and have something tangible as well. This is why after I finished making a clock that tells time according to the area and color of each circle, I added watermelon seeds that could count the current second in the background.

sketch

//Janet Lee
//Section C
//janetl2@andrew.cmu.edu
//Project 06 - Abstract Clock
function setup() {
    createCanvas(600, 600);


}

function draw() {

  background("#79A1BF");

  push();
  translate(width / 2, height / 2);
  fill("#6748A4");
  rotate(radians(hour()%12*30))
  rectMode(CENTER);
  rect(0, 0, 300, 300);
  pop();

  push();
  translate(width / 2, height / 2);
  fill(" #FFEF80");
  rotate(radians(minute()/5*30));
  rectMode(CENTER);
  rect(0, 0, 250, 250);
  pop();

  push();
  translate(width / 2, height / 2);
  fill(" #F05E85");
  rotate(radians (second()*6));
  rectMode(CENTER);
  rect(0, 0, 100, 100);
  pop();

  var h = hour();
  var m = minute();
  var s = second();
  text(h%12,260,50);
  text(":" + m,300,50);
  text(":" + s, 340,50);

    }

jinheel1_project-06

//Jinhee Lee
//Section C
//jinheel1@andrew.cmu.edu
//Project-06

var theSunX = 0; //starting coordinates for the Sun/Moon at midnight
var theSunY = 200;
var theMoonX = 0;
var theMoonY = -200;

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

function draw() {
	var h = hour();
	var m = minute();
	var s = second();
	var daySecs = 86400; //# of seconds in a day
	var timeSecs = (h * 60 * 60 + m * 60 + s); //current time in seconds
	var theSun = 100; //size of theSun
	var theMoon = 100; //size of theMoon
	var skyDayCol = color(135,206,235); //sky color at day
	var skyNightCol = color(0); //sky color at night
	var gDayCol = color(222,184,135); //ground color at day
	var gNightCol = color(139,69,19); //ground color at night

	//various times of day in seconds
	var dawn = daySecs/5;
	var dusk = 4 * daySecs/5;
	var sunrise = 3 * daySecs/10;
	var sunset = 7 * daySecs/10;

	//for future lerpColor() functions
	var twilight1 = map(timeSecs,dawn,sunrise,0,1); //"amt" arguments for lerpColor
	var twilight2 = map(timeSecs,sunset,dusk,0,1);
	var cG1 = lerpColor(gNightCol,gDayCol,twilight1); //color changes during twilight
	var cG2 = lerpColor(gDayCol,gNightCol,twilight2);
	var cSky1 = lerpColor(skyNightCol,skyDayCol,twilight1);
	var cSky2 = lerpColor(skyDayCol,skyNightCol,twilight2);

	//sky
	if (timeSecs < dawn || timeSecs > dusk) { //between dawn and dusk
		background(skyNightCol);
	} else if (timeSecs > sunrise & timeSecs < sunset) { //between sunrise and sunset
		background(skyDayCol);
	} else if (timeSecs >= dawn & timeSecs <= sunrise) { //during 1st twilight
		background(cSky1);
	} else if (timeSecs >= sunset & timeSecs <= dusk) { //during 2nd twilight
		background(cSky2);
	}

	//rising/setting sun and moon
	push();
	translate(width/2,height/2);
	rotate(TWO_PI * timeSecs / daySecs);

	fill("yellow");
	ellipse(theSunX,theSunY,theSun,theSun);
	fill("white");
	ellipse(theMoonX,theMoonY,theMoon,theMoon);
	pop();

	//ground
	if (timeSecs < dawn || timeSecs > dusk) { //between dawn and dusk
		fill(gNightCol);
		rect(0,height/2,width,height/2);
	} else if (timeSecs > sunrise & timeSecs < sunset) { //between sunrise and sunset
		fill(gDayCol);
		rect(0,height/2,width,height/2);
	} else if (timeSecs >= dawn & timeSecs <= sunrise) { //during 1st twilight
		fill(cG1);
		rect(0,height/2,width,height/2);
	} else if (timeSecs >= sunset & timeSecs <= dusk) { //during 2nd twilight
		fill(cG2);
		rect(0,height/2,width,height/2);
	}
}

Coming up with the individual parts, such as defining certain times of day like dusk and dawn and determining arguments for lerpColor() functions, wasn’t difficult. However, implementing them to work in combination was a tougher task. In an attempt to piecemeal the process, I came up with various “if” statements detailing different periods of time during the day, and duplicating said “if” statements so I could use them for changing the ground and sky separately (otherwise there would have been a layering error where the Sun was “on top” of the ground instead of in the horizon).

I initially had an explicit time display, but after reading that conventional numerals were disallowed, I had to take it out. I didn’t want there to just be a black sky at night, so I also added a moon to take the place of the Sun at night. Though you’ll see both of them during the twilight times.

jameskatungyi-project06-abstractclock

//James Katungyi
//Section A 0900
//jkatungy@andrew.cmu.edu
//Assignment-Project-06

function setup(){
    createCanvas(300,300);
    
}
function draw(){
    background(227,218,186);
    stroke(208,169,97);
    strokeWeight(1);
    HourBar();//hour bar function
    MinuteLine();//minute line function
    SecondBall();//second ball function
}
function HourBar(){
    var BarH = height/24;
    var H = hour(); //link to computer clock hour
    var M = minute();//link to computer clock minutes
    var HBarX = map(M,0,59,0,width);//link x position to minute
    var HBarY = map(H,0,23,0,height);//link Y position to hour
    stroke(208,169,97);
    if ((HBarY > height*6/24) & (HBarY < height*18/24)){//fill color bar with light color from 6am to 6pm 
        fill(245);
    } else {
        fill(180);//otherwise make hour bar dark
    }
    rect(0,HBarY,HBarX,BarH);//hour bar
    for (var y=0; y < hBarY; y+=12.5){
        if ((y > height*6/24) & (y < height*18/24)){//fill bars with light shade from 6am to 6pm 
            fill(245);
        } else {
            fill(180);
        }
        rect(0,y,width-1,BarH);
    }  
}
function MinuteLine(){
    var M = minute();//computer clock minute
    var S = second(); //computer clock seconds
    var LineY = map(S,0,59,0,height);//link x position to seconds
    var LineX = map(M,0,59,0,width);//link x position to minutes
    stroke(208,169,97);
    strokeWeight(1);
    line(LineX,0,LineX,LineY);//minute line
    for (var x=0; x < LineX; x+=5){
        line(x,0,x,height);
    }
}
function SecondBall(){
    var diam = 20;
    var S = second();//computer clock seconds
    var M = minute();
    var BallX = map(S,0,59,0,width); //link seconds to x position of the ball
    var BallY = map(M,0,59,0,height); //link ball position of y to minutes
    stroke(208,169,97);
    strokeWeight(1);
    if ((BallY > height*7/24) & (BallY < height*19/24)){//fill ball with dark shade from 6am to 6pm 
            fill(180);
        } else {
            fill(245);
        }
    ellipseMode(CENTER);
    ellipse(BallX,BallY,diam,diam); //draw ball
}

As the hours and minutes build up, the canvas fills with boxes and lines. Each day is a fresh start on a clean slate. Each hour starts out less clattered than towards its close.

The seconds are marked by a ball which was supposed to bounce off the sides evoking the ‘tick-tock’ associated with clocks. However, the reverse direction did not work out. In a way, the single direction is better because each second is fresh, not recycled.

The hours relate to the minutes in that one can tell the hour and minute by just looking at the hour indicator. The same with the minutes and seconds. And ofcourse one can tell the night hours from the day hours – a feature that is perhaps only useful in casinos where one never sees the sky.

My piece was started as a simple grid of circles representing the 60 minutes in an hour. I decided to add some complexity by making the background color and circle color inverted of one another. The number of rows represents the amount of each minute in a 10-minute interval in an hour. The number of columns represents the 10-minute intervals in the hour. I included a digital clock as a reference.

sketch-24.js

//Victor Tavarez
//Section D
//vtavarez@andrew.cmu.edu
//Assignment-06-Abstract Clock

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

function draw() {
    var d = new Date();
    var mils = nf(d.getMilliseconds(),2,0);
    var h = d.getHours()%12;
    var m = nf(d.getMinutes(),2,0);
    var s = d.getSeconds();
    drawBackground(h);// creates the background
    drawCircles(mils,s,m,h);
    whatTimeIsIt(h,m,s,mils);
}

function drawCircles(mils,s,m,h){
    var cols = m%10;
    var rows = m/10;
    noStroke();

     if (hour() > 12) { //after noon
        skyr =map(h,5,12,0,179);
        skyg =map(h,0,12,38,198);
        skyb =map(h,0,4,153,255);
    } else { //after midnight
        skyr =map(h,5,12,179,160);
        skyg =map(h,0,12,198,120);
        skyb =map(h,0,4,255,153);
    }
    fill(skyr,skyg,skyb);
    
    if (cols ==0) {
        text("Time to take a Break!", width/2,height/2);
    }
    for (var col = 1; col <= cols; col++){
        for (var row = 1; row <= rows; row++){
            ellipse((width/6)*row,(height/10)*col,s,mils/100)
        }
    }
}

function drawBackground(h){
    var skyr;
    var skyg;
    var skyb;
    if (hour() < 12) { //after noon
        skyr =map(h,5,12,0,179);
        skyg =map(h,0,12,38,198);
        skyb =map(h,0,4,153,255);
    } else { //after midnight
        skyr =map(h,5,12,179,160);
        skyg =map(h,0,12,198,120);
        skyb =map(h,0,4,255,153);
    }
    background(skyr,skyg,skyb);
}

function whatTimeIsIt(h,m,s,mils){
    var APM = ""; //determine if it is AM or PM
    if (hour()>=12){
        APM = "PM";
    } else{
        APM = "AM";
    }
    if (h == 0) {
        h=12;
    }
    var time = (str(h)+ ":" +str(m)+ ":" +str(s)+ ":" +str(mils)+ " " +APM); 
    textSize(25);
    textAlign(CENTER);
    fill(0);
    text(time, width/2,height/15);
}

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);
        
    }

    
}