Project 06-Abstract Clock

project-06-abstractClock
/*
Lauren Kenny
lkenny@andrew.cmu.edu
Section A
Project-06

This program draws an abstract clock that changes over time.

*/

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

function draw() {
    var c=255-(hour()*10.5);
    background(c);
    var s=second();
    var m=minute();
    var h=hour();
    var mx=10;
    var sx=11;
    var hx=10;

    //draws the hours
    for (H=0; H<h; H++) {
        var y=10;
        var width=15;
        var height=50;
        var dx=18;
        fill(230, 180, 170);
        rect(hx, y, width, height);
        hx+=dx;
    }

    //draws the minutes
    for (M=0; M<m; M++) {
        var y=65;
        var width=2;
        var height=25;
        var dx=8;
        fill(250,120,120);
        rect(mx, y, width, height);
        mx+=dx;
    }

    //draws the seconds
    for (S=0; S<s; S++) {
        var y=95;
        var width=2;
        var dx=8;
        if (c>150) {
            fill(0);
        }
        else {
            fill(255);
        }
        circle(sx, y, width);
        sx+=dx;
    }  
}

For this project, I wanted to create a clock that visually showed the number of hours, minutes, and seconds. I chose to have this be a 24 hour clock as opposed to 12 hours because 12 hour clocks make no sense. To do this, I created for loops that presented n number of objects based on the number of hours/minutes/seconds. I decided that hours were most important and then minutes and then seconds so I created visual size differences to reflect that logic. Also, I wanted there to be some reflection of the natural world, so I have the background getting gradually darker with each passing hour. I found the hour(), minute(), and second() built-ins to be quite confusing, but it is quite exciting to see them actually working.

Leave a Reply