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);