Images

Nous avons vu comment représenter des nombres et des caractères. Maintenant nous allons nous intéresser aux images.

Images vectorielles

Une image vectorielle est composée d'objets géométriques (segments, cercles, polygones, etc.) définis par des attributs (forme, position, couleur, etc.). Le fichier contient donc une description des éléments qui composent l'image. Elle est plutôt utilisée pour représenter des images telles que des icônes ou des cliparts qui peuvent être représentés par des objets mathématiques et géométriques.

Exemple 1

Encodage d'un image en SVG:

<svg width="400" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx = "100" cy = "100" r ="80" stroke = "black" stroke-width = "4"
      fill = "yellow" fill-opacity="20%" />
  <rect x = "61" y = "61" width = "78" height= "78" fill = "#00FFFF" />
  <line x1 = "0" y1 = "0" x2 = "200" y2 = "200" stroke = "rgb(121 21 161)" />
  <line x1 = "0" y1 = "0" x2 = "0" y2 = "200" stroke = "rgb(121 21 161)" />
  <line x1 = "0" y1 = "200" x2 = "200" y2 = "200" stroke = "rgb(121 21 161)" />
</svg>

Le résultat:

Les images vectorielles occupent souvent bien moins d'espace de stockage que les images matricielles et sont donc également plus rapides à transférer sur les réseaux informatiques.

Images matricielles

Une image matricielle est représentée par une grille de points, appelés pixels ("PICTure ELement" => PICTEL => PIXEL), dont chacun a une couleur définie: noir ou blanc, niveaux de gris ou en couleur avec le système RGB vu au chapitre précédent. Les pixels sont tellement petits qu'on ne les voit pas à l'oeil nu.

Dans l'image suivante, nous avons sélectionné une toute petite partie:

Encodage d'une image en PPM (Portable PixMap)

P3
10 6
255
214 178 64 214 198 48 203 204 45 181 199 50 158 186 61 138 170 73 131 160 90
136 160 115 144 163 125 145 165 127 193 151 57 193 173 45 188 191 47 175 200 56
155 196 67 127 177 76 112 158 92 111 151 121 119 151 137 120 147 138 177 128 49
177 151 38 178 178 41 171 199 51 153 205 61 130 195 73 110 174 90 100 157 115 98
148 130 101 141 136 176 117 57 180 141 48 177 168 44 166 190 45 147 202 48 130
204 62 113 191 83 98 169 106 87 152 116 89 143 127 184 112 75 189 133 69 184 157
60 170 180 53 148 194 50 127 198 55 107 188 73 96 172 98 92 163 116 90 156 128
187 102 83 195 117 84 194 143 82 182 170 77 158 185 70 126 184 60 99 172 68 92
164 96 98 168 124 100 171 141

P3
10 6
255
214 178 64 214 198 48 203 204 45 181 199 50 158 186 61 138 170 73 131 160 90 136 160 115 144 163 125 145 165 127
193 151 57 193 173 45 188 191 47 175 200 56 155 196 67 127 177 76 112 158 92 111 151 121 119 151 137 120 147 138
177 128 49 177 151 38 178 178 41 171 199 51 153 205 61 130 195 73 110 174 90 100 157 115 98 148 130 101 141 136
176 117 57 180 141 48 177 168 44 166 190 45 147 202 48 130 204 62 113 191 83 98 169 106 87 152 116 89 143 127
184 112 75 189 133 69 184 157 60 170 180 53 148 194 50 127 198 55 107 188 73 96 172 98 92 163 116 90 156 128
187 102 83 195 117 84 194 143 82 182 170 77 158 185 70 126 184 60 99 172 68 92 164 96 98 168 124 100 171 141

Les images matricielles contiennent énormément de pixels, par conséquent elles occupent rapidement beaucoup d'espace de stockage.

Agrandissement des images

Comme les images vectorielles sont représentées par des paramètres ou des équations mathématiques, elles peuvent être agrandies à souhait en recalculant les courbes dont les équations sont implicitement ou explicitement contenues dans la représentation vectorielle.

En agrandissant une image matricielle, les pixels deviennent visibles et l'image devient floue.:

image originale	image matricielle zoomée	image vectorielle zoomée

Format PBM (Portable BitMap)

Le format PBM est l'un des plus simples pour exprimer des images en noir et blanc. Un tel fichier contient les informations suivantes dans l'ordre et séparées par un espace ou un retour à la ligne:

• P1

• le nombre de colonnes suivi du nombre de lignes

• la liste des pixels, ligne par ligne, de haut en bas et de gauche à droite.

Exercice 18

1. Sans convertir l'image, imaginez ce que représente l'image ci-dessous?

P1
10 10
0 0 0 0 0 0 0 0 0 0
0 0 1 1 1 1 1 1 0 0
0 1 1 0 0 0 0 1 1 0
0 1 0 0 0 0 0 0 1 0
0 1 0 0 0 0 0 0 1 0
0 1 0 0 0 0 0 0 1 0
0 1 0 0 0 0 0 0 1 0
0 1 1 0 0 0 0 1 1 0
0 0 1 1 1 1 1 1 0 0
0 0 0 0 0 0 0 0 0 0

2. Vérifiez votre réponse en convertissant l'image.

3. Modifiez l'image pour remplir le cercle.

Exercice 19

Voici une image encodée dans un autre format que PBM, répondez aux trois questions suivantes avant de convertir l'image:

1. Quelles sont les différences avec le format PBM vu précédemment?

2. Que représentent les valeurs de la deuxième ligne et celle de la troisième ligne?

