L'image numérique : pixels, couleurs, coordonnées

Jusqu'ici, nos programmes dessinaient des traits. Dans ce thème, on s'attaque aux images : les photos, les écrans, les filtres. Et on commence par l'objet que tu as sous les yeux en ce moment même.

Un écran, c'est des pixels

Regarde ton écran. Ce qu'il affiche (texte, photos, vidéos) semble continu, mais c'est une illusion : un écran est une grille de points de couleur, les pixels. Un écran ordinaire en compte 1920 sur 1080, soit environ 2 millions de pixels. Chaque pixel affiche une seule couleur à la fois ; l'image que tu vois, c'est l'ensemble de ces 2 millions de points, trop petits pour être distingués à l'œil nu.

Zoome

Approche-toi très près d'un écran (ou regarde une goutte d'eau posée sur l'écran d'un vieux téléphone, elle fait loupe) : chaque pixel se décompose en trois bâtonnets de lumière collés côte à côte, un rouge, un vert, un bleu.

Un pixel n'est donc pas peint : il fabrique sa couleur en dosant l'intensité de ses trois lumières. Trois lumières à fond : le pixel paraît blanc. Trois lumières éteintes : noir. Rouge à fond, les deux autres éteintes : rouge.

Pourquoi rouge, vert et bleu ?

Question légitime : pourquoi ces trois couleurs-là, et pourquoi trois ? La réponse n'est pas dans l'écran. Elle est dans ton œil.

Ta rétine capte les couleurs avec trois sortes de cellules, les cônes : les uns réagissent surtout aux lumières rouges, les autres aux vertes, les derniers aux bleues. Toute couleur que tu perçois, c'est ton cerveau qui la fabrique à partir de ces trois signaux, et de rien d'autre.

L'écran exploite ça : il n'a pas besoin de reproduire la vraie lumière d'un coucher de soleil. Il lui suffit de stimuler tes trois sortes de cônes dans les bonnes proportions, avec ses trois lumières. Ton cerveau fait le reste. Trois lumières suffisent parce que tu n'as que trois capteurs.

Le rose n'existe pas

La preuve que la couleur est une fabrication du cerveau : certaines couleurs que tu vois tous les jours n'existent dans aucune lumière. Le rose, par exemple.

La leçon

Quand tes cônes rouges et bleus s'activent ensemble, sans les verts, ton cerveau invente une couleur pour représenter ce mélange : le rose. Aucune lumière n'est rose ; le rose n'existe que dans ta tête. La couleur n'est pas dans le monde, elle est dans la perception, et c'est précisément pour ça que trois lumières bien dosées suffisent à tout afficher.

Résumons le chemin de l'information :

Ondes	→ Yeux	→ Cerveau	→ Couleur
phénomène physique	capteur	calculateur	perception

Seule la première colonne existe « dans le monde » : des ondes, avec des longueurs d'onde, mais sans couleur. Les yeux captent, le cerveau calcule, et la couleur est le résultat du calcul, tout au bout de la chaîne. Retiens cette chaîne phénomène → capteur → calculateur → résultat : on va la retrouver.

Pour aller plus loin : l'œil calcule déjà

En vérité, la frontière entre capteur et calculateur n'est pas si nette : l'œil est un capteur un peu intelligent. Avant même que le signal parte vers le cerveau, des cellules de la rétine comparent chaque point à ses voisins et accentuent les écarts de lumière, ce qui fait ressortir les contours de ce que tu regardes. Ton œil fait donc, tout seul, une forme de détection de contours. Retiens ce mot : à la fin de ce thème, c'est toi qui programmeras ce traitement sur une image.

Encoder un pixel

Pour qu'une machine manipule une couleur, il faut la ranger en mémoire, donc la coder par des nombres. On vient de voir lesquels : les intensités des trois lumières. La couleur d'un pixel, c'est trois nombres, chacun entre 0 (lumière éteinte) et 255 (lumière à fond). C'est le codage RVB (rouge, vert, bleu ; RGB en anglais).

Triplet (R, V, B)	Couleur
(255, 0, 0)	rouge
(0, 255, 0)	vert
(0, 0, 255)	bleu
(0, 0, 0)	noir (tout éteint)
(255, 255, 255)	blanc (tout à fond)
(255, 255, 0)	jaune (rouge + vert)
(255, 0, 255)	magenta, le fameux rose (rouge + bleu)
(128, 128, 128)	gris moyen

Exercice - Décoder des couleurs

Sans machine, donne la couleur de chacun de ces pixels : (0, 0, 0), (0, 128, 0), (200, 200, 200), (255, 150, 200).

Correction

Noir ; vert sombre (lumière verte à moitié) ; gris clair (trois lumières fortes et égales) ; un rose clair (rouge à fond, bleu fort, un peu de vert pour éclaircir).

Exercice - Coder des couleurs

Écris le triplet (R, V, B) qui code : un bleu à fond ; un rouge sombre ; le cyan (vert + bleu) ; un gris très foncé.

Correction

(0, 0, 255) ; (128, 0, 0) (ou toute valeur de rouge nettement sous 255, les deux autres à 0) ; (0, 255, 255) ; (30, 30, 30) (trois valeurs égales et petites).

