Représentation des images Cette description est assez grossière ; on peut l’améliorer en utilisant un quadrillage

plus précis. Combien d’octet serait nécessaire pour un quadrillage de 100x100 ? Et

pour un quadrillage de 1000x1000 ?
1. Principe de base

En numérique, on ne manipule que des 0 et des 1. Comment peut-on alors

représenter des images, des vidéos et des sons ?
Pour mémoire, il faut 4 octets en vectorielle.

a. Un cas simple A partie de quelques millions de pixels, notre œil n’est plus capable de faire la
différence entre les deux images, le cercle initial et le cercle « pixellisé ». Cette
manière de représenter une image est le bitmap. Cela permet de représenter toutes
L’image 1 peut être décrite facilement : c’est un cercle
les images en noir et blanc.
et on peut préciser les coordonnées de son centre et son
rayon. Donc 4 données suffisent : le type cercle, les
coordonnées de son centre et son rayon.
4 octets peuvent suffire à numériser l’image.
c. Application

On veut numériser l'image ci-contre :

Dans ce cas, on a une représentation symbolique ou
Pour cela, on va superposer à cette image 3 grilles carrées de 4
vectorielle de l’image. Un logiciel comme GéoGébra
cm de côté et au maillage de plus en plus fin.
utilise ce principe.
Cependant, cette méthode est peu pratique pour
Pour chaque cas :
représenter l’image 2 !
- donner la résolution de l'image en pixel
- calculer son poids en octet
- coder les images avec les grilles 1 et 2 et le début avec la grille 3
b. La pixellisation
Résolution :
Une autre méthode, qui a l’avantage de pouvoir être
utilisée sur n’importe quelle image, consiste à Poids en octet :
superposer un quadrillage à l’image. Chacune des
cases de ce quadrillage s’appelle un pixel (picture Code :
element) et on noircit les pixels qui contiennent une
portion du cercle (voir images 3 et 4). Résolution :

A chaque pixel, on associe un bit : 1 pour noir et 0 pour blanc. Poids en octet :
Pour notre cercle, on a utilisé un quadrillage 10x10 soit 100 bits donc 13 octets.
Cette image est mémorisée sous cette forme : Code :

0000000000001111110001100001100100000010010000001001000000100100000
010011000011000111111000000000000
 Résolution : 2. Un peu de couleur

Poids en octet : a. Niveau de gris

Code : Avant de passer à la couleur, on peut, entre le noir et le blanc, avoir des nuances de
gris. Dans ce cas, à chaque pixel on associe une valeur sur un octet, soit de 0 à 255.
0 pour un pixel noir, 1 pour un pixel un peu moins noir, … , 254 pour un pixel
presque blanc et 255 pour un pixel blanc.

Ce type d’image est au format PGM (portable greymap) et son code est P2.

La structure du fichier est la suivante :

d. Un premier fichier bitmap
- code pour le type d’image (P2)
Un tel fichier se présente sous la forme suivante : - largeur et hauteur de l’image en pixel, séparées par un espace
- la valeur maximale utilisée pour exprimer les niveaux de gris
P1 - code pour le type d’image (P1 pour image bitmap) - la liste des niveaux de gris, ligne par ligne de gauche à droite et de haut
10 10 en bas séparés par un espace.
- largeur de l’image en pixel, espace, hauteur de l’image en pixel
0000000000 - Chaque ligne ne peut dépasser 70 caractères ; les lignes qui
0011111100 - la liste des pixels, ligne par ligne de gauche à droite et de haut commencent par un # sont ignorées.
…
en bas (les retours lignes et les espaces sont ignorés dans cette
Ouvrir le fichier P2.PGM de votre cercle en 256 niveaux de gris avec Notepad++.
partie). Pour chaque pixel, vous pouvez choisir un niveau de gris différent. Ouvrir ce même
fichier avec Gimp. Modifier-le comme vous le souhaitez.

Rq : Chaque ligne ne peut dépasser 70 caractères ; on peut noter un commentaire b. Couleurs

