TP1 - Coder une image avec un éditeur de texte

Objectifs

• Comprendre qu'une image numérique est une grille de valeurs numériques
• Créer des fichiers image noir et blanc (PBM), en niveaux de gris (PGM) et en couleur (PPM) à partir d'un simple éditeur de texte

Dans ce TP, nous allons créer de véritables images numériques sans aucun logiciel de dessin, uniquement à l'aide d'un éditeur de texte (Notepad sur Windows). Chaque image sera un fichier texte contenant des valeurs numériques - la démonstration concrète que toute image numérique n'est, au fond, qu'une longue suite de nombres.

Matériel nécessaire

• Un éditeur de texte : Notepad (Windows)
• Un visionneur d'images PBM : GIMP (gratuit) ou le site Netpbm viewer directement dans le navigateur
• Du papier et des crayons de couleur pour la partie sur papier

---

Coder des images sur papier

Avant de manipuler des fichiers sur ordinateur, nous allons expérimenter ce que fait un ordinateur quand il lit une image : interpréter des suites de 0 et de 1 comme des pixels colorés.

Lire une grille binaire

Chaque case de la grille correspond à un pixel. La règle est simple :

• 0 : case blanche (ne pas colorier)
• 1 : case noire (colorier en noir)

Grille en noir et blanc

On dispose de l'image suivante, où chaque case contenant un 0 ou un 1 correspond à un pixel noir ou blanc :

	C1	C2	C3	C4	C5	C6	C7	C8
L1	0	0	1	1	1	1	0	0
L2	0	1	0	0	0	0	1	0
L3	1	0	0	0	0	0	0	1
L4	1	0	1	0	0	1	0	1
L5	1	0	0	0	0	0	0	1
L6	1	0	0	1	1	0	0	1
L7	0	1	0	0	0	0	1	0
L8	0	0	1	1	1	1	0	0

✏️Exercices

1
Reproduire sur feuille une grille vide contenant autant de case que l'image (pas besoin de faire une grille énorme).
Fait
2
Colorier les cases contenant un 1. Quel motif reconnaissez-vous ?
Fait
3
Quelle est la taille de cette image en pixels (largeur × hauteur) ?
Fait
4
Combien de pixels noirs contient-elle au total ?
Fait

---

Grille en nuance de gris

Pour cette deuxième grille, chaque case contient une valeur entre 0 et 255. On dispose de l'échelle de couleur suivante :

Valeur	Nuance à utiliser
0	Noir (appuyer fort)
64	Gris très foncé
128	Gris moyen
192	Gris clair
255	Blanc (ne pas colorier)

Ainsi que de cette grille :

	C1	C2	C3	C4	C5	C6
L1	255	0	0	0	0	255
L2	255	0	192	192	0	255
L3	255	0	192	192	0	255
L4	255	0	0	0	0	255
L5	255	128	255	255	128	255
L6	255	255	128	128	255	255

✏️Exercices

1
Reproduire sur feuille une grille vide contenant autant de case que l'image (pas besoin de faire une grille énorme).
Fait
2
Colorier chaque case selon l'échelle ci-dessus. Quel motif apparaît ?
Fait
3
Quelle valeur correspond au noir ? Au blanc ? Pourquoi ne pourrait-on pas dépasser 255 ?
Fait

---

Grille de couleur

Les grilles établies au dessus ne permettent pas de mettre des couleurs sur nos images.

✏️Exercices

1
Reproduire la grille ci-dessous :
	C1	C2	C3	C4	C5	C6	C7	C8
L1
L2
L3
L4
L5
L6
L7
L8
Fait
2
Imaginer une codification permettant de représenter des couleurs, en s'inspirant de ce qui s'est fait précédemment.
Fait
3
Représenter un motif de votre choix (initiale, cœur, flèche, étoile…) en inscrivant les valeurs dans la grille, et la donner au voisin pour qu'il la recopie et colorie, à l'aide de la grille des couleurs de la question précédente.
Fait

---

Coder des images numériques

Image en noir et blanc - Format PBM

Un fichier PBM est un fichier texte respectant la structure suivante :

P1
largeur hauteur
0 1 0 1 ...  (une ligne par ligne de pixels)

Où :

• P1 représente l'identifiant du format (Portable BitMap, noir et blanc) ;
• largeur hauteur les dimensions de l'image en nombre de pixels ;
• 0 un pixel blanc et 1 pixel noir.

