Code B3

Appearance

Return to top
On this page

Exercice - Web clocks

Exercice - Web clocks

Cet exercice fait usage de différents éléments autour de l'usage d'un fichier JSON. Ce type de fichier fait office de petite base de données pour notre page, comme on peut d'ailleurs le faire avec un fichier CSV également..

1. Canvas clock

P5js comprend quelques fonctions 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, etc..

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

Exemple (pas un modèle)

javascript
function setup() {
  createCanvas(windowWidth,windowHeight); // mais pourrait aussi être 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);
}

2. Web clock

Maintenant que vous avez compris le principe et créé quelque chose d'intéressant en utilisant la balise canvas, vous pouvez vous lancer dans la conception d'une web clock.

Il s'agit, toujours en utilisant ces valeurs numériques mises à notre disposition, de visualiser le temps en manipulant les éléments HTML eux-mêmes à l'aide de CSS et JS (display, taille, couleurs, positions, filtres, etc..)

Liens divers