Cathy Dong-06-Abstract-Clock

sketch

/* Cathy Dong
   Section D
   yinhuid@andrew.cmu.edu
   Project: abstract clock
*/

//color scheme
var wall = '#D6C9C9';
var light = '#DDE1E4';
var dark = '#8C9A9B';
var sunset = '#D2AB99';
var coffee = '#60463E';
var table = '#2F2F2F';
var curtainC = '#CEB5A7';

//time variable
var s; //seconds
var m; //minutes
var h; //hours


//coffee cup
var cupGap = 10;
var cupWidth = 28;
var cupHeight = 60;
var coffeeHeight = 0;
var coffeeX = 10;


//curtain
var curtainHeight = 0;

//deco
var deco1X = 100;
var deco1Y = 100;
var deco1Size = 0;
var deco2X = 150;
var deco2Y = 80;
var deco2Size = 0;
var deco3X = 160;
var deco3Y = 160;
var deco3Size = 0;


function setup() {
    createCanvas(470, 480);
    background(0);


}

function draw() {
    //set time variables
    s = second();
    m = minute();
    h = hour();
    coffeeHeight = s;

    //wall & table setting
    noStroke();
    fill(wall);
    rect(0, 0, width, height);
    fill(table);
    rect(0, height - height / 5, width, height / 5);

    //call functions
    coffeeLevel();
    
    cup();
    skyColor();
    curtain();
    deco();
}

//cup outline don't change
function cup() {
    for (var i = 0; i < 12; i++) {
    stroke(0);
    strokeWeight(2);
    noFill();
    var cupX = cupGap * (i + 1) + cupWidth * i;
    var cupY = height - height / 5 - cupHeight;
    rect(cupX, cupY - 10, cupWidth, cupHeight + 10);
    }
}

// coffee level changes every second
function coffeeLevel() {
    noStroke();
    fill(coffee);
    //coffee level increase per second
    for (var j = 0; j < 12; j++) {
        var coffeeY = height - height / 5 - coffeeHeight;
        var coffeeX = cupGap * (j + 1) + cupWidth * j; 
        rect(coffeeX, coffeeY, cupWidth, coffeeHeight);   
    }
}

// sky changes color based on hours
function skyColor() {
    stroke(255);
    strokeWeight(5);
    if ((h > 6) & (h < 15)) {
        fill(light); //morning
    }
    else if ((h > 14) & (h <17)) {
        fill(sunset); //dawn
    }
    else {
        fill(dark); //night
    }
    rect(width / 5 * 3, height / 4, width / 4, height / 3);
}

//curtain height changes based on hours
function curtain() {
    stroke(0);
    strokeWeight(1);
    fill(curtainC);
    var curtainX = width / 5 * 3;
    var curtainY = height / 4;
    var curtainWidth = width / 4;
    var curtainHeight = h * 5;
    rect(curtainX, curtainY, curtainWidth, curtainHeight);
}

//decoration size changes based on minutes
//color changed based on hours (matching sky color)
function deco() {
    stroke(255);
    strokeWeight(3);
    //morning
    if ((h > 6) & (h < 15)) {
        fill(light);
    }
    //dawn
    else if ((h > 14) & (h <17)) {
        fill(sunset);
    }
    //night
    else {
        fill(dark);
    }   
    deco1Size = m * 2;
    deco2Size = m;
    deco3Size = m * 3 / 2;
    circle(deco1X, deco1Y, deco1Size);
    circle(deco2X, deco2Y, deco2Size);
    circle(deco3X, deco3Y, deco3Size);
}

The abstract clock is an animation changes based on time in the day. There will not be any repetitions anytime in the same day. The coffee levels in the cups change based on seconds. The hour decides color of the sky and decoration elements and height of the curtain, whereas decoration dimensions change based on the minute.

There are three color modes: day time as light blue, evening as dark blue, and sunset as pale orange. 7 AM to 2 PM are considered as day time, 3 PM to 4 PM are sunset, and 5 PM to 6 AM are evening.