Project 06: Abstract-Clock

function setup() {
    createCanvas(350, 350);
    background(173, 216, 230);
}

function draw() {
    background(173, 216, 230);
    hoursBackground();
    minutesCircle();
    secondsCircle();
}

function hoursBackground() { //creates pink rectangles every hour
    push();
    for(var i = 0; i < hour(); i++) {
        strokeWeight(0.1);
        fill(243, 196, 207);
        rect(0,0, width/24, height);
        translate(width/24,0);
    }
    pop();
}

function minutesCircle() { //every minute, a new ray appears coming out of the inner circle
    push();
    strokeWeight(11);
    translate(width/2, height/2);
    for (var i = 0; i < minute(); i ++) {
        angleMode(DEGREES);
        if(i % 2 == 0) { //if i mod 2 is 0, then a short yellow line is drawn
            stroke(253, 253, 150, 200);
            line(0,0, 0, -100);
            rotate(6);
        }else{ // else a long orange line is drawn
            stroke(255, 179, 71, 200);
            line(0,0, 0, -125);
            rotate(6);
        }   
    }
    pop();
}

function secondsCircle() {
        fill(173, 216, 230); //creates inner blue circle
        strokeWeight(0.1);
        circle(width/2, height/2, 40);

        strokeWeight(10); //creates outer white circle that counts 60 seconds in a minute
        stroke(255);
        noFill();
        arc(width/2, height/2, 250, 250, 270, 270 + second()*6);

        strokeWeight(1); // creates inner circle that visually shows every second
        fill(255);
        arc(width/2, height/2, 30, 30, 270, 270 + millis()*0.36);
}