{"id":2962,"date":"2008-12-11T16:15:14","date_gmt":"2008-12-11T15:15:14","guid":{"rendered":"http:\/\/www.hyperbate.com\/dernier\/?p=2962"},"modified":"2013-05-07T22:57:00","modified_gmt":"2013-05-07T20:57:00","slug":"processing-quinzieme-cours","status":"publish","type":"post","link":"https:\/\/hyperbate.fr\/dernier\/?p=2962","title":{"rendered":"Processing, quinzi\u00e8me cours"},"content":{"rendered":"

Avant-derni\u00e8re le\u00e7on de cette initiation progressive, parlons \u00e0 pr\u00e9sent de la manipulation des textes. Ce que Processing propose en la mati\u00e8re est plut\u00f4t sommaire et nous en feront vite le tour.
\nPour \u00e9crire du texte dans Processing, il faut commencer par choisir dans quelle police de caract\u00e8re et dans quel corps on souhaite l’\u00e9crire, car notre logiciel ne sait pas manipuler le texte autrement.
\nLa premi\u00e8re \u00e9tape est de \u00ab\u00a0rast\u00e9riser\u00a0\u00bb1<\/a><\/sup> la typographie que l’on veut utiliser, et pour \u00e7a, un peu comme avec les images que nous devions importer, nous devons demander \u00e0 Processing de \u00ab\u00a0cr\u00e9er\u00a0\u00bb la typo, depuis le menu \u00ab\u00a0tools\u00a0\u00bb.<\/p>\n

\"\"<\/p>\n

Le mot \u00ab\u00a0cr\u00e9er\u00a0\u00bb n’est pas un abus car Processing va fabriquer une police de caract\u00e8res \u00e0 son propre format (le format vlw) \u00e0 partir de celle qui est charg\u00e9e dans le syst\u00e8me. Cette police sera une police \u00ab\u00a0bitmap\u00a0\u00bb, c’est \u00e0 dire non vectorielle, inadapt\u00e9e aux changements d’\u00e9chelle et aux d\u00e9formations.
\nLorsque l’on demande \u00e0 \u00ab\u00a0cr\u00e9er la police\u00a0\u00bb, une fen\u00eatre appara\u00eet et nous montre les typographies actuellement utilis\u00e9es par le syst\u00e8me. Il faut en s\u00e9lectionner une et r\u00e9gler quelques options : le corps d’affichage, le lissage, l’\u00e9tendue du nombre de caract\u00e8res. Cette derni\u00e8re option (all characters<\/em>) doit toujours \u00eatre coch\u00e9e pour les syst\u00e8mes non-anglophones. En effet, \u00e0 d\u00e9faut, des caract\u00e8res aussi familiers que \u00e9, \u00e7, \u00e0, \u00e8 ou \u00f9 ne pourront \u00eatre utilis\u00e9s.<\/p>\n

\"\"<\/p>\n

Lorsque la typographie a \u00e9t\u00e9 \u00ab\u00a0cr\u00e9\u00e9e\u00a0\u00bb par Processing, elle est enregistr\u00e9e dans le sous-dossier \u00ab\u00a0data\u00a0\u00bb du dossier de l’animation (sous-dossier dont on peut v\u00e9rifier le contenu avec la commande Sketch>Show sketch folder<\/em>). Il faut \u00ab\u00a0cr\u00e9er\u00a0\u00bb autant de typographies que l’on en aura beson.
\nUne fois les typographies \u00ab\u00a0cr\u00e9\u00e9es\u00a0\u00bb, on les manipule de cette mani\u00e8re :<\/p>\n

\n
size(530,80); \/\/ r\u00e9glage de la taille de la fen\u00eatre<\/span>\r\nfill(255); \/\/ La couleur de remplissage (et des textes) est le blanc<\/span>\r\nbackground(0); \u00a0\/\/ la fen\u00eatre est \"peinte\" en noir<\/span>\r\nPFont maTypo = loadFont(\"DejaVuSerif-64.vlw\"); \/\/ choix de la typo<\/span>\r\ntextFont(maTypo, 64); \u00a0\/\/ D\u00e9finition de la taille de la typo<\/span>\r\ntext(\"Le dernier blog\",12,58); \/\/ \u00e9criture d'un texte<\/span><\/pre>\n<\/div>\n
Les trois premi\u00e8res commandes vous seront famili\u00e8res. On notera juste au passage que la commande fill()<\/code>, qui sert \u00e0 d\u00e9finir la couleur des remplissages de formes, est aussi la couleur qui sert \u00e0 d\u00e9finir le remplissage des textes dessin\u00e9s.
\nLa ligne PFont maTypo = loadFont(\"DejaVuSerif-64.vlw\");<\/code> sert \u00e0 cr\u00e9er une variable de type PFont<\/code> (Processing font) nomm\u00e9 maTypo<\/code> (nom arbitraire, nous aurions aussi bien pu l’appeler \u00ab\u00a0dejaVuTypo<\/em>\u00a0\u00bb ou \u00ab\u00a0rhododendron<\/em>\u00ab\u00a0. Cette variable sert \u00e0 charger la typographie cr\u00e9\u00e9e pr\u00e9c\u00e9demment, de cette mani\u00e8re : loadFont(nom_de_la_typo<\/em>).
\nDans la ligne suivante, nous r\u00e9glons la taille d’affichage (ici,64) qui doit \u00eatre affect\u00e9e \u00e0 la typo maTypo<\/code>.
\nPour finir, nous \u00e9crivons une chaine de caract\u00e8res \u00e0 la position (12,58) avec la commande text()<\/code>, qui se r\u00e9dige ainsi : text(\"chaine de caract\u00e8res \u00e0 \u00e9crire\", x, y);
\n<\/code>Voici le r\u00e9sultat :<\/p>\n
\"\"<\/p>\n
Si nous d\u00e9cidons de r\u00e9gler la taille des caract\u00e8res sur une autre valeur que celle qui correspond \u00e0 la police cr\u00e9ee, le r\u00e9sultat n’est pas forc\u00e9ment bon. L’exemple qui suit est bas\u00e9 sur le m\u00eame programme que le pr\u00e9c\u00e9dent, \u00e0 ceci pr\u00e8s que la taille de la police de caract\u00e8res est 200. On voit nettement que l’agrandissement non-vectoriel de la typo ne flatte pas l’effet de lissage.
\nLa commande\u00a0utilis\u00e9e \u00a0pour r\u00e9gler la taille des lettres est\u00a0textFont(maTypo, 200);<\/code><\/p>\n
\"\"<\/p>\n
Notons qu’il serait possible d’utiliser une typo charg\u00e9e \u00e0 la vol\u00e9e, sans l’enregistrer, avec la commande\u00a0createFont().<\/p>\n
\n
size(530,80);fill(255);background(128,0,0);\r\nPFont maTypo = createFont(\"arial\",60);\r\ntextFont(maTypo, 60);\r\ntext(\"Le dernier blog\",0,54);\r\nsave(\"first_pfont3.png\");<\/pre>\n<\/div>\n
\"\"<\/p>\n
Ici j’utilise donc la typo \u00ab\u00a0arial\u00a0\u00bb en corps 60. Le nom donn\u00e9 (\u00ab\u00a0arial\u00a0\u00bb) est le nom sous lequel le syst\u00e8me d\u00e9signe la typo. Cette typographie est extr\u00eamement r\u00e9pandue et je ne cours pas tellement le risque qu’elle soit absente du syst\u00e8me. Pour conna\u00eetre la liste des typos pr\u00e9sentes sur le syst\u00e8me, on utilise la m\u00e9thode PFont.list(), qui renvoie une liste. En \u00e9crivant\u00a0println (PFont.list());, je vois appara\u00eetre la liste compl\u00e8te des fontes du syst\u00e8me dans la zone de texte de Processing.<\/p>\n
\"\"
\nJ’ai r\u00e9dig\u00e9 un programme rapide qui parcourt toute la liste des typos disponibles et les utilises toutes.
\nPour commencer, il stocke la liste dans un tableau de type String<\/code> (cha\u00eene de caract\u00e8res) nomm\u00e9\u00a0listeDesTypos<\/code>. C’est le sens de la premi\u00e8re commande :\u00a0String[] listeDesTypos = PFont.list();<\/code>. Ensuite on r\u00e8gle la taille de la fen\u00eatre et sa couleur. Puis, \u00e0 l’aide d’une boucle it\u00e9rative<\/a>, nous parcourons la totalit\u00e9 des \u00e9l\u00e9ments de la liste. \u00c0 chaque cycle de la boucle, on d\u00e9finit une variable d\u00e9cimale nomm\u00e9e taille (au hasard entre 10 et 80), et une couleur (avec un hasard limit\u00e9). Puis, la typographie est cr\u00e9\u00e9e et s\u00e9lectionn\u00e9e. Enfin, on \u00e9crit une cha\u00eene de caract\u00e8res \u00e0 un endroit choisi au hasard sur l’\u00e9cran. Cette cha\u00eene de caract\u00e8res est le nom de la typographie.<\/p>\n
\n
String[] listeDesTypos = PFont.list();\r\nbackground(0);\r\nsize(530,530);\r\nfor(int a=0;a<listeDesTypos.length;a++){\r\n  float taille=random(10,80);\r\n  fill(random(30, 255),random(20,200), random(160));\r\n  PFont matypo  = createFont(listeDesTypos[a], taille);\r\n  textFont(matypo);\r\n  text( listeDesTypos[a], random(-100,530),random(530));\r\n}<\/pre>\n<\/div>\n
Le r\u00e9sultat est le suivant :<\/p>\n
\"\"<\/p>\n
Les commandes relatives \u00e0 l’affichage des textes sont en assez petit nombre.
\nNous avons vu<\/p>\n