Introduction à la programmation avec Processing

TP3 : Manipulation d'images



Objectif

Dans ce TP vous allez apprendre à afficher une image et chahuter ses pixels.

Afficher une image

Tout d'abord il va nous falloir une image. Comme cette première étape est essentielle au bon déroulement du TP, en voici une que j'aime bien: Photographie réalisée par Erik_Holmén Je vous conseille de l'utiliser, comme ça vous aurez les mêmes résultats que moi et ça sera plus facile pour comparer.

Nous allons commencer comme pour n'importe quel projet avec Processing, avec le code suivant :

	void setup(){
	  size(displayWidth,displayHeight);
	  background(255,255,255);
	}

	void draw(){
	}
	

Pour rappel la fonction setup() contient des instructions qui ne seront exécutées qu'une seule fois, au lancement de notre programme, tandis que la fonction draw() est appellée plusieurs fois par seconde, tout le temps que notre programme fonctionne.

Enregistrez le projet (vous pouvez lui donner un nom très original comme tp2). Processing va créer un répertoire du même nom que votre projet dans lequel vous trouvez un fichier .pde qui contient votre code. Juste à côté de ce fichier, copiez votre image. Pour la suite de ce tp, je supposerai qu'elle porte le doux nom de img.jpg.

Pour pouvoir l'utiliser, nous allons stocker notre image dans une variable, de type PImage, que nous appellerons monImage. Modifiez juste un tout petit peu le programme précédent :

  
	PImage monImage; // La modification importante est ici !!!

	void setup(){
	  size(displayWidth,displayHeight);
	  background(240);
	}

	void draw(){
	}
	

Et maintenant attention, les choses sérieuses commencent ! Nous allons nous placer à l'intérieur de la fonction setup et écrire les lignes de code suivantes :

Exercice 1

La dernière ligne de code est un peu obscure :

Pixels

Vous le savez sans doute, mais une image est une grille rectangulaire. Chaque élément de la grille est appelé pixel et possède une couleur. Concrètement cela veut dire qu'une PImage est composée d'au moins trois choses :

La largeur correspond au nombre de pixels qu'on peut compter de la droite vers la gauche. La hauteur correspond au nombre de pixels qu'on peut compter du haut vers le bas. Par exemple voici une image de largeur 14 pixels et de hauteur 7 pixels.

Nous allons voir comment parcourir les pixels d'une image pour les lire ou les modifier. Enlevez cette ligne :

copy(monImage,0,0,monImage.width,monImage.height,0,0,monImage.width,monImage.height); D'abord on va diviser par 2 la taille de notre image :

	monImage.resize(monImage.width/2,monImage.height/2);
	

Nous allons noter y le numéro de ligne du pixel et x son numéro de colonne. Dans notre PImage, les pixels sont tous entassés les uns à la suite des autres, d'abord les pixels de la première ligne, ensuite les pixels de la seconde ligne etc. De plus le premier pixel a le numéro 0, le deuxième le numéro 1 et ainsi de suite. Un peu compliqué ? Heureusement, processing dispose d'une fonction get qui permet de récupérer facilement la couleur du pixel :

	color c = monImage.get(x,y);
	int rouge = red(c);
	int vert = vert(c);
	int bleu = bleu(c);
	

Exercice 2

Maintenant à vous de travailler

Exercice 3

La même chose, mais cette fois-ci en parcourant les colonnes !