const width = 600;
const height = 600;

function setup() {
    noCursor();
    createCanvas(width, height);
    fill("#FFCC00");
    angleMode(DEGREES);
    frameRate(60);
}

function draw() {
    strokeWeight(8);
    stroke("#FFFF00");
    background("skyblue");
    translate(width / 2, height / 2);
    let a = frameCount % 30 + 1;
    for (let i = 0, n = 12; i < n; i++) {
        line(0, -60 - a * 12, 0, -80 - a * 12);
        rotate(360 / n);
    }
    circle(0, 0, 300);

    arc(-50, 0, 80, 80, -135, -45);
    arc(50, 0, 80, 80, -135, -45);
    arc(0, 0, 160, 160, 45, 135);

    for (let i = 0, n = 12; i < n; i++) {
        line(0, -130, 0, -150);
        rotate(360 / n);
    }

    strokeWeight(4);
    for (let i = 0, n = 60; i < n; i++) {
        line(0, -140, 0, -150);
        rotate(360 / n);
    }

    const now = Date.now() + 3600000 * 8;
    stroke('#000000');
    strokeWeight(6);

    push();
    let l = now % 43200000 / 43200000 * 360;
    rotate(l);
    line(0, 10, 0, -90);
    pop();

    push();
    let f = now % 3600000 / 10000;
    rotate(f);
    line(0, 10, 0, -120);
    pop();

    push();
    let d = now % 60000;
    let e = d * 6 / 1000;
    stroke('#FF0000');
    strokeWeight(2);
    rotate(e);
    line(0, 10, 0, -130);
    pop();
    
    push();
    strokeWeight(2);
    stroke('#FF0000');
    fill('#000000');
    circle(0, 0, 8);
    pop();

}


function mouseClicked() {
    print(mouseX, mouseY);
}