précédé d’un #.
Ce fichier doit être sauvegardé au format PBM (portable bitmap) ; c’est le format
d’image le plus simple !
Avec le logiciel Notepad++ ouvrir le fichier P1.PBM qui code votre cercle, puis
l’ouvrir avec le logiciel Gimp (il faut peut-être zoomer !). Vous pouvez modifier
quelques valeurs du fichier P1.PBM, enregistrer et voir les modifications dans
Gimp.
La rétine de notre œil est constituée de cônes et de bâtonnets. Les cellules cônes
sont sensibles aux couleurs. Nous possédons 3 types de cônes : certains sont
sensibles dans le rouge (560 nm), d’autres dans le vert (530 nm) et les derniers
dans le bleu (424 nm). Avec ces 3 types de cellules cônes, nous pouvons percevoir
environ 2 millions de couleurs.
En numérique on retrouve ce principe. A chaque pixel, on associe 3 nombres sur un
octet : le premier pour l’intensité du rouge, le second pour celle du vert et le
troisième pour celle du bleu. Il faut donc 3 octets par pixel ! C’est le codage RGB
(Red Green Blue).

Combien de couleurs peut-on ainsi représenter ?

Ce type d’image est au format PPM (portable pixmap) et son code est P3.
La structure du fichier est la suivante :
- code pour le type d’image (P3)
- largeur et hauteur de l’image en pixel, séparées par un espace
- la valeur maximale utilisée pour exprimer chaque intensité de couleurs
- la liste des 3 intensités (RGB) par pixel, ligne par ligne de gauche à
droite et de haut en bas séparés par un espace.
- Chaque ligne ne peut dépasser 70 caractères ; les lignes qui
commencent par un # sont ignorées.
Ouvrir le fichier cercle P3.PPM avec Notepad++ et analyser le code. Pour chaque
pixel, vous pouvez choisir des couleurs différentes. Le blanc est codé par : 255 255
255 ; le noir par : 0 0 0. Ouvrir ce même fichier avec Gimp. Modifier-le comme
vous le souhaitez.
c. Compression
Un fichier PPM a une taille très importante et souvent, il comporte de très
nombreuses répétitions. Afin d’éviter cela, on utilise des algorithmes de
compression qui permettent de réduire la taille du fichier et évitant les répétitions
inutiles (format JPEG, TIFF, …).
Mais cela peut faire l'objet d'un projet de fin d'année ...
3. JAVASCOOL : Codage pixel
Maintenant nous allons utiliser le proglet codage pixel de javascool.
a. Les méthodes
Dans cette partie vous allez découvrir les outils suivants :
- reset(width,height) qui crée une fenêtre graphique dont l’origine est au
centre (Reset(width,height,false) crée une fenêtre graphique dont
l’origine est en bas à gauche).
- load(image) qui charge une image :
o soit d’un site internet
load(« http://javascool.gforce.inria.fr/image.jpg »)
o soit du disque dur
load(« C:/documents/image.jpg »)
- getWidth() et getHeight() qui donne la largeur et la hauteur d’une
image (avec l’origine au centre).
- getPixel(x,y) qui, pour le pixel de coordonnées (x ;y), donne l’intensité
du niveau de gris ou du rouge sur une image en couleur.
- Int rgb[]=getPixelColor(x,y) qui, pour le pixel de coordonnées (x ;y),
donne, dans un tableau de 3 cases, l’intensité des 3 couleurs rouge
(rgb[0]), vert (rgb[1]) et bleu (rgb[2]).
- setPixel(x,y,color) qui donne au pixel de coordonnées (x ;y), la couleur
spécifiée selon 3 modes :
o soit avec le nom de la couleur
o soit avec une intensité en niveau de gris
o soit avec 3 intensités en RGB.
b. Pour bien comprendre
Exercice 1 : Créer une fenêtre graphique de 50*50 avec l’origine en bas à gauche
et tracer plusieurs lignes (horizontales ou verticales) avec différents niveaux de gris
pour chaque pixel.
Exercice 2 : Créer une fenêtre graphique de 200*200 avec l’origine centrée et
tracer plusieurs rectangles de différentes couleurs mais unis pixel.
Exercice 3 : Charger l’image façade, afficher sa largeur et sa hauteur puis les
intensités des 3 couleurs pour chaque pixel.
Exercice 4 : Compléter le programme précédent en modifiant l'image pour ne
garder pour chaque pixel que la composante bleue, les 2 autres sont à 0.chaque
pixel pour ne garder que la composante bleue, les deux autres seront mises à 0.
Exercice 5 : Comme pour l’exercice 4, modifier la couleur des pixels de l'image …
selon votre imagination !