Project 6: Abstract Clock

abstract clock

/*Emma Shi
Section B
eyshi@andrew.cmu.edu
Project 6
*/

function setup() {
    createCanvas(700, 300);
}

function draw() {
    background(0);

    var s = second();
    var m = minute();
    var h = hour();
    var space = 40;
    var startX = 5;
    var leftballX = 40;
    var leftballY = 240;
    var frameY = height/3.75
    var endX = 695;
    var rightballX = 660;
    var rightballY = 240;
    var outsideL = 270;
    var hballL = 240;
    var sballL = 190;
    var mballL = 215;
    var dir = 1;
    var speed = 3;
    var angle = 30;


    stroke(255);
    strokeWeight(4);
    line(startX, 5, endX, 5);//top border line

    for (var i = 1; i < 25; i++) {
        stroke(255);
        strokeWeight(1);
        line((i*25)+space, 5, (i*25)+space, hballL);//draws 24 lines connecting to balls

        if (h == i) {
        fill("blue");
        } else {
            fill(255);//fills the ball corrresponding to the hour as blue
        }
        noStroke();
        ellipse((i*25)+space, hballL, 15, 15); //draws 24 balls to represent 24 hours
    }

    for (var a = 1; a < 61; a++) {
        stroke(255);
        strokeWeight(1);
        line((a*11.6)-5, 5, (a*11.6)-5, mballL); //draws 60 lines connecting to balls

        if (m == a) {
            fill("green");
        } else {
            fill(255);//fills ball corresponding to minute as green
        }
        noStroke();
        ellipse((a*11.6)-5, mballL, 10, 10);//draws 60 balls to represent 60 minutes 
    }

    for (var b = 1; b < 61; b++) {
        stroke(255);
        strokeWeight(1);
        line((b*11.6)-5, 5, (b*11.6)-5, sballL);//draws 60 lines connecting to balls

        if (s == b) {
            fill("pink");
        } else {
            fill(255);//fills ball corresponding to second as pink
        }
        noStroke();
        ellipse((b*11.6)-5, sballL, 10, 10);//draws 60 balls to represent 60 seconds
    }
}

I originally had the idea to make a Newton’s cradle, with a colored ball within representing the hour in a 24-hour span, the outside ball bounces representing seconds, and the changing color of the bouncing balls representing minutes. Unfortunately, this idea did not pan out, but I nonetheless used the same sort of structure as the cradle and used sets of circles’ and having one circle in each set be a different color to make it easy for a viewer to tell time. The bottom row of circles represents the hour in a 24 span; the middle row of circles represents minutes in a 60 minute span, and the top row of circles represents seconds in a 60 second span.