Clock Project

var fall;
var spring;
var winter;
var summer;

function setup() {
    createCanvas(480, 480);
    angleMode(DEGREES);
    textAlign(CENTER);
    rectMode(CENTER);
    fall = {r1:108, g1:12, b1:12, 
            r2:75, g2:28, b2:0, 
            r3:189, g3:81, b3:19};
    winter = {r1:253, g1:249, b1:231, 
            r2:202, g2:213, b2:255, 
            r3:21, g3:54, b3:186};
    spring = {r1:177, g1:244, b1:249, 
            r2:253, g2:217, b2:73, 
            r3:255, g3:204, b3:255};
    summer = {r1:123, g1:227, b1:243, 
            r2:255, g2:145, b2:145, 
            r3:250, g3:244, b3:228};
}

function draw() {
    background(220);
    translate(240, 240);
    date();
    rotate(-90);

    let hr = hour();
    let mn = minute();
    let sc = second();

    strokeWeight(30);
    noFill();

    if (m==3 || m==4 || m==5) {
        secondscircle(sc, spring);
        minutescircle(mn, spring);
        hourscircle(hr, spring);
    }
    else if (m==6 || m==7 || m==8) {
        secondscircle(sc, summer);
        minutescircle(mn, summer);
        hourscircle(hr, summer);
    }
    else if (m==9 || m==10 || m==11) {
        secondscircle(sc, fall);
        minutescircle(mn, fall);
        hourscircle(hr, fall);
    }
    else {
        secondscircle(sc, winter);
        minutescircle(mn, winter);
        hourscircle(hr, winter);
    }

}
function date() {
    stroke(0);
    strokeWeight(9);
    fill(255);
    rect(0,0, width/2,height/3,20);
    m = month();
    d = day();
    y = year();
    textSize(50);
    fill(0);
    strokeWeight(1);
    stroke(0);
    textFont('Orbitron')
    text(m + '.' + d + '.' + y, 0,15);

}

function secondscircle(sc, coloring) {
    stroke(coloring.r1,coloring.g1,coloring.b1);
    let secondsAngle = map(sc, 0, 60, 0, 360);
    arc(0, 0, 450, 450, 0, secondsAngle);
}

function minutescircle(mn, coloring) {
    stroke(coloring.r2,coloring.g2,coloring.b2);
    let minutesAngle = map(mn, 0, 60, 0, 360);
    arc(0, 0, 385, 385, 0, minutesAngle);
}

function hourscircle(hr, coloring) {
    stroke(coloring.r3,coloring.g3,coloring.b3);
    let hoursAngle = map(hr % 24, 0, 24, 0, 360);
    arc(0, 0, 320, 320, 0, hoursAngle);
}