Scorrere del tempo: secondi

Grazie ad alcune funzioni di p5.js è possibile ottenere facilmente l'ora e il giorno correnti e usarli per determinare le proprietà geometriche o cromatiche delle forme.

// height=100 lines=auto
let angoloTacca = 0.10471975511965977;  // TWO_PI / 60;

function draw() {
    background(220);

    let angoloSecondi = second() * angoloTacca;

    translate( 50,50 );
    rotate( angoloSecondi );

    line( 0,0, 0,-50 );
}

let angoloTacca = 0.10471975511965977;  // TWO_PI / 60;

Angolo corrispondente all'estensione di ognuna delle 60 tacche degli orologi.

let angoloSecondi = second() * angoloTacca;

Angolo della lancetta corrispondente al numero corrente di secondi (da 0 a 59).

line( 0,0, 0,-50 );

La direzione della lancetta è sempre quella delle 12:00 (dal centro verso l'alto) perché l'orientamento viene impostato attraverso l'istruzione rotate().

Creare anche la lancetta dei minuti usando la funzione minute(). Per evitare di sommare le traslazioni e le rotazioni si consiglia l'uso delle istruzioni push() e pop().

Nell'assegnazione del valore di angoloTacca non è stata usata direttamente la costante TWO_PI perché questa, fuori dalle funzioni, potrebbe non essere stata ancora definita da p5.js. In alternativa si sarebbe potuto assegnare il valore nel setup():

let angoloTacca;
function setup() {
    angoloTacca = TWO_PI / 60;
}

Approfondimenti: