La typographie

La syntaxe pour afficher un texte est très simple un processing. On utilise une fonction qui a trois arguments

  • Le texte à afficher
  • La position du texte à afficher en abscisse
  • la position du texte à afficher en ordonnées

par exemple, pour afficher "mon joli texte" au milieu de la page, on utilisera 

text("mon joli texte",width/2,height/2);

Un paramètre important à fixer est la taille du texte. On peut la changer à tout moment. Ici, on l'a fixé dans la fonction setup(), en utilisant la commande textSize() qui prend un seul paramètre : la taille de la police à utiliser en pixels. 

textSize(30);

On constate cependant tout de suite un problème : on voulait placer notre texte au centre de la page, mais c'est le début du texte qui est centré. On peut choisir à quel zone du texte correspondent les coordonnées données en paramètre à la fonction text en fixant le positionnement grâce à une autre fonction : textAlign(). Cette fonction prend un ou deux arguments.

  • Le premier fixe l'alignement horizontal. Il peut prendre les valeurs suivantes :
    • LEFT : le texte est aligné à gauche (c'est le comportement par défaut)
    • CENTER : le texte est centré
    • RIGHT : le texte est aligné à droite
  • Le second argument est optionnel. Il permet de fixer l'alignement vertical et peut prendre les valeurs suivantes :
    • TOP : le texte est aligné sur le haut
    • BOTTOM : le texte est aligné sur le bas
    • CENTER : le texte est centré verticalement
    • BASELINE (valeur par défaut) : le text est aligné verticalement pour que l'ordonnée corresponde à la ligne de base de l'écriture (celle ou repose les m et les n, pas celle ou descendent les p,j et autres lettres descendantes)

On pourra donc avoir le type de syntaxe suivant qui correspondent au comportement par défaut : 

textAlign(LEFT);// horizontalement seulement
textAlign(LEFT,BASELINE);//Alignement horizontal et vertical
Éditeur
À faire vous même.

Voici une première partie du travail à faire pour bien comprendre les paramètres de texAlign. Dans l'exemple, on place un "gros point" au point de coordonnée (width/2,height/2), c'est à dire le milieu. C'est par rapport à lui que le texte est placé. On trace aussi deux lignes pour bien voir l'alignement par rapport à ce point.

  • Insérez dans la fonction setup un appel à textAlign en mettant l'alignement à gauche puis exécutez. Comment le texte et le point sont ils positionnés l'un l'autre ?
  • Faites la même chose avec CENTER et RIGHT. Comment sont positionnés le point et le texte l'un par rapport à l'autre ?
  • On recommence mais en faisant aussi un alignement vertical. On va donc appeler textAlign avec deux paramètres. On positionnera l'alignement horizontal à LEFT, et pour l'alignement horizontal, vous essayerez les quatres possibilités (TOP, BOTTOM, CENTER et BASELINE). À chaque fois, exécutez pour bien voir la position par rapport au point central.

Maintenant, on va placer du texte dans les quatres coins de notre canevas. Commençons par le coin en haut à gauche.

  • Quelles sont les coordonnées du coin en haut à gauche ?
  • Le texte devra t'il être à gauche ou à droite du bord ? Du coup, comment doit on faire l'alignement ?
  • Le texte devra t'il être au dessus ou en dessous du bord ? Du coup, comment doit on faire l'alignement vertical ?
  • Placer le texte "coin haut gauche" dans le coin en haut à gauche.

Passons maintenant aux quatres coins et au centre ... Essayez maintenant d'écrire 5 textes différents en les plaçant :

  • dans les quatres coins du canevas
  • et au centre

il faudra faire plusieurs appels à la fonction textAlign();

Pour finir, on peut essayer les petites améliorations suivantes :

  • couleurs Modifiez l'exemple précédent pour chacun de ces 5 textes ait une taille et une couleur différente.
  • On va reprendre maintenant un seul texte à afficher ("je tombe"), mais on va le faire tomber à travers l'écran. Il faudra pour cela rajouter au moins une variable pour l'ordonnée du texte.
  • difficile Même chose, mais maintenant, au fur et à mesure que le texte tombe, sa couleur passe du blanc quand il est en haut au bleu quand il arrive en bas.