---

✏️Exercices

Voici le contenu d'un fichier PBM :

P1
8 8
0 0 1 1 1 1 0 0
0 1 0 0 0 0 1 0
1 0 0 1 1 0 0 1
1 1 1 0 0 1 1 1
1 1 1 0 0 1 1 1
1 0 0 1 1 0 0 1
0 1 0 0 0 0 1 0
0 0 1 1 1 1 0 0

1
Quelle est la taille de cette image (en pixels) ?
Fait
2
Combien de pixels noirs contient-elle au total ?
Fait
3
Recopier cette grille sur papier et colorier les cases à 1. Quel motif peut-on reconnaître ?
Fait
4
Télécharger l'image suivante et l'ouvrir soit sur Gimp soit sur un navigateur (Netpbm viewer ; attention l'image est très petite). Le résultat est-il le même ?
Fait
5
Sur papier, dessiner une grille de 15 colonnes × 10 lignes. Colorier les cases qui formeront l'initiale de votre prénom.
Fait
6
Traduir le dessin en 0 et 1.
Fait
7
Ouvrir l'éditeur de texte et créer le fichier initiales.pbm en respectant scrupuleusement la structure ci-dessous, puis l'enregistrer avec l'extension .pbm (dans Notepad, choisir « Tous les fichiers » pour éviter l'ajout automatique de .txt) :
P1
15 10
(vos 10 lignes de 15 valeurs séparées par des espaces)
⚠️ Chaque ligne doit contenir exactement 15 valeurs et il doit y avoir exactement 10 lignes de valeurs.
Fait
8
Ouvrir le fichier avec GIMP ou le visionneur en ligne et vérifier que l'image correspond bien à initiale.
Fait

Voici trois fichiers PBM. Chacun encode une lettre.

Lettre 1 (7×9) :

P1
7 9
0 1 1 1 1 1 0
1 0 0 0 0 0 1
1 0 0 0 0 0 0
1 0 0 0 0 0 0
0 1 1 1 1 1 0
0 0 0 0 0 0 1
0 0 0 0 0 0 1
1 0 0 0 0 0 1
0 1 1 1 1 1 0

Lettre 2 (7×9) :

P1
7 9
1 0 0 0 0 0 1
1 1 0 0 0 0 1
1 0 1 0 0 0 1
1 0 0 1 0 0 1
1 0 0 0 1 0 1
1 0 0 0 0 1 1
1 0 0 0 0 0 1
1 0 0 0 0 0 1
1 0 0 0 0 0 1

Lettre 3 (7×9) :

P1
7 9
1 1 1 1 1 1 1
0 0 0 1 0 0 0
0 0 0 1 0 0 0
0 0 0 1 0 0 0
0 0 0 1 0 0 0
0 0 0 1 0 0 0
0 0 0 1 0 0 0
0 0 0 1 0 0 0
0 0 0 1 0 0 0

9
Recopier chaque grille sur un fichier au format pbm, et les ouvrir (gimp ou navigateur).
Fait
10
Quelles sont les lettres formées ?
Fait

---

Image en nuance de gris - Format PGM

Un fichier PGM est un fichier texte respectant la structure suivante :

P2
largeur hauteur
valeur_max
valeurs des pixels (0 = noir, valeur_max = blanc)

Où :

• P2 représente l'identifiant du format (Portable GrayMap) ;
• largeur hauteur les dimensions de l'image en nombre de pixels ;
• valeur_max la valeur maximale utilisée (255 par convention pour avoir des nuances de gris distinctes) ;

---

✏️Exercices

On dispose du tableau de valeur ci-dessous :

Valeur décimale	Valeur binaire (8 bits)	Nuance attendue
0	00000000	Noir pur
64	___________	Gris très foncé
128	___________	Gris moyen
192	___________	Gris clair
255	11111111	Blanc pur

1
Compléter la colonne Valeur binaire en utilisant la méthode des divisions successives par 2 étudiée en cours.
Fait
2
Combien de nuances de gris distinctes peut-on représenter avec un octet (8 bits) ? Justifier.
Fait

Voici la structure attendue pour un dégradé horizontal du noir vers le blanc sur 8 × 4 pixels :

P2
8 4
255
0  36  72  109  145  181  218  255
0  36  72  109  145  181  218  255
0  36  72  109  145  181  218  255
0  36  72  109  145  181  218  255

