PROJECT-06 (clock)

// SEAN CHEN
// 15-104 A

function setup() {
    createCanvas(600, 600);
    background(255);
}

function randomizer() { // giving the design "chaos"
    var diff = dist(width/2, height/2, mouseX, mouseY);
    if (diff > 25) {
        // more random shifting based on dist from center to mouse
        var chaos = random(-1, 1) * (diff-25)/25;
    } else {
        var chaos = random(-1, 1) * 0.175; // mini shifts for "texture"
    }
    return chaos;
}

function border() { // border ring including seconds hand
    textAlign(CENTER, BOTTOM);
    for (var i = 0; i < 60; i++) {
        push();
        textSize(9);
        if (second() == i) { // if second matches rotation, display sec location
            rotate(radians(6*i+randomizer()));
            textStyle(ITALIC);
            textStyle(BOLD);
            textAlign(LEFT, CENTER);
            rotate(radians(-90)); 
            text(' second ' + second(), 250+randomizer(), 0);
        } else { // say border otherwise
            rotate(radians(6*i+randomizer()));
            text('border', 0, -250+randomizer());
        }
        pop();
    }

}

function face() { // clock face
    push();
    textAlign(CENTER, BOTTOM);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    fill(color(constrain(200-diff, 0, 200)));
    for (var thick = 0; thick < 25; thick++){
        for (var i = 0; i < 60; i++) {
            push();
            rotate(radians(6*i));
            textSize(9);
            text('face', 0, -10*(thick+randomizer()));
            pop();
        }
    }
    pop();
}

function minHand() { // minute hand
    push();
    rotate(radians(6*minute()+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('minute', 30*num+20, 0);
        } else {
            text('minute '+ minute(), 30*num+20, 0);
        }
        pop();
    }
    pop();
}

function hrHand() { // hour hand
    var hr;
    if (hour() > 12) { // convert 24 hr to 12 hr
        hr = hour()-12;
    } else {
        hr = hour();
    }
    push();
    rotate(radians(30*hr+randomizer()));
    textSize(9);
    textStyle(ITALIC);
    textStyle(BOLD);
    textAlign(LEFT, CENTER);
    for (var num = 0; num < 7; num++) { // length of hand
        push();
        rotate(radians(-90+randomizer()));
        if (num < 6) {
            text('hour', 20*num+20, 0);
        } else {
            text('hour '+hr, 20*num+20, 0);
        }
        pop();
    }
    pop();
}

function logo() { // how to operate clock
    push();
    strokeWeight(2);
    var diff = dist(width/2, height/2, mouseX, mouseY);
    ellipse(mouseX, mouseY, 5*diff/10, 2.5*diff/10);
    textStyle(ITALIC);
    textAlign(CENTER, CENTER);
    textSize(8*diff/100);
    text('clock', mouseX, mouseY);
    textSize(3*diff/100);
    textAlign(CENTER, CENTER);
    text('\n(move to stablize)', mouseX, mouseY+7);
    pop();
}

function draw() {
    background(255);
    push();
    translate(width/2+randomizer(), height/2+randomizer()); 
    border();
    face();
    minHand();
    hrHand();
    pop();
    logo();
}