1. Image et pixels

1.1. Charger et afficher une image

• Créez un nouveau sketch que vous appelerez (Enregistrer sous...) traitement_image.
• Repérez-le dans l’arborescence de l’ordinateur.
  • Il n’y a pas de dossier data.
• Téléchargez une image (pas trop grande) du tableau Le cri.
  • Avez-vous le droit de l’utiliser ?
  • Nous la nommerons le_cri.jpg.
• Glissez-déposez l’image sur l’environnement de programmation de Processing.
  • Un dossier data est apparu, avec une copie de l’image.
• Déclarez la variable cri de type PImage en tête de fichier.
• Chargez le_cri.jpg dans la variable cri :
  • dans void setup() {...},
  • le code : cri = loadImage("le_cri.jpg");
• Affichez le contenu de cri à l’origine de l’animation :
  • toujours dans void setup() {...},
  • le code : image(cri, 0, 0);

1.2. Image qui suit le pointeur

• Comment faire pour que le coin supérieur gauche de l'image soit positionné à l'endroit où est le pointeur de la souris ?
• Idem mais avec le pointeur au milieu de l'image.

1.3. Taille de l’image

Les variables de type PImage ont des attributs. Parmi eux :

• width
• height

On y accède avec :

• cri.width
• cri.height

En affichant ces deux valeurs avec println, nous pouvons fixer la taille parfaite de notre animation (avec size).

1.4. Pixels

• L’instruction loadPixels() charge la variable « magique » pixels (pas besoin de la déclarer).
• pixels est un tableau à une dimension,
  • pixels[n] est le n+1^ème pixel,
  • pixels.length est la taille de pixels.
• L’affichage de pixels[0] donne -9815765 ???
• Que donnent :
  • println(hex(pixels[0]));
  • println(red(pixels[0]));
  • println(green(pixels[0]));
  • println(blue(pixels[0]));
  • println(hex(red(pixels[0])));
  • println(hex(green(pixels[0])));
  • println(hex(blue(pixels[0])));

Questions :

• À partir des coordonnées x et y d’un pixel, quelle valeur donner à n pour que pixels[n] contienne les informations du pixel de coordonnées (x;y) ?
• Compléter le sketch pour qu’il affiche le code couleur du pixel sous la souris de l’utilisateur.
  • Vous aurez sans doute besoin de void draw() {...}.

2. Traitement de l’image

2.1. Parcours des pixels

for (int i = 0; i < pixels.length; i++) {
  ...
}
updatePixels();

Ici, la variable entière est déclarée et initialisée dans l’instruction for.

Le code placé sur les points de suspension sera exécuté, puis i va être incrémentée (i++) tant qu’elle sera strictement plus petite que la taille du tableau (i < pixels.length).

À chaque tour, pixels[i] sera un des pixels de l’animation, le i+1^ème.

L’instruction updatePixels() va afficher à l’écran les pixels contenus dans pixels.

2.2. Couleurs

2.2.1. Monochromes

À la place des ..., affectez à pixels[i] la valeur color(0).

Essayez une autre valeur que 0.

2.2.2. Hasard

• Créez une image où chaque pixel a une couleur aléatoire.
• Créez une image où tous les pixels ont la même couleur aléatoire.

2.2.3. NB

À la place des ..., affectez à pixels[i] la valeur color(m) ou m est la moyenne des canaux rouge, vert et bleu.

On peut aussi ne permettre que deux niveaux de gris : 0 (noir) et 255 (blanc). Utilisez une instruction conditionnelle (if) et testez quelques seuils.

DÉFI : programmer le réglage du seuil à la souris.

2.2.4. Composantes

À la place des ..., affectez à pixels[i] la valeur color(x) ou x est un des canal (rouge, vert ou bleu).

2.2.5. Sépia

Réalisez un filtre sépia.

2.2.6. Rétrécir

Afficher une image réduite de l’originale dans le coin en haut à gauche.

2.3. Géométrie

2.3.1. Un essai

Recopier les pixels de pixels, mais dans le sens inverse avec cette boucle :

for (int i = 0; i < pixels.length; i++) {
  pixels[i] = pixels[taille - 1 - i]
}
// où `taille` est le nombre de pixels de votre image

Que se passe-t-il ? Pourquoi ?

2.3.2. Tableau tampon

• Déclarer un autre tableau de pixels en ajoutant en tête de fichier :
  color[] nouveaux_pixels;
• Initialiser ce tableau dans setup avec :
  nouveau_pixels = new color[taille];
  où taille est le nombre de pixels de votre image.
• Recopier à l’envers pixels dans nouveaux_pixels dans une première boucle.
• Recopier à l’endroit nouveaux_pixels dans pixels dans une seconde boucle.
• Afficher le résultat avec updatePixels();.

Pourrez-vous coder :

• des translations ?
• des symétries ? lesquelles ?
• des rotations ? lesquelles ?
• autre chose ?

3. Liens

• Le tutoriel officiel sur les pixels.

A suivre...