Exemple 6 : tramer du texte avec PGraphics

Le tutoriel précédent utilisait PGraphics. On va s’intéresser un peu plus à ce jeu de fonctions, qui permettent de créer des images avec du code, sans fichier préexistant.

Précédent | 11/15 | Suivant

PImage et PGraphics
PImage, on l’a vu, permet de charger une image depuis un fichier. On crée un espace dans la mémoire vive, puis on y charge le contenu d’une image depuis le disque dur ou le réseau.

PGraphics est un objet différent. Il permet de créer une image vide qu’on va ensuite pourvoir remplir d’éléments graphiques : lignes, points, rectangles, mais aussi des images ou du texte.

Un premier exemple :

void setup(){
 size(600,400);
}

void draw(){
 background(255);
 // créer l'élément
 PGraphics uneimage=createGraphics(500,300);
 
 uneimage.beginDraw(); // démarrer les modifications
 uneimage.background(255,255,0);
 uneimage.line(0,0,500,500);
 uneimage.endDraw(); // fin des modifications
 
 // afficher l'image
 image(uneimage,50,50);

 // sauver l'image
 uneimage.save("truc.jpg");
}

Ce code donne ceci :

Comme on le voit sur cet exemple, on crée une variable d’un type particulier "PGraphics", et on doit spécifier lors de sa création sa taille en pixels. Ici, 500 sur 300 pixels.
Pour modifier l’image, il faut d’abord l’ouvrir à l’édition par la commande beginDraw(). Chaque vois que je m’adresse à l’image, je spécifie d’abord son nom, et je lui associe la commande choisie.
Après avoir ouvert l’image à l’édition, je lui place un fond jaune, puis j’y dessine une ligne avant de refermer le fichier avec endDraw().
On peut placer toutes les commandes graphiques déjà vues par ce moyen : ellipse, fill, stroke, etc.
Il ne faut pas oublier de refermer le fichier, sans quoi on ne peut pas afficher l’image.

Ecrire dans PGraphics

Ecrire dans PGraphics suit la même logique : on va charger une police dans le script, la choisir et écrire un texte comme ceci :

PFont mapolice1;

void setup() {
 size(600, 400);
 mapolice1=createFont("Montserrat-Bold", 20);
}

void draw() {
 background(255);
 // créer l'élément
 PGraphics uneimage=createGraphics(500, 300);
 uneimage.beginDraw(); // démarrer les modifications
 uneimage.fill(0);
 uneimage.textFont(mapolice1, 110);
 uneimage.text("Waow",20,150);
 uneimage.endDraw(); // fin des modifications

 // afficher l'image
 image(uneimage, 50, 50);
 
 // sauver l'image
 uneimage.save("truc.jpg");
}

Passez le texte-image dans la fonction de tramage

Une fois que ce texte est devenu une image, il peut être manipulé comme n’importe quelle image. Dans notre cas, on peut tramer cette image avec la fonction image_sample() présentée dans le tutoriel précédent, légèrement modifiée pour l’occasion.

Le script complet :

PFont mapolice1;

void setup() {
 size(700, 400);
 mapolice1=createFont("Montserrat-Bold", 20);
}

void draw() {
 background(255);
 // créer l'élément
 PGraphics uneimage=createGraphics(600, 180);
 uneimage.beginDraw(); // démarrer les modifications
 uneimage.background(255); // un fond blanc, nécessaire
 uneimage.fill(0);
 uneimage.textAlign(CENTER,CENTER);
 uneimage.textFont(mapolice1, 170);
 uneimage.text("Waow",300,70);
 uneimage.endDraw(); // fin des modifications
 
 tramer_image(uneimage, 20, 20, 8,8);
 
 image(uneimage,20,200);
 
 // sauver l'image
 saveFrame("test-###.jpg");
 
 noLoop();
}

void tramer_image(PImage sample, int x, int y,int pixx, int pixy) {
 pushMatrix();
 translate(x, y);
 // dessiner la grille avec un double boucle
 for (float gx=0; gx<sample.width; gx+=pixx) {
   for (float gy=0; gy<sample.height; gy+=pixy) {
     color c=sample.get(int(gx), int(gy));
     // faire quelque chose avec la couleur ici
     stroke(c);
     line(gx,gy,gx+pixx,gy+pixy);
   }
 }
 popMatrix();
}

Une variante avec un filtre sur l’image

En utilisant la fonction filter(), on peut modifier l’image, comme ici la flouter.

 // flouter
 uneimage.filter(BLUR, 6);
 tramer_image(uneimage, 20, 20, 8,8);