Le dernier blog

Processing, quinzième cours

Avant-dernière leçon de cette initiation progressive, parlons à présent de la manipulation des textes. Ce que Processing propose en la matière est plutôt sommaire et nous en feront vite le tour.
Pour écrire du texte dans Processing, il faut commencer par choisir dans quelle police de caractère et dans quel corps on souhaite l’écrire, car notre logiciel ne sait pas manipuler le texte autrement.
La première étape est de « rastériser »¹ la typographie que l’on veut utiliser, et pour ça, un peu comme avec les images que nous devions importer, nous devons demander à Processing de « créer » la typo, depuis le menu « tools ».

Le mot « créer » n’est pas un abus car Processing va fabriquer une police de caractères à son propre format (le format vlw) à partir de celle qui est chargée dans le système. Cette police sera une police « bitmap », c’est à dire non vectorielle, inadaptée aux changements d’échelle et aux déformations.
Lorsque l’on demande à « créer la police », une fenêtre apparaît et nous montre les typographies actuellement utilisées par le système. Il faut en sélectionner une et régler quelques options : le corps d’affichage, le lissage, l’étendue du nombre de caractères. Cette dernière option (all characters) doit toujours être cochée pour les systèmes non-anglophones. En effet, à défaut, des caractères aussi familiers que é, ç, à, è ou ù ne pourront être utilisés.

Lorsque la typographie a été « créée » par Processing, elle est enregistrée dans le sous-dossier « data » du dossier de l’animation (sous-dossier dont on peut vérifier le contenu avec la commande Sketch>Show sketch folder). Il faut « créer » autant de typographies que l’on en aura beson.
Une fois les typographies « créées », on les manipule de cette manière :

size(530,80); // réglage de la taille de la fenêtre
fill(255); // La couleur de remplissage (et des textes) est le blanc
background(0);  // la fenêtre est "peinte" en noir
PFont maTypo = loadFont("DejaVuSerif-64.vlw"); // choix de la typo
textFont(maTypo, 64);  // Définition de la taille de la typo
text("Le dernier blog",12,58); // écriture d'un texte

Les trois premières commandes vous seront familières. On notera juste au passage que la commande fill(), qui sert à définir la couleur des remplissages de formes, est aussi la couleur qui sert à définir le remplissage des textes dessinés.
La ligne PFont maTypo = loadFont("DejaVuSerif-64.vlw"); sert à créer une variable de type PFont (Processing font) nommé maTypo (nom arbitraire, nous aurions aussi bien pu l’appeler « dejaVuTypo » ou « rhododendron« . Cette variable sert à charger la typographie créée précédemment, de cette manière : loadFont(nom_de_la_typo).
Dans la ligne suivante, nous réglons la taille d’affichage (ici,64) qui doit être affectée à la typo maTypo.
Pour finir, nous écrivons une chaine de caractères à la position (12,58) avec la commande text(), qui se rédige ainsi : text("chaine de caractères à écrire", x, y);
Voici le résultat :

Si nous décidons de régler la taille des caractères sur une autre valeur que celle qui correspond à la police créee, le résultat n’est pas forcément bon. L’exemple qui suit est basé sur le même programme que le précédent, à ceci près que la taille de la police de caractères est 200. On voit nettement que l’agrandissement non-vectoriel de la typo ne flatte pas l’effet de lissage.
La commande utilisée  pour régler la taille des lettres est textFont(maTypo, 200);

Notons qu’il serait possible d’utiliser une typo chargée à la volée, sans l’enregistrer, avec la commande createFont().

size(530,80);fill(255);background(128,0,0);
PFont maTypo = createFont("arial",60);
textFont(maTypo, 60);
text("Le dernier blog",0,54);
save("first_pfont3.png");

Ici j’utilise donc la typo « arial » en corps 60. Le nom donné (« arial ») est le nom sous lequel le système désigne la typo. Cette typographie est extrêmement répandue et je ne cours pas tellement le risque qu’elle soit absente du système. Pour connaître la liste des typos présentes sur le système, on utilise la méthode PFont.list(), qui renvoie une liste. En écrivant println (PFont.list());, je vois apparaître la liste complète des fontes du système dans la zone de texte de Processing.

J’ai rédigé un programme rapide qui parcourt toute la liste des typos disponibles et les utilises toutes.
Pour commencer, il stocke la liste dans un tableau de type String (chaîne de caractères) nommé listeDesTypos. C’est le sens de la première commande : String[] listeDesTypos = PFont.list();. Ensuite on règle la taille de la fenêtre et sa couleur. Puis, à l’aide d’une boucle itérative, nous parcourons la totalité des éléments de la liste. À chaque cycle de la boucle, on définit une variable décimale nommée taille (au hasard entre 10 et 80), et une couleur (avec un hasard limité). Puis, la typographie est créée et sélectionnée. Enfin, on écrit une chaîne de caractères à un endroit choisi au hasard sur l’écran. Cette chaîne de caractères est le nom de la typographie.

String[] listeDesTypos = PFont.list();
background(0);
size(530,530);
for(int a=0;a<listeDesTypos.length;a++){
  float taille=random(10,80);
  fill(random(30, 255),random(20,200), random(160));
  PFont matypo  = createFont(listeDesTypos[a], taille);
  textFont(matypo);
  text( listeDesTypos[a], random(-100,530),random(530));
}

Le résultat est le suivant :

Les commandes relatives à l’affichage des textes sont en assez petit nombre.
Nous avons vu

• loadFont( nom_typo ); qui permet de charger une typo précédemment enregistrée
• createFont( nom_typo, taille ); qui permet d’utiliser à la volée une typographie du système
• textFont( nom_PFont, [taille] ); qui permet de sélectionner la typo en cours et éventuellement sa taille
• text ( t, x, y ); qui permet d’afficher un texte t aux coordonnées (x,y). Le texte que l’on écrit doit être noté entre guillemets.

1. rastériser signifier « transformer en bitmap ». C’est le contraire de la vectorisation. [↩]