Se repérer : la troisième façon

Il reste à dire quel pixel doit prendre quelle couleur. Notre langage inventé sait déjà décrire un tracé de deux façons : les directions vues de la feuille (droite, bas…) et le point de vue du crayon (avance, tourne). Pour des pixels, aucune des deux n'est commode : on ne veut pas se déplacer de pixel en pixel, on veut en désigner un directement.

Troisième façon : donner à chaque case une adresse. C'est ce qu'on appelle des coordonnées (x, y) :

x compte les colonnes, vers la droite ;
y compte les lignes, vers le bas ;
on compte à partir de 0 : la case (0, 0) est en haut à gauche, comme le point de départ de nos tracés de la première séance.

Ajoutons le mot correspondant au langage :

colorie (x, y) en (r, v, b)

colorie (2, 0) en (255, 0, 0) : la troisième case de la première ligne devient rouge. Remarque une différence profonde avec droite ou avance : il n'y a plus de trajet. Chaque instruction désigne sa case directement, et l'ordre des instructions ne change rien au dessin.

Exercice - Lire

Sur une grille de 4 cases sur 4, toutes blanches au départ, que dessine ce programme ?

colorie (0, 0) en (0, 0, 0)
colorie (1, 1) en (0, 0, 0)
colorie (2, 2) en (0, 0, 0)
colorie (3, 3) en (0, 0, 0)

Correction

La diagonale de la grille, du coin en haut à gauche au coin en bas à droite, en noir : à chaque instruction, la colonne et la ligne augmentent ensemble.

Exercice - Écrire

Sur une grille de 3 cases sur 3, écris les instructions colorie qui dessinent la lettre L en bleu : le trait vertical occupe toute la colonne de gauche, le pied une case en bas au milieu.

Correction

colorie (0, 0) en (0, 0, 255)
colorie (0, 1) en (0, 0, 255)
colorie (0, 2) en (0, 0, 255)
colorie (1, 2) en (0, 0, 255)

La colonne de gauche, c'est x = 0 avec y qui descend de 0 à 2 ; le pied est en (1, 2). Et ces quatre lignes peuvent s'écrire dans n'importe quel ordre.

Une image est une grille de pixels

On a tout ce qu'il faut pour dire ce qu'est une image numérique : une grille de pixels, où chaque pixel possède des coordonnées (x, y) et une couleur (r, v, b). Une photo de 4000 pixels sur 3000 en contient 12 millions : on dit 12 mégapixels (Mpx). L'afficher, c'est envoyer chaque triplet aux trois lumières du pixel d'écran correspondant.

Dans la mémoire, les pixels sont rangés ligne par ligne, de gauche à droite, comme on lit un texte.

Exercice - Décoder une image

Voici les 25 triplets d'une image de 5 pixels sur 5, ligne par ligne. Colorie la grille sur ton cahier et découvre l'image.


(255,255,255)	(255,0,0)	(255,255,255)	(255,0,0)	(255,255,255)
(255,0,0)	(255,0,0)	(255,0,0)	(255,0,0)	(255,0,0)
(255,0,0)	(255,0,0)	(255,0,0)	(255,0,0)	(255,0,0)
(255,255,255)	(255,0,0)	(255,0,0)	(255,0,0)	(255,255,255)
(255,255,255)	(255,255,255)	(255,0,0)	(255,255,255)	(255,255,255)

Correction

Un cœur rouge sur fond blanc.

Exercice - Le poids d'une photo

Chaque pixel demande 3 nombres. Combien de nombres faut-il ranger en mémoire pour une photo de 12 mégapixels ? Et pourquoi, à ton avis, les photos qu'on s'envoie sont-elles souvent « compressées » ?

Correction

12 millions de pixels × 3 = 36 millions de nombres (chacun tenant dans un octet, soit 36 Mo brut). C'est énorme pour une seule photo : d'où la compression (le format JPEG, par exemple), qui réduit la place en acceptant de perdre un peu de qualité.

Ce qu'on retient

Un écran est une grille de pixels ; chaque pixel fabrique sa couleur avec trois lumières (rouge, verte, bleue).
Trois lumières suffisent parce que l'œil n'a que trois sortes de capteurs (les cônes) : la couleur est une fabrication du cerveau (le rose n'existe dans aucune lumière).
Le chemin de l'information : ondes → yeux → cerveau → couleur, c'est-à-dire phénomène physique → capteur → calculateur → perception. La couleur est en bout de chaîne, pas en début.
Un pixel s'encode par un triplet (r, v, b), chaque nombre entre 0 et 255.
Les coordonnées (x, y) sont la troisième façon de se repérer dans notre langage : x la colonne, y la ligne (vers le bas), (0, 0) en haut à gauche, et colorie (x, y) en (r, v, b) désigne sa case directement, sans trajet.
Une image numérique est une grille de pixels ayant chacun des coordonnées et une couleur, rangée en mémoire ligne par ligne.

Et ensuite

Notre mot colorie existe en Python, presque tel quel. À la prochaine séance, on crée nos premières images par programme, pixel par pixel.