Steven Fei-06-Abstract Clock

sketch

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

var xarray =[]; // array for ink graphics according to seconds
var x1; //variables for central web form
var stepX1 = 10;// steps of the spacing of the central web form
var circleMove = 0;//blue circles movement

function draw() {
    background("black");
    
    //diagonal bars to represent the growth of every hour and the exact hour of the current time(only look at one side)
    var h = hour();
    var hLength = map(h,0,24,50,440);
    var hColor = map(h,0,24,40,160);
    
    circleMove +=1;
    for (var hz = 0; hz<h; hz++){
        stroke(133,62,hColor);//changing color of the bar
        strokeWeight(8);
        line(0+15*hz,480,0.5*hLength+15*hz-20,480-0.7*hLength+5*hz);//amount of the purple bar to represent time
        stroke(133,62,hColor);//changing color of the bar
        strokeWeight(8);
        line(480-15*hz,0,480-0.5*hLength-15*hz+20,0.7*hLength-5*hz);//amount of the purple bar to represent time
        noStroke();
        fill("blue");//moving blue circles as fun animation
        circle(0.5*hLength+15*hz+circleMove-20,480-0.7*hLength+5*hz-circleMove,5);
        if (circleMove>50){
            circleMove = 0;
        }
    }

    
    //two horizontal bars to represent the grouth of minute overtime
    var m = minute();
    var mAdjusted = map(m,0,60,30,480); //fullfill a full length when one hour passed
    var mColor = map(m,0,60,26,150);
    noStroke();
    fill(180,58,mColor);
    rect(0,50,mAdjusted,8);
    noStroke();
    fill(180,mColor,40);
    rect(480,480-8-50,-mAdjusted,8);
    //second
    if (xarray.length>=6){
        xarray.shift();
    }
    var s = second();
    //create ink-like path to represent the path of seconds
    for (var i = s-8; i<=s; i++){
        xarray.push(i);
        var colorOfCircle = map(i,s-8,s,90,255);
        var sizeOfCircle = map(i,s-8,s,5,30);//define the size of the circle
        push();
        translate(240,240);
        rotate(-PI/2);
        stroke(0);
        fill(colorOfCircle, colorOfCircle, 255);
        noStroke();
        strokeWeight(1);
        rotate(radians(6*i));//the ink like traces will move every second and fullfill a full cycle after 60s
        var px = 180 + random(-5,5);
        var py = 0 + random(-3,3);
        frameRate(9);
        circle(px,py,sizeOfCircle);
        pop();   
    }
    //changing color of the purple circle to represent the growth of a minute
    var colorOfRing0 = map(s,0,60,145,200);
    var colorOfRing1 = map(s,0,60,0,122);
    var colorOfRing2 = map(s,0,60,90,150);
    noFill();
    strokeWeight(20);
    stroke(colorOfRing0, colorOfRing1,colorOfRing2);
    circle(240,240,230);
    //slowly growing red circle
    var mil = millis();
    push();
    translate(240,240);
    frameRate(30);
    noFill();
    stroke("red");
    strokeWeight(15);
    rotate(-PI/2);
    arc(0,0,100,100,0,mil*PI/150000,OPEN); //revolving a circle every 5 min
    pop();
    
    // central rotating web-form
    //    Central White Lines
    push();
    translate(240,240);
    rotate(radians(mil*18/1000));//the web form fulfills a cycle every 20 seconds
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke("white");
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    //     Central blue lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke(109,129,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
//    central light purple lines
    rotate(radians(120));
    for(x1 = 0; x1 < 150; x1 += stepX1){
        strokeWeight(1);
        stroke(152,109,185);
        line(x1, 0, -(150-x1)*tan(radians(30)), 150-x1);
    }
    pop();
    
    
}

For this project, I tried to create an interstellar-style clock with arcs and circles cycle in different rates. The bluish ink-like path represents the current pace of the second. The two horizontal bars represent the current minute and the amount and length of diagonal bars represent the current hour. As I gained the inspiration from an hourglass, I realized that the cycle period didn’t have to be exactly a minute, or an hour. Then I created a web-like form in the center that revolves with a period of 20 seconds and the red arc with a period of 5 minutes.