ShanWang-Project06-Abstract Clock

sketch

//Shan Wang
//Section A
//shanw1@andrew.cmu.edu
//Assignment-06-Project

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


function draw() {
    background('#E79460')
    var cX = width/2;
    var cY = height/2;
    var lX = width/2;
    var lY = height/2;
    var rX = width/2;
    var rY = height/2;
    var sX = width/2-40;
    var sY = height/2+70;
    var sec = second();
    var min = minute();
    var hr = hour()+10;
    //set intervals for different planes;
    var intT = 1;
    var intL = 5;
    var intR = 8;
    var intS = 0.7;
    //set alpha value variable
    var alphaV = 0;

    //draw base plane (black) with no outlines;
    topPlane(width*2/3-50,height*3/4,90,100,"black",false);
    leftPlane(width*2/3-50,height*3/4,90,5,'#FFB11B',false);
    rightPlane(width*2/3-50,height*3/4,5,100,'#FFC408',false);

    //draw top planes that increment every second; resets after a cycle of 60
    for (var i=0; i<sec; i++){
        topPlane(cX,cY,40,intT,'#985F2A',false)
        cX = cX + intT/cos(45);
        cY = cY - intT/cos(45);
    }

    //draw left planes that increment every minute; resets after a cycle of 60
    for (var i=0; i<min; i++){
        leftPlane(lX,lY,40,intL,"white",false);
        lY += intL;
    }

    //draw right planes that increment every hour; resets after a cycle of 24
    var len = dist(width/2,height/2,cX,cY);
    for (var i=0; i<hr; i++){
        rightPlane(rX+4, rY+8,intR,60,"red",false);
        rY += intR;
    }

    //draw edge planes that compose the three dimensional image
    leftPlane(width/2+4,height/2+8,2,intR*hr,25,false);
    topPlane(width/2+4,height/2+8,2,60,200,false);

    rightPlane(width/2,height/2,7,intT*sec,55,false);

    //draw side planes that increments every second; resets after a cycle of 60
    for (var i=0; i<sec; i++){
        var dis = min*intL-107;
        rightPlane(sX,sY,dis,intS,'#005CAF',false);
        sX -= intS/cos(45);
        sY += intS/cos(45);
    }
    //draw side plane Edge
    var edgeLen2 = intS*sec;
    topPlane(sX+intS/cos(45),sY-intS/cos(45),2,edgeLen2,45,false);
    leftPlane(sX+intS/cos(45), sY-intS/cos(45),2,dis,"black");

    //dim the background every second;
    alphaV += sec%59 * 3;
    noStroke();
    fill(0,0,0,alphaV);
    rect(0,0,width,height);

}

function topPlane (cX, cY, side1, side2, color,outline){
    var p1X = cX - side1/cos(45);
    var p1Y = cY - side1/cos(45);
    var p2X = p1X + side2/cos(45);
    var p2Y = p1Y - side2/cos(45);
    var p3X = cX + side2/cos(45);
    var p3Y = cY - side2/cos(45);
    fill(color);
    if (outline == false){
        noStroke();
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
    else{
        stroke(0);
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
}

function leftPlane (cX, cY, side1, side2,color,outline){
    var p1X = cX;
    var p1Y = cY + side2;
    var p2X = p1X - side1/cos(45);
    var p2Y = p1Y - side1/cos(45);
    var p3X = cX - side1/cos(45);
    var p3Y = cY - side1/cos(45);
    fill(color);
    if (outline == false){
        noStroke();
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
    else{
        stroke(0);
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
}

function rightPlane (cX, cY, side1, side2, color,outline){
    var p1X = cX;
    var p1Y = cY + side1;
    var p2X = p1X + side2/cos(45);
    var p2Y = p1Y - side2/cos(45);
    var p3X = cX + side2/cos(45);
    var p3Y = cY - side2/cos(45);
    fill(color);
    if (outline == false){
        noStroke();
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
    else{
        stroke(0);
        quad(cX, cY, p1X, p1Y, p2X, p2Y,p3X, p3Y);
    }
}

The inspiration for the visual style of this project came from the drawings of Theo Van Doesburg, a De Stijl artist during the 1900s.
I am interested in the idea of representing the change of time with the change of space. By extending the length size of the planes, the spatial quality of the representation changes throughout the day.
Also for legibility, I set the cycle of the dimming of the background color to be every minute.