William Su – Project 06 – Abstract Clock

I used circles for time indicators. The circles “tick” larger as time passes and slowly fill the max size they could be. The background color also changes according to the time of day (morning, afternoon, evening).

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 06

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

//--------------------------
function draw() {
    background(255, 200, 200);
    noStroke();
    
    // Fetch the current time
    var H = hour();
    var M = minute();
    var S = second();
    
    // Compute the widths of the rectangles
    var mappedH = map(H, 0,23, 0,width - 50);
    var mappedM = map(M, 0,59, 0,width - 50);
    var mappedS = map(S, 0,59, 0,width - 50);

    if (H >= 6 & H <= 14) { //Change color of the background depending on time of day. (Morning, Afternoon, Evening)
      background('#87CEEB'); //morning sky blue
    } else if (H > 14 & H <= 17) {
      background('#fd5e53'); //afternoon sunset orange
    } else {
      background('black') //evening black
    }
    
    // Display the minutes and hours.
    fill('#2e2e2e');
    ellipse(width/2, height/2, mappedH, mappedH);
    fill('#ED2B33');
    ellipse(width/2, height/2, mappedM, mappedM);
    
    noFill(); //Second "hand"
    stroke(255);
    ellipse(width/2, height/2, mappedS, mappedS);
}

Leave a Reply