Dessiner par dessus une image avec PGraphics

Une animation comportant un dessin par dessus une image pose un problème : à chaque draw(), il faut dessiner l’image, ce qui efface le dessin accumulé lors du frame précédent. Pour contourner le problème, on dessinera dans une image en mémoire, qu’on affiche ensuite par dessus ce que l’on veut. PGraphics va nous permettre ça.

Précédent | 5/27 | Suivant

Pour ce test, vous aurez besoin d’une image, qui sera chargée puis affichée normalement dans le draw() avec la fonction image().

Parallèlement, nous créons une image dans la mémoire de l’ordinateur, et c’est dans cette image que nous allons dessiner à chaque frame, avant d’afficher le résultat par dessus notre première image. De cette manière, on garde la mémoire du dessin des frames précédents, et on peut cacher, montrer, sauver dans un fichier externe le résultat de ce dessin.

Toutes les transformations, de strokeWeight() aux opérations de dessin comme rect(), doivent se faire dans l’image en mémoire. POur cela, on commence par ouvrir l’image en écriture avec .begindraw(), puis chaque opération est précédée du nom de notre image en mémoire :
image_virtuelle.stroke(255)
permet de changer la couleur du trait dans l’image virtuelle et pas dans le draw lui-même.
Une fois les opérations terminée, on ferme l’écriture en appellant .endDraw(). L’image s’affiche comme n’importe quelle autre image matricielle, avec la fonction image().

Le code

PImage limage; // préparer une image
PGraphics image_virtuelle; // creer une image dans la mémoire

void setup(){
 size(800,600);
 // une image à la taille de l'animation
 image_virtuelle = createGraphics(width, height);
 limage=loadImage("evans.jpg");
}

void draw(){
 background(0);
 // afficher l'image en fond, appuyer sur une touche pour le fond noir
 if (keyPressed == false){
 image(limage,0,0, width,height);
 }
 // dessiner dans l'image en mémoire
 image_virtuelle.beginDraw(); // commencer
 image_virtuelle.stroke(255); // mettre en blanc
 image_virtuelle.line(pmouseX, pmouseY, mouseX,mouseY); // dessiner
 image_virtuelle.endDraw(); // fini
 image(image_virtuelle,0,0); // afficher l'image virtuelle
}