zhuoyinl-project 06 abstruct clock

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.