Code B1

Appearance

Créez une horloge ​

P5js et Processing ont tous deux plusieurs fonctions liées au temps et permettant de récupérer en temps réel l'heure ( hour() ), la minute ( minute() ), la seconde ( second() ) et la milliseconde ( millis() ).

A partir de là, vous pouvez tout imaginer pour créer une sorte d'horloge pour visualiser le temps qui passe d'une façon inédite. Cela peut-être créer un sketch purement visuel, ou manipuler les valeurs numériques (ce que renvoient ces fonctions) pour brouiller les pistes, jouer avec les fuseaux (décalage) horaires, etc..

Vous trouverez ci-dessous un code d'exemple (qui n'est certainement pas un modèle) avec ces différentes fonctions.

javascript
function setup() {
  createCanvas(800,600);
  noStroke();
}

function draw() {
  background(0, 122, 142);
  fill(76, 165, 71);
  rect(0,0,hour()*(width/24),height/3);
  fill(61, 121, 87);
  rect(0,height/3,minute()*(width/60),height/3);
  fill(64, 94, 104);
  rect(0,2*(height/3),second()*(width/60),height/3);
}

Quelques liens ​