3
Créer le fichier degrade.pgm en recopiant la structure ci-dessus, puis l'ouvrir dans le visionneur.
Fait
4
Combien d'octets de données (hors en-tête) contient ce fichier ?
Fait
5
Quelle est la différence entre chaque valeur successive dans une ligne ? Ce pas est-il régulier ?
Fait
6
Modifier le fichier pour créer un dégradé vertical (noir en haut, blanc en bas) : les quatre lignes doivent avoir des valeurs uniformes mais distinctes d'une ligne à l'autre.
Fait

Voici une grille de départ pour un visage simplifié en 10 × 10 pixels (0 = contour noir, 200 = peau gris clair, 50 = yeux et bouche gris foncé) :

P2
10 10
255
0   0   0   0   0   0   0   0   0   0
0 200 200 200 200 200 200 200 200   0
0 200  50 200 200 200 200  50 200   0
0 200 200 200 200 200 200 200 200   0
0 200 200 200 200 200 200 200 200   0
0 200  50 200 200 200 200  50 200   0
0 200 200  50  50  50  50 200 200   0
0 200 200 200 200 200 200 200 200   0
0 200 200 200 200 200 200 200 200   0
0   0   0   0   0   0   0   0   0   0

7
Créer le fichier visage.pgm à partir de la grille ci-dessus et l'ouvrir dans le visionneur.
Fait
8
Améliorer le visage en ajoutant des sourcils et un nez. Modifier l'expression (sourire, regard neutre…). Décrire brièvement les modifications apportées.
Fait

---

Image en couleur - Format PPM

Un fichier PPM est un fichier texte respectant la structure suivante :

P3
largeur hauteur
255
R V B  R V B  R V B ...

Où :

• P3 représente l'identifiant du format (Portable PixMap) ;
• largeur hauteur les dimensions de l'image en nombre de pixels ;
• 255 la valeur maximale donnée aux composantes de rouge vert et bleu ;
• R V B les valeurs à donner, pour un pixel, aux composantes Rouge (R), Vert (V) et Bleu (B), comprises entre 0 et 255.

---

✏️Exercices

On dispose de la palette de couleur ci-dessous, où chaque couleur (que l'on utilise) est un mélange de rouge, vert et bleu. Quand une valeur est à 255, cela signifie quelle est au maximum, 0 signifie qu'elle est au minimum.
Pour du rouge pur, on met le maximum de la composante de rouge, rien en vert, et rien en bleu.

Couleur souhaitée	R	V	B
Rouge pur	255	0	0
Vert pur	___	___	___
Bleu pur	___	___	___
Jaune	255	255	0
Cyan	0	255	___
Magenta	___	0	___
Blanc	___	___	___
Noir	0	0	0
Gris 50 %	___	___	___
Orange	255	128	0

1
Compléter le tableau ci-dessus.
Fait
2
Quelle règle générale peut-on formuler pour obtenir du gris (quelle que soit la nuance) à partir des valeurs R, V, B ?
Fait

Les couleurs officielles du drapeau français sont :

• Bleu : R=0, V=35, B=149
• Blanc : R=255, V=255, B=255
• Rouge : R=237, V=41, B=57

3
Créez un fichier drapeau.ppm représentant le drapeau français sur une grille de 9 × 6 pixels (3 colonnes de 3 pixels de large, 6 lignes de hauteur). Chaque ligne du fichier correspond à une ligne de pixels, soit 9 triplets RVB.
Fait
4
Combien de triplets RVB contient ce fichier au total (hors en-tête) ?
Fait
5
Une fois le drapeau français réalisé, créer le drapeau d'un autre pays de votre choix. Indiquer le pays choisi et les valeurs RVB utilisées.
Fait
6
Transcrire le motif dessiné lors de la dernière question de la partie 1 ligne par ligne dans un fichier motif.ppm en utilisant les triplets RVB. Le fichier doit être valide et s'ouvrir correctement dans le visionneur.
Fait

---

Pour aller plus loin

Les formats JPEG et PNG utilisés quotidiennement contiennent exactement les mêmes triplets RVB - mais compressés afin de réduire la taille des fichiers. Le principe de base reste identique à ce qui a été réalisé dans ce TP.

Un fichier PPM de 1920 × 1080 pixels pèserait environ 6 Mo sans compression. Le même fichier en JPEG pèse généralement moins de 500 Ko !