# Lan Wei-Project-06-Abstract Clock

``````function setup() {
createCanvas(450, 450);
stroke(255, 215, 0);
background(0);
frameRate(1);
}

function draw() {
// Fetch the current time
var H = hour();
var M = minute();
var S = second();

// HourRect
var rectHH = height/24; //height of each 'hourfloor'
var rectMH = rectHH/60; //height of each 'minutefloor'
var rectW = [100, 140, 120, 130];
for(var i = 0; i < H; i ++){
fill(25, 25, 112); //add changefulness to different floors color
var rectX = width/2 - 0.5 * rectW[i % 4]; //X coordinate of HourRect
var rectY = height -(i + 1) * rectHH; //Y coordinate of HourRect
rect(rectX, rectY, rectW[i % 4], rectHH);
}

//MinuteRect
for(var j = 0; j < M; j ++){
fill(255);
var rectX = width/2 - 0.5 * rectW[j % 4]; //X coordinate of MinuteRect
var rectY = height -(j + 1) * rectMH - H * rectHH; //Y coordinate of MinuteRect
rect(rectX, rectY, rectW[j % 4], rectMH);
//cover secondRect in every new minute
push();
fill(0);
noStroke();
rect(width/2 - 140/2, height - M * rectMH - H * rectHH - 17, 150, 17);
pop();
}

//SecondRect
for(var k = 0; k < S; k ++){
fill(150);
var heightRange = [5,14,3,8,17]; //to get random height
var widthRange = [7,5,2,8,6]; //to get random width
var gap = rectW[k % 4] / 60; // distribute second rectangles
var rectX = width/2 - 130/2 + k * gap; //X coordinate of MinuteRect
var rectY = height - M * rectMH - H * rectHH - heightRange[k % 5]; //Y coordinate of MinuteRect
rect(rectX, rectY, widthRange[k % 5], heightRange[k % 5]);
}
}
``````

In the design I try to make the clock look like a building under construction. The ‘second rectangles’ and ‘minute rectangles’ are the parts being built and the ‘hour rectangles’ are floors that are already built.