SOURCE

let hy = 0 , ch = 0 , rectHeight = 20 , margin = 20 , customHour = false;

function setup() {
  createCanvas(600, 220);
  noStroke();
  ch = hour();
  frameRate(1);
}

function mouseClicked(){
    if(mouseY >= hy && mouseY <= hy + rectHeight){
        ch = floor(mouseX / (width / 24));
        customHour = true;
        redraw();
    }else{
        customHour = false;
    }
}

function mouseMoved(){
    if(mouseY >= hy && mouseY <= hy + rectHeight){
        cursor('pointer');
    }else{
        cursor('auto');
    }
}

function draw() {

    let m = minute() , s = second() , 
    bgColor = lerpColor(color('white') , color('black') , abs((ch - 12) / 12));

    background(bgColor);

    if(customHour == false){
        ch = hour();
    }

    let centerY = height / 2 - rectHeight / 2 + 50;
    let colors = ['red' , 'green' , 'blue'];
    let dates = [ch , m , s];
    let ds = [(ch + 1) / 24 , (m + 1) / 60 , (s + 1) / 60];
    let lineds = [24 , 60 , 60];

    if(ch < 18 && ch > 5){

        let radius = 60 , x = width / 12 * (ch - 6) + radius / 2 , y = 50;

        fill(color(255 , 215 , 0));
        circle(x , y , radius);

        for(let i = 0; i < 12; i++){

            let angle = i * 30 * (PI / 180);

            let x1 = x + sin(angle) * radius / 2;
            let y1 = y + cos(angle) * radius / 2;

            let x2 = x + sin(angle) * (radius / 2 + 10);
            let y2 = y + cos(angle) * (radius / 2 + 10);
            stroke(color(255 , 215 , 0));
            line(x1 , y1 , x2 , y2);
        }

    }else{
        let x = map(abs((ch < 6 ? ch + 6 : ch + 6 - 24) / 12) , 0 , 1 , 0 , width) , y = 50 , radius = 60;
        fill(color(255 , 215 , 0));
        circle(x , y , radius);
        fill(bgColor);
        noStroke();
        circle(x + 30 , y , radius - 10)
    }

    for(let i = 0; i < 3; i++){

        let y = centerY + (i - 1) * (margin + rectHeight);

        if(i == 0){
            hy = y;
        }

        fill('#f5f5f5')
        rect(0 , y , width , rectHeight);

        fill(colors[i]);
        rect(0 , y , width * ds[i] , rectHeight);

        let iw = width / lineds[i];

        for(let j = 0; j <= lineds[i]; j++){
            
            if(j <= dates[i]){
                stroke('#ddd');
                fill('white');
            }else{
                fill('red');
                stroke(126);
            }
            if(i == 0){
                line(iw * j , y + 1 , iw * j , y + rectHeight - 1);
                textSize(12);
                let textW = textWidth(j);
                text(j, iw * j + (iw - textW) / 2, y + (20 - 6));
            }else{
                if(j % 5 == 0){
                    textSize(12);
                    let textW = textWidth(j);
                    text(j, iw * j - (j > 0 ? textW : 0), y - 3);
                    line(iw * j , y + 1 , iw * j , y + rectHeight - 1);
                }else{
                    line(iw * j , y + 10 , iw * j , y + rectHeight - 1);
                }
            }
        }


    }
   

}

* {
  margin: 0px;
}
body{
    padding: 10px;
}
canvas{
    border: 1px solid red;
}