TP 11:Introduction aux images numériques

la classe PImage

Les images numériques sont stockées dans la mémoire d'un ordinateur sous forme de fichier. Les extensions les plus connues de ces fichiers sont .jpeg (joint photographic expert group) ou .png(portable networks graphics)

Ces types d'images sont compressées et occupent moins de place en mémoire que des formats d'images non compressées plus anciens telles que .pbm (portable bit map) images en noir et blanc, .ppm (portable pixel map) ,

La plupart des langages évolués ont développé des procédures (routines) pour "charger" ces fichiers dans la mémoire vive de l'ordinateur pour que l'on puisse utiliser ces images dans des programmes informatiques

Ainsi Processing a développé une classe la classe PImage pour pouvoir travailler avec les images numériques

Dans ce TP nous allons nous familiariser avec cette classe pour pouvoir éventuellement utiliser cette classe dans des futurs projets

Voir ici le tutoriel sur les images par Processing

Variables de la classe PImage:width,height,pixels[]

Méthodes:loadPixels(),updatePixels()...

la classe Pimage n'a pas de constructeur. La méthode loadImage() sert de constructeur et crée un objet à partir de la classe PImage.

Voir ici la documentation

L'équivalent du constructeur par défaut est ici la fonction createImage() qui permet de créer un objet PImage "vide"

//déclaration d'une variable globale de type PImage
Pimage image_vaisseau;
int largeur_image = 80;
int hauteur_image = 80;
void setup(){
	//allocation en mémoire et construction 
	size(400,400);
	image_vaisseau = loadImage("starshipdark.png");
	println("La largeur de l'image originale est "+image_vaisseau.width);
	println("La hauteur de l'image originale est "+image_vaisseau.height);
}
void draw(){
	//on affiche l'image au centre de la fenêtre graphique sur largeur_image par hauteur_image
	//largeur_image est plus petit que image_vaisseau.width
	image(image_vaisseau,width/2 - largeur_image/2,height/2 - hauteur_image/2,largeur_image,hauteur_image);
}

Attention à ne pas confondre avec width et height les variables de la fenêtre graphique qui est aussi une image !!!

Par défaut sans aucune précision les variables width,height,pixels[] sont celles de la fenêtre graphique de base

De même pour les méthodes

La variable pixels[] permet d'avoir accès aux pixels de l'image rangés dans un tableau à 1 dimension. Pour cela il faut dans un premier temps charger le tableau avec la méthode Processing loadPixels()

Ce tableau à une dimension est la représentation numérique de l'image

Ensuite on fait un certain traitement sur tout ou une partie du tableau, en prenant conscience de la relation de conversion entre les coordonnées (x,y) du pixel de l'image et l'indice i du pixel dans le tableau

La relation est i = x + image.width*y

Le traitement étant terminé on met à jour le tableau avec updatePixels()

Télécharger l'image du tournesol ici et le mettre dans le répertoire de votre programme:

Exercices

1. Inverser les couleurs de l'image. Comment sauvegarder l'image obtenue ?
2. Transformer l'image du tournesol (couleurs) en une image en niveaux de gris

Programmation collective

Il s'agit de créer une image qui est le "contour" du tournesol

1. Créer une image blanche avec une ligne noire verticale
2. Créer une fonction qui retourne un objet PImage de même taille que l'image source telle que chaque couleur d'un pixel (x,y) soit la valeur absolue de la brillance entre (x,y) et son voisin de gauche (x-1,y)
3. Appliquer ce détecteur sur l'image du tournesol
4. Créer une image blanche avec une ligne noire horizontale
5. Appliquer le détecteur vertical sur l'image précédente. Qu'observez vous?

Mini-projet personnel (avant J+7)

Créer un détecteur horizontal

Combiner les détecteurs horizontaux et verticaux

Tester sur différentes images