Category: Project-06-Abstract-Clock

sketch

//xiaoying meng
//B
//xiaoyinm@andrew.cmu.edu
//Project6
var prevSec;
var millisRolloverTime;

function setup() {
    createCanvas(480, 480);
    millisRolloverTime = 0;
}

function draw() {
    background(0); 

    var H = hour();
    var M = minute();
    var S = second();
    
    if (prevSec != S) {
        millisRolloverTime = millis();
    }
    prevSec = S;
    var mils = floor(millis() - millisRolloverTime);
    
    var hourBarWidth   = map(H, 0, 23, 0, width);
    var minuteBarWidth = map(M, 0, 59, 0, width);
    var secondBarWidth = map(S, 0, 59, 0, width);
    angleMode(DEGREES);
    stroke(0);

//hour
    push();
    translate(240,20);
    rotate(hourBarWidth);
    rect(0,0,250,250);
    pop();

//minute
    push();
//vertical left
    stroke(255);
    strokeWeight(5);
    translate(0,minuteBarWidth);
    line(125,155,125,270);
    line(135,155,135,270);
    line(145,155,145,270);
    line(155,155,155,270);
    line(165,155,165,270);
    line(175,155,175,270);
    line(185,155,185,270);
//horizontal
    strokeWeight(2);
    line(190,255,350,255);
    line(190,260,350,260);
    line(190,265,350,265);
    line(190,270,350,270);
//vertical right
    strokeWeight(3);
    line(295,155,295,250);
    line(305,155,305,250);
    line(315,155,315,250);
    line(325,155,325,250);
    line(335,155,335,250);
    line(345,155,345,250);
    pop();    

    push();
    fill(205,49,27);
    translate(0,minuteBarWidth);
    rect(190,0,100,250);
    pop();

//second
    push();
//circle
    fill(0);
    translate(secondBarWidth,secondBarWidth);
    arc(0,0,150,150,120,300);
    fill(255);
    arc(0,0,150,150,300,120);
    pop(); 
//lines
    push();
    translate(secondBarWidth,secondBarWidth);
    rotate(-105);
    stroke(255);

    line(-480,-480,480,480);
    pop();

    push();
    translate(secondBarWidth,secondBarWidth);
    rotate(50);
    stroke(255);
    line(-480,-480,480,480);
    pop();
}

I decided to use abstract art as my idea for the abstract clock. As time passes, each shape representing second, minute and hour changes locations. Thus, creating, different compositions.

sketch.js

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

//--------------------------
function draw() {
    background(255);
    noStroke();
    
    // current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // widths of the rectangles
    //map(value, start1, stop1, start2, stop2, 

    var mappedH = map(H, -5,23, width,0);
    var mappedM = map(M, -5,59, width,0);
    var mappedS = map(S, -5,59, width,0);
    var rectHeight = width / 3;
    
    // rectangle time bars


//Hour
    fill (0)
    rect(0*rectHeight,0, rectHeight,width);
    fill(255);
    rect(0*rectHeight,0, rectHeight,mappedH);
//minute
    fill(50);
    rect(1*rectHeight,0, rectHeight,width);
    fill(255); //background color
    rect(1*rectHeight,0,rectHeight, mappedM);
  //second  
    fill(100);
    rect(2*rectHeight,0, rectHeight,width);
    fill(255);
    rect(2*rectHeight,0, rectHeight,mappedS); //rectangle that moves


//text
    fill(255);
    textFont('Georgia');
    text("Hour " +H, 0*rectHeight+95, mappedH +15);
    text("Minute " +M, 1*rectHeight + 95,mappedM +15 );
    text("Second " +S, 2*rectHeight +95, mappedS +15);//mapped allows the text to move with the bars
    
}

My clock was inspired by a bar graph. I used the mapped function we learned.

atreu-proj-06

/*Austin Treu
	atreu@andrew.cmu.edu
	Section B
	Project-06*/

var hSize = 80, mSize = 40, sSize = 20
    hourX = 0, hourY = 150, 
    minX = 0, minY = 250,
    secX = 0, secY = 350, 
    wProp = 0, hProp = 0, 
    wPropH = 0, hPropH = 0;

//--------------------------
function setup() {
    createCanvas(480, 480);
    wProp = width/60;
    hProp = height/60;
    wPropH = width/12;
    hPropH = height/24;
}

//--------------------------
function draw() {

    /*TEST CODE - grid for measurement
    line(30*wProp, 0, 30*wProp, height);
    line(0, 30*hProp, width, 30*hProp);
    line(15*wProp, 0, 15*wProp, height);
    line(0, 15*hProp, width, 15*hProp);
    line(45*wProp, 0, 45*wProp, height);
    line(0, 45*hProp, width, 45*hProp);*/
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
 

    //draw background, base upon time
    background((S+1)*2.125,int(255-(S+1)*2.125),255-S, (H+S)/4);

    //set current ellipse locs
    hourX = H*hPropH;
    hourY = ((pow(((hourX-width/2)),2)/16)+7*height)/16;
    minX = M*hProp;
    minY = (abs(pow((minX-height/2)/6,2)-height))/4;
    secX = S*hProp;
    secY = -(abs(pow((secX-height/2)/6,2)-height)-4*height)/4;

    //add trail lines every few seconds (pulsating effect)
    if(S%3 === 0){
		stroke(3*S,200-S, 200-S, 10);
	    strokeWeight(5);
	    for(var i = 0; i<width; i++){
	    	//H
	    	var y = -(abs(pow((i-height/2)/6,2)-height)-4*height)/4;
	    	point(i,y);
	    	//M
	    	y = (abs(pow((i-height/2)/6,2)-height))/4;
	    	point(i,y);
	    	//S
	    	y = ((pow(((i-width/2)),2)/16)+7*height)/16;
	    	point(i,y);
	    }
	    noStroke();
	}

    //draw ellipses for time
    fill('yellow');
    ellipse(hourX, hourY, hSize, hSize);
    fill(0,100,255);
    ellipse(minX, minY, mSize, mSize);
    fill(230);
    ellipse(secX, secY, sSize, sSize);
}

This clock assignment took a few different forms in my head, as I wanted to have a vague space/sky theme and also be as minimalist as possible while still getting the point across. I initially thought about utilizing orbital circles, but I ultimately decided that it would be more interesting to mess around with some other types of functions, with the ‘sun’ (hours) having a simple parabola to portray sunrise and sunset. The ‘planet’ (minutes) and ‘moon’ (seconds) actually mirror each other in their patterns, bouncing off of the bottom of the screen at 1/4 and 3/4 of the way through. This keeps things simple whilst allowing an onlooker to easily see quarter minutes and hours as well as days.