Matthew Erlebacher Project-06 Abstract Clock

Abstract Clock

// Matthew Erlebacher
// Section B
// merlebac@andrew.cmu.edu
// Project-06

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

function draw() {
    background(125);

    var H = hour();
    var M = minute();
    var S = second();
    // Sets up variables for time

    var mappedH = map(H, 0, 23, 20, 240);
    var mappedM = map(M, 0, 59, 0, width);
    var mappedS = map(S, 0, 59, 0, width / 2);
    // Maps time variables to different values

    fill(255);
    ellipse(width / 2, height / 2, width, height);
    // Creates giant circle in the background

    fill(75);
    rect(width / 2 - 5, 0, 10, mappedS);
    // Creates rectangle that extends downward length is connected to seconds

    fill(0);
    rect(0, height - 20, mappedM, 20);
    // Creates rectangle at the bottom extends rightward lenght is connected to minutes

    fill(0);
    ellipse(width / 2, mappedS, mappedH, mappedH);
    // Creates circle in the middle of canvas radius connected to hours

    fill(125);
    text(H, width / 2, 3 * height / 4 + 40);
    text(M, width / 2, 3 * height / 4 + 60);
    text(S, width / 2, 3 * height / 4 + 80);
    // Creates texts that list time
}

The end design was definitely very abstract. The design was a circle that lowers as each second passes. The radius of the circle increases by the hour, and there is a bar at the bottom that increases by the minute. I also included the time in text since I thought it might be unclear as to what everything meant. Originally the circle was supposed to come from the bottom, but I realized that it would be easier to implement, and it also looked better in the end. While I would have liked to make a more interesting design, I didn’t have the time since I was already struggling with arrays, and the time variables. Despite this, I enjoyed what I came up with, and its overall simplicity.