Création d'une horloge avec Processing

Dans la continuité de l'article Créer une horloge dans le navigateur avec p5.js, où l'on a pu voir qu'il est possible d'utiliser des données pour créer facilement une application graphique, essayons un nouveau modèle d'horloge basé sur la rotation en utilisant cette fois-ci Processing.
Processing (disponible à l'adresse processing.org), est un logiciel et un langage de programmation créé en 2001 par deux étudiants du MIT. Basé sur le langage Java, il est adapté à l'apprentissage du code dans la perspective des arts graphiques. Processing est libre et open source. Il permet de développer des applications pour les principaux systèmes d'exploitation (Windows, Mac, GNU/Linux ou même Android).
Tout comme p5.js, Processing s'articule autour de deux parties setup() et draw(), la première n'étant lue qu'une fois au démarrage pour lancer les paramètres de l'application, la deuxième est lue en boucle et permet l'animation. Créons la base de tout programme :

void setup() {
  
}

void draw() {
  
}          

Vous pouvez tester le programme (bouton lecture) : par défaut Processing crée une fenêtre carrée de 100 pixels de côté avec un fond gris.

Le décor

Nous allons créer une fenêtre de 500 pixels de côté avec un fond gris foncé. Insérez ce code dans la partie setup() :

  size(500, 500);
  smooth(); 

et ce code dans la boucle draw() :

  background(20);

Toute l'animation se résumant à une série de rotations autour du centre de la fenêtre, modifions le point de référence (le coin haut gauche) pour le placer au milieu de notre cadre de travail. L'action doit se faire dans la boucle draw(), sinon, au premier rafraîchissement de la fenêtre, le point de référence reprendra sa position par défaut (0,0).

  translate(width/2, height/2);

Pour simplifier le positionnement, centrons tous les objets. Dans setup() :

  textAlign(CENTER);
  rectMode(CENTER);

et dessinons le rectangle qui marquera le cadre de lecture de l'heure :

  fill(220, 100, 0);
  rect(170, -4, 60, 18);

Le fond de l'animation est prêt. Faisons un point sur le code :

void setup() {
  size(500, 500);
  smooth();
  textAlign(CENTER);
  rectMode(CENTER);
}

void draw() {
  translate(width/2, height/2);
  background(20);
  noStroke();
  fill(220, 100, 0);
  rect(170, -4, 60, 18);
}

L'animation

Les paramètres de l'animation sont définis, à partir de maintenant, nous ne toucherons plus à la partie setup(). Avant le setup(), déclarons les variables dont nous aurons besoin :

int heures, minutes, secondes;
float angleHeures, angleMinutes, angleSecondes;

Comme vous l'aurez remarqué, les variables se déclarent d'une autre manière qu'avec p5. En langage Java, les variables sont typées ; on distingue les nombres entiers ("int" pour integer), les nombres flottants ("float"), mais aussi les caractères uniques ("char"), les chaînes de caractères ("String") ou des booléens ("boolean").
Pour détecter l'heure, nous utiliserons les fonctions hour(), minute() et second(). A partir de ces données, nous utiliserons la même méthode que pour l'horloge dans p5.js pour déterminer l'angle. Dans la boucle draw() :

  heures = hour();
  minutes  =minute();
  secondes = second();
  angleHeures = heures * PI/6;
  angleMinutes = minutes * PI/30;
  angleSecondes = secondes * PI/30;

Dans ce modèle d'horloge, pas d'aiguilles, ce sont des cadrans reprenant tous les nombres des heures, minutes et secondes qui se déplacent pour s'afficher dans le rectangle coloré afin d'indiquer l'heure. Pour dessiner un cadran, nous allons lancer une boucle for qui dessinera chaque nombre en appliquant une rotation de PI/30 pour les minutes et les secondes et de PI/6 pour les heures (puisqu'il y en a moins) entre chaque phase de dessin.

  textSize(12);
  fill(255);
  noStroke();
  pushMatrix();
  rotate(-angleHeures);
  for(int i = 1; i < 13; i++) {
    rotate(PI/6);
    if(i < 10) text("0" + i, 150, 0);
    else text(i, 150, 0);
  }
  popMatrix();
  pushMatrix();
  rotate(-angleMinutes);
  for(int i = 0; i < 60; i++) {
    if(i < 10) text("0" + i, 170, 0);
    else text(i, 170, 0);
    rotate(PI/30);
  }
  popMatrix();
  pushMatrix();
  rotate(-angleSecondes);
  for(int i = 0; i < 60; i++) {
    if(i < 10) text("0" + i, 190, 0);
    else text(i, 190, 0);
    rotate(PI/30);
  }
  popMatrix();

Avec un texte de taille de caractère 12, de couleur blanche, nous avons défini trois rotations distinctes - entre push() et pop() - selon l'angle calculé, pour écrire des nombres correspondant aux heures dans le cercle intérieur, aux minutes puis aux secondes dans le cercle extérieur. Pour éviter un décalage du texte si un nombre était inférieur à 10 (s'écrivant alors avec un seul caractère), une condition insère un chiffre "0" avant le nombre des heures, des minutes ou des secondes.
Voici donc le code complet de cette application Processing :

// déclaration des variables
int heures, minutes, secondes;
float angleHeures, angleMinutes, angleSecondes;

void setup() {
  size(500, 500);
  smooth();
  textAlign(CENTER);
  rectMode(CENTER);
}

void draw() {
  // placement du point de référence au milieu de la fenêtre
  translate(width/2, height/2);
  // définition de la valeur de chaque variable
  heures = hour();
  minutes = minute();
  secondes = second();
  angleHeures = heures * PI/6;
  angleMinutes = minutes * PI/30;
  angleSecondes = secondes * PI/30;
  // dessin de l'animation
  background(20);  
  fill(220, 100, 0);
  rect(170, -4, 60, 18);
  textSize(12);
  fill(255);
  noStroke();
  // cadre des heures
  pushMatrix();
  rotate(-angleHeures);
  for(int i = 1; i < 13; i++) {
    rotate(PI/6);
    if(i < 10) text("0" + i, 150, 0);
    else text(i, 150, 0);
  }
  popMatrix();
  // cadre des minutes
  pushMatrix();
  rotate(-angleMinutes);
  for(int i = 0; i < 60; i++) {
    if(i < 10) text("0" + i, 170, 0);
    else text(i, 170, 0);
    rotate(PI/30);
  }
  popMatrix();
  // cadre des secondes
  pushMatrix();
  rotate(-angleSecondes);
  for(int i = 0; i < 60; i++) {
    if(i < 10) text("0" + i, 190, 0);
    else text(i, 190, 0);
    rotate(PI/30);
  }
  popMatrix(); 
}