A › 10 - Images I : affichage et teinte

Afficher une image

Processing comporte une classe (terme qui sera précisé ultérieurement) nommée PImage, qui permet de charger et afficher une image matricielle dans la fenêtre, et d'accéder aux pixels qui composent cette image.

  • Première étape : enregistrer l'image dans le dossier "data" lié au programme par le menu Sketch >> add file, puis choisir l'adresse du fichier image à importer. Les formats acceptés sont GIF, JPG, TGA, PNG.
  • Deuxième étape : déclarer une variable (image) de type PImage. Cette déclaration est à réaliser hors du setup() et du draw().

    PImage nomDeLImage;

  • Troisième étape : charger l'image enregistrée dans le dossier "data" dans la variable de type PImage, grâce à la fonction loadImage(nomDuFichierImage.format). Cette étape, qui n'est réalisée qu'une fois, peut être réalisée dans le setup().

    nomDeLImage = loadImage(nomDuFichierImage.format)

  • Quatrième étape : afficher l'image dans la fenêtre de tracé, grâce à la fonction image(nomDeLImage,x,y) où x et y sont les coordonnées du coin supérieur gauche de l'image.

    image(nomDeLImage,x,y)

Un exemple ?

// étape 1 : enregistrer l'image dans le dossier data du programme en cours. (image utilisée)

PImage monImage; // étape 2 : déclaration d'un objet de type PImage

void setup(){

  size(250,250); // la taille est ici plus grande que celle de l'image

  background(40, 135, 216); // fond bleu

  monImage = loadImage("reseau.jpg");// étape 3 : chargement de l'image, de taille 200 pixels sur 200

}

void draw(){

  image(monImage,25, 25);// étape 4 : affichage de l'image

}

La fonction image() permet de spécifier la dimension de l'image affichée grâce à la syntaxe image(nomDeLImage,x,y,largeur,hauteur)

PImage monImage;

void setup(){

  size(250,250);

  background(40, 135, 216); // fond bleu

  monImage = loadImage("reseau.jpg");

}

void draw(){

  image(monImage, 25, 25, 100, 100); // affichage de l'image avec une taille 100x100

  image(monImage, 135, 35, 80, 80); // affichage de l'image avec une taille 80x80

  image(monImage, 50, 130, 150, 100); // affichage de l'image avec une taille 150x100

}

Teinter une image

On peut teinter une image affichée à l'aide de la fonction tint().

Cette fonction admet divers types de paramètres :

  • tint(gris) où gris est un niveau de gris entre 0 et 255,
  • tint(rouge,vert,bleu) où chaque paramètre est compris entre 0 et 255,
  • tint(gris,alpha) où chaque paramètre est compris entre 0 et 255, le paramètre alpha réglant le niveau de transparence,
  • tint(rouge,vert,bleu,alpha) où chaque paramètre est compris entre 0 et 255, le paramètre alpha réglant le niveau de transparence.

L'effet de tint() est annulé par la fonction sans paramètre noTint().

PImage monImage;

void setup(){

  size(250,250);

  background(255); // fond blanc

  monImage = loadImage("reseau.jpg");

  noLoop();

}

void draw(){

tint(50,150,55) ; // teinte verte

  image(monImage,25, 25, 100, 100);

  tint(50,150,55,170); // teinte verte avec transparence

  image(monImage,125, 25, 100, 100);

  tint(255,120); // couleurs d'origine avec transparence

  image(monImage,25, 125, 100, 100);

  noTint(); // annulation de l'effet de tint()

  image(monImage, 125, 125, 100, 100);

}