3. Que représente l'image dont l'encodage est donné ci-dessous?

P2
8 8
3
3 2 3 3 3 3 2 3
2 2 1 2 2 1 2 2
2 2 2 2 2 2 2 2
1 2 0 2 2 0 2 1
2 2 0 2 2 0 2 2
1 2 2 2 2 2 2 1
3 2 0 1 1 0 2 3
3 3 1 1 1 1 3 3

Solution

1. La première information est P2 au lieu de P1. La description de l'image ne contient pas que des 0 et des 1. Elle contient des valeurs entre 0 et 3.

2. À la deuxième ligne se trouve la largeur et la hauteur de l'image en pixels. À la troisième ligne se trouve la valeur maximale acceptée pour la description de l'image.

3. Difficile à déterminer ainsi.

Exercice 20

Voici une image encodée dans un autre format que PBM, répondez aux questions suivantes avant de convertir l'image:

1. Quelles sont les différences avec les formats vus précédemment?

2. Quelles sont les dimensions de l'image (largeur et hauteur en pixels)?

3. Quelle couleur est représentée par la valeur RGB: 255 0 0?

4. Que représente l'image dont l'encodage est donné ci-dessous?

P3
3 2
255
255 0 0 0 255 0 0 0 255
255 255 0 0 0 0 255 255 255

Solution

1. La première information est P3. La description de l'image contient plus de valeurs que de lignes/colonnes et elles sont comprises entre 0 et 255.

2. Les dimensions de l'image sont 3 pixels de large et 2 pixels de haut.

3. Dans le système RGB, 255 0 0 représente le rouge.

4. Cette image représente une suite de couleur: rouge, vert, bleu (1ère ligne) et jaune, noir, blanc (2ème ligne)

Format PGM (Portable GreyMap)

Le format PBM est l'un des plus simples pour exprimer des images en noir et blanc. Un tel fichier contient les informations suivantes dans l'ordre et séparées par un espace ou un retour à la ligne:

• P2

• le nombre de colonnes suivi du nombre de lignes

• la valeur maximale utilisée pour exprimer l'intensité de gris

• la liste des pixels, ligne par ligne, de haut en bas et de gauche à droite.

Format PPM (Portable PixMap)

Le format PBM est l'un des plus simples pour exprimer des images en noir et blanc. Un tel fichier contient les informations suivantes dans l'ordre et séparées par un espace ou un retour à la ligne:

• P3

• le nombre de colonnes suivi du nombre de lignes

• la valeur maximale utilisée pour exprimer l'intensité des couleurs (en général 255)

• la liste des pixels, ligne par ligne, de haut en bas et de gauche à droite.

Exercice 21

L'encodage de l'image ci-dessous à perdu son entête, complétez-le.

Convertissez ensuite l'image pour vérifier votre réponse.

# Complétez l'entête
0 0 1 0 0 0 0 0 1 0 0
1 0 0 1 0 0 0 1 0 0 1
1 0 1 1 1 1 1 1 1 0 1
1 1 1 0 1 1 1 0 1 1 1
1 1 1 1 1 1 1 1 1 1 1
0 0 1 1 1 1 1 1 1 0 0
0 0 1 0 0 0 0 0 1 0 0
0 1 0 0 0 0 0 0 0 1 0

Solution

C'est un image en noir et blanc.

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

Exercice 22

Observez les données stockées dans le fichier ci-dessous et répondez aux questions sans convertir l'image:

1. Quel est le format de l'image?

2. Quelles sont les dimensions de cette image?

3. Que représente le 100 (4ème valeur)?

4. Y a-t-il une logique dans les valeurs qui représentent l'image? Que peut-on en conclure?

P2 6 4 100 0 4 8 12 16 20 24 28 32 36 40 44
48 52 56 60 64 68 72 76 80 84 88 92

Solution

1. P2 correspond à PGM (Portable Grey Map).

2. Les dimensions de cette image sont 6 pixels de large et 4 pixels de haut.

3. Le 100 représente la nuance maximale de gris.

4. Les valeurs sont croissantes régulièrement, l'image représente un dégradé de gris.

Exercice 23

Reproduisez le coeur de The Legend of Zelda ci-dessous. En respectant les propriétés suivantes:

• Noir correspond à la nuance 0

• Gris foncé correspond à la nuance 153

• Gris clair correspond à la nuance 204

• Gris très clair correspond à la nuance 230

• Blanc correspond à 255

P2
8 7
255

Solution

P2
8 7
255
255 0 0 255 0 0 0 255
0 230 204 0 204 204 153 0
0 230 204 204 204 204 153 0
0 204 204 204 204 204 153 0
255 0 204 204 204 153 0 255
255 255 0 153 153 0 255 255
255 255 255 0 0 255 255 255

Exercice 24

Reproduisez Kirby, un personnage de Nintendo. Pour trouver les bonnes couleurs utilisez la palette de couleurs.

P3

Solution

P3
5 5
255
255 255 255 255 149 184 255 149 184 255 149 184 255 255 255
255 149 184 40 0 255 255 149 184 40 0 255 255 149 184
255 149 184 0 0 0 255 149 184 0 0 0 255 149 184
255 255 255 255 149 184 255 149 184 255 149 184 255 255 255
255 0 85 255 0 85 255 255 255 255 0 85 255 0 85

Exercice 25

À vous de jouer! Créez votre propre image.

Quelques idées: un animal, un emoji, pacman, un fantôme, un goomba, un champignon, ...

Autres idées

Palette de couleurs