# TIFO - Codage, partie 1: couleurs et representations
# Codage des couleurs
## Le modele RGB/RVB
Espace RGB/RVB (Red-Green-Blue)
- One code une couleur par un triplet representant la quantite de rouge, de vert et bleu de la couleur
- Une couleur est un point du cube:
- L'origine du repere $(0,0,0)$: le noir
- L'opposee: $(1,1,1)$ le blanc
- Chaque axe code une couleur primaire (R,G,B)
![](https://i.imgur.com/zrEepyG.png)
### Decomposition d'une image suivant les 3 axes:
![](https://i.imgur.com/IV7RgsS.png)
![](https://i.imgur.com/dUegR2M.png)
Sur une image reelle:
![](https://i.imgur.com/WDvbStb.png)
:::info
Le modele RGB
- Modele base sur la perception humaine (couleurs primaires en synthese additive)
- Pas toujours intuitif pour selectionner une couleur
- Tres repandu
:::
## Le model HLS
L'espace **HLS (Hue, Lightness, Saturation)**
:::info
On code une couleur par 3 composantes: teinte, luminance et saturation. L'espace ressemble a 2 cones que l'on a joint par leurs bases. Une couleur est un point de cet espace
:::
- Teinte
- C'est l'angle sur le disque
- $0^o$ rouge
- $60^o$ jaune
- $120^o$ vert
- $180^o$ cyan
- $240^o$ bleu
- $300^o$ magenta
- Luminance
- La luminance est la hauteur dans le cone
- Saturation
- La saturation ("purete de la couleur") est la distance au centre du disque
![](https://i.imgur.com/HL0yA4L.png)
### Decomposition suivant les 3 axes:
![](https://i.imgur.com/79Owa9V.png)
![](https://i.imgur.com/Ms2tTOo.png)
Sur une image reelle:
![](https://i.imgur.com/0W3wAZH.png)
### La saturation
> J'ai un p'tit singe ici:
![](https://i.imgur.com/PRIQoLy.jpg)
- Modele intuitif pour "*choisir une couleur*".
:::warning
L'utilisation de la teinte est interessante toutefois, sur des saturations faibles, la teinte n'a plus vraiment de signification
:::
- Beaucoup de variantes (HSV...)
## Le modele ~~YMCA~~ CMY
L'espace CMY (couleurs primaires en syntese soustractive)
- Mieux adpate pour les peripheriques d'impression
- Beaucoup de variantes
:::warning
En image on l'utilise quasiment jamais.
:::
## Codage d'un niveau de gris
*Comment coder un niveau de gris ?*
- Une seule composante qui code la luminance
- Une convention possible:
- Composante nulle $\rightarrow$ pas de lumiere (noir)
- Composante au maximum $\rightarrow$ maximum de lumiere (blanc)
- Un niveau de gris quelconque = un point de l'axe:
![](https://i.imgur.com/FYjeWDl.png)
## Autres espaces
Il existe d'autres espaces de representation
- YIQ
- NTSC 1953
- Facilite la transmission et la compatibilite de l'image tant pour un ecran couleur que un ecran noir et blanc
- Y donne la luminance
- Lab
- La distance entre 2 couleurs dans cet espace est representative de la difference percue visuellement entre les 2 couleurs
- XYZ
- YCbCr
- ...
# Conversions entre espaces de couleurs
## RGB $\leftrightarrow$ HLS
- H$[0^o, 360^o]$ L$[0,1]$ S$[0,1]$
- Teinte
- Estime en fonction de 2 bornes min et max ![](https://i.imgur.com/EiISSgA.png)
- Pour L $\le 0,5$
- Saturation
- Joue sur l'ecartement min $\leftrightarrow$ max sur la teinte
- Si S $=0$, min $=$ max $=$ L
- Donc max $=$ ($1$ + S)L et min $=$ ($1$ - S)L
![](https://i.imgur.com/u5TH6Ja.png)
- Pour L $\ge 0,5$
- Meme raisonnment
## RGB $\leftrightarrow$ YIQ
Le passage de l'un a l'autre est simple:
$$
\begin{pmatrix}
Y\\
I\\
Q
\end{pmatrix}=
\begin{pmatrix}
0.30 & 0.59 & 0.11\\
0.60 & -0.28 & -0.32\\
0.21 & -0.52 & 0.31
\end{pmatrix}
\begin{pmatrix}
R\\
G\\
B
\end{pmatrix}
$$
## RGB $\leftrightarrow$ CMY
- Les couleurs primaires de l'espaces CMY sont les couleurs complementaires des couleurs primaires de l'espace RGB
- La conversion est donc simple:
- $R = 1 - C$
- $G = 1 - M$
- $B = 1 - Y$
![](https://i.imgur.com/R5meCzf.png)
## RGB $\leftrightarrow$ niveaux de gris
- Idee simple et intuitive:
- $L = (r + v + b)/3$
- Amelioration
- $L = 0.299r + 0,587v + 0,114b$
- Pourquoi la premiere idee est-elle fausse ?
- Car nos yeux percoivent certaines couleurs mieux que d'autres (cf. la seconde formule)
- Peut-on faire l'inverse (passer du niveau de gris a la couleur ?)
- Non bien-sur: projection, on passe d'un image 3D a 2D, on a perdu de l'info
- Avec des regles on peut se donner une colorisation de l'espace (teinte sepia, vert comme une camera de surveillance, etc.) mais **on ne retrouvera pas la couleur d'origine**
## RGB $\leftrightarrow$ noir et blanc
- Est-il possible de passer a une image noir et blanc ?
- Utile pour traiter les images "trop" riches
- On binarise l'image
- *Qu'est-ce qu'on veut extraire de l'image ?*
- Y a t il un interet a passer a une image en noir et blanc ?
## Codage des couleurs
Il existe differents espaces pour la representation des couleurs
- Il faut etre capable de choisir le bon, en fonction de l'objectif recherche
- Etre capable, dans la mesure du possible de passer de l'un a l'autre
# Codage de l'image
## Representation d'une image couleur
Codage d'une image par une matrice:
- L'image est une fonction discrete 2D, elle est souvent codee par une matric
- Pour une image codee en RGB, un point de l'image = un triplet (r,g,b) de valeurs dans la matrics
- Un point de l'image = un pixel. Que signifie pixel ?
- Picture element
![](https://i.imgur.com/PHxVo6m.png)
## Representation d'une image en niveaux de gris
Codage d'une image par une matrice:
- L'image est une fonction discrete 2D, elle est souvent codee par une matrice
- Pour une image codee en niveaux de gris, un point de l'image = une valeur dans la matrice codant la luminance
![](https://i.imgur.com/k5cxJor.png)
## Acces aux pixels
- Comment coder cette image en memoire ?
- Matrice ? Vecteur ?
- Comment acceder a un point de cette image ?
- Comment acceder a ses voisins ?
- Comment parcourir l'image ?
![](https://i.imgur.com/DwVDzec.png)
``` cpp
for (i = 0; i < sx; i++)
for (j = 0; j < sy; j++)
offset = i + j * sx
```
``` cpp
for (j = 0; i < sy; j++)
for (i = 0; j < sx; i++)
offset = i + j * sx
```
``` cpp
for (offset = 0; offset < sx * sy; ++offset)
```
- Utiliser un iterateur ?
## Resolution/Echantillonage
- Discretisation spatiale (resolution)
![](https://i.imgur.com/Zolw9eM.png)
- Echantillonage (amplitude)
![](https://i.imgur.com/89PRtaB.jpg)
## Nombre de couleurs - Echantillonnage
Codage par palette (couleurs indexees)
| Bit(s) par pixel | Couleurs |
| -------- | -------- |
| 1 bpp | ??? |
| 2 bpp | ??? |
| 4 bpp | ??? |
| 6 bpp | ??? |
| 8 bpp | ??? |
Codage sans palette
| Bits par pixel | Couleurs | Bits par canaux |
| -------- | -------- | -------- |
| 16 bpp | ? | ? |
| 24 bpp | ? | ? |
| 32 bpp | ? | ? |
## Representation de l'image
Un moyen classique de representer une image est d'utiliser une matrice. Y a t il d'autres approches ?
- Arbres (max tree, min tree, tree of shape)
- Graphes
- ...
Maillage
- On choisit intuitivement un maillage ~~carre~~ mais cela peut-il presenter des inconvenients ?
- Y a t il d'autres maillages possibles ?
## Topologie
Choix de la connexite des pixels
4-connexe:
- Voisins en haut, en bas, a gauche, a droite
- Pas lies aux voisins en diagonale
- Plusieurs regions
![](https://i.imgur.com/KwU8LD2.png)
8-connexe:
- Une seule region
![](https://i.imgur.com/lB2UnpX.png)
- Cela pose un probleme de topologie:
![](https://i.imgur.com/s3yJpIw.png)
![](https://i.imgur.com/vXYhJgS.png)
- Si le fond est 8-connexe (en noir), la forme (en blanc) est 4-connexe
- Si le fond est 4-connexe (en noir), la forme (en blanc) est 8-connexe
- Contradiciton avec le theoreme de Jordan
- Que faire ?
- Vivre avec
- Changer la forme de pixels
- Intercaler des frontieres entre les pixels
- ...
### Changer la forme de pixels:
![](https://i.imgur.com/S9s7Sxw.png)
Codage en memoire:
![](https://i.imgur.com/HuOWWvi.png)
Pour:
- Plus de probleme de connexite
- Plus de probleme de distance
- Tout le monde est a la meme distance
Contre:
- Gestion de la memoire
- Inteprete chaque ligne de la matrice comme ayant un decalage *offset*
### Intercaler des frontieres entre les pixels
Les frontieres sont determinees par les *inter-pixels*
![](https://i.imgur.com/ZOprlnX.png)
![](https://i.imgur.com/Sdrsk47.png)
### Exemple d'arbre: Max tree
A chaque fois qu'on a 2 regions qui se separent, on cree des branches
![](https://i.imgur.com/IxO2ni4.png)
## Stockage/Transfer
- Differents formats:
- JPEG, TIFF, PNM, PNG, BMP, GIF, TGA
- Choix en fonction de criteres
- Avec ou sans compression (avec ou sans perte)
- Avec ou sans couleur
- Avec ou sans palette
- Une seule image ou plusieurs
- Optimise pour une architecture ? (Ex. BMP sauvegarde a l'envers)
- Libre ou pas (Ex. GIF et Compuserve)
### Exemple
- Format PNM
- PBM: noir et blanc
- PGM: niveaux de gris
- PPM: couleurs
- 2 variantes
- PNM
- TGA
- Format tres simple (extrait de spec)
![](https://i.imgur.com/b9B0dVp.png)
# Application
- On a vu pas mal de choses sur la formation d'une image
- On va l'appliquer
- en changeant les couleurs ou l'illumination d'une image
- en changeant l'organisation spatiale des pixels de l'image
- en combinant des changements dans le couleurs et dans l'organisation spatiale des pixels
## Changement d'illumination
En tous points de la scene, la reponse du capteur est donne par:
$L(x,y) = \int E(x,y,\lambda)S(x,y,\lambda)R(\lambda)d\lambda$
- Avec
- $E(x,y)$ l'eclairage
- $S(x,y,\lambda)$ la reflectance de la surface (fonction de la longueur d'onde $\lambda$)
- $R(\lambda)$ la sensitivite du capteur qui (pour simplifier est supposse repondre a une seule longueur d'onde: $R(\lambda) = \sigma(\lambda-\lambda_k)$)
On a donc: $L(x,y) = E(x,y)S(x,y,\lambda_k)$
La meme image prise avec 2 niveaux d'illuminations differents:
- $L1(x,y) = E_1(x,y)S(x,y,\lambda_k)$
- $L2(x,y) = E_2(x,y)S(x,y,\lambda_k)$
Donc:
- $L2(x,y) = (E_2(x,y)/E_1(x,y))*L1(x,y)$
Et donc:
- **$L2(x,y)=C*L1(x,y)$**
:::success
Pour changer l'illumination il faut donc multiplier les valeurs des pixels par une constante (et non additionner/soustraire par une constante comme c'est usuellement fait)
:::
## Correction d'illumination non uniforme
- Soit une image acquise $I_1$ avec un eclairage non uniforme
- $I_1(x,y)=S(x,y,\lambda_k)E(x,y)$
![](https://i.imgur.com/uLcwNzh.png)
- Soit l'image du fond $I_f$
- $I_f(x,y)=F(x,y,\lambda_k)E(x,y)$
![](https://i.imgur.com/Z4NIvg1.png)
### La soustraction des deux donne:
$$
I_1(x,y)-I_f(x,y) = [S(x,y,\lambda_k)-F(x,y,\lambda_k)]E(x,y)
$$
![](https://i.imgur.com/VApsjT6.png)
### Le ratio des 2 donne:
$$
\frac{I_1(x,y)}{I_f(x,y)} = \frac{S(x,y,\lambda_k)}{F(x,y,\lambda_k)}
$$
![](https://i.imgur.com/aVq3M9A.png)
### Difference vs Ratio
![](https://i.imgur.com/rfn1zih.png)
## Modification des couleurs de l'image
- Application : effet artistique $\rightarrow$ effet sepia
- On associe a un niveau de luminance une couleur
![](https://i.imgur.com/rfIJnPk.png)
$$
\begin{pmatrix}
r\\
g\\
b
\end{pmatrix}=
\begin{pmatrix}
0,784 & 0 & 0\\
0 & 0,588 & 0\\
0 & 0 & 0,391
\end{pmatrix}
\begin{pmatrix}
l\\
l\\
l
\end{pmatrix}
$$
Resultat:
![](https://i.imgur.com/uZx8NHd.png)
## Modification de l'organisation spatiale des pixels
Application: effets artistiques
- $image\_resultat(x,y) = image\_origin(g(x,y), h(x,y))$
- Les fonctions $g$ et $h$ ne tiennent pas forcement compte de la valeur du pixel
- Rotation - cisaillement
![](https://i.imgur.com/q6npf2K.jpg)
- Etirement - retrecissement
![](https://i.imgur.com/FajJpsd.jpg)
- Ondulations
- Spirale
- Tranlations aleatoires
- ...
![](https://i.imgur.com/lfXcuXH.png)
![](https://i.imgur.com/wwg3153.png)
> La 2e image c'est quand on me chatouille le cou
:::danger
$image\_resultat(x,y) = image\_origin(g(x,y), h(x,y))$
La transformation doit etre appliquee dans ce sens !
:::
# Application: le morphing d'images
## Modification des couleurs et de l'organisation spatiale des pixels
- Application: le morhping
- Vu la structure d'une image, il est possible d'appliquer des operateurs sur ces images
- Exemple: la moyenne ![](https://i.imgur.com/tOLACWk.png)
- En combinant
- Une moyenne ponderee des images (dont les poids evoluent au cours du temps)
- Un champ de vecteur de translation
# Problemes de precision
- Sur les fonctions colorimetriques
- Sur les transformations spatiales
## La correction gamma
Retour sur la perception
- La perception de l'oeil est logarithmique ![](https://i.imgur.com/RGuhlgk.png)
- La repartition des niveaux d'energie n'est donc pas lineaire mais exponentielle
![](https://i.imgur.com/lvhzezp.png)
:::danger
Tous les calculs fait jusqu'a present sont **completement faux** car 50% du signal n'est pas a la moitie du niveau de gris (128) mais a 186.
:::
$$
r = \frac{number}{255}^{gamma}\\
gamma = 2.2
$$
- Les niveaux de gris ne sont que des numeros, faire des operations (moyenne, addition, application de filtres, interpolation...) n'a pas vraiment de sens
- Dans la pratique, on omet souvent la correction gamma lors des etapes de filtrages
- C'est faux
- Il y a un compromis entre precision du resultat et vitesse
Retour sur le passage de la couleur en niveuax de gris
- Espace CIE XYZ 1931
- $R'= r/255 V' = v/255 B' = b/255$
- $Rsrvb = [(R'+0.055)/1.055]^{2.4}$
- $Vsrvb = [(V'+0.055)/1.055]^{2.4}$
- $Bsrvb = [(B'+0.055)/1.055]^{2.4}$
$$
\begin{pmatrix}
X\\
Y\\
Z
\end{pmatrix}=
\begin{pmatrix}
0,4124 & 0,3576 & 0,1805\\
0,2126 & 0,7152 & 0,0722\\
0,0193 & 0,1192 & 0,9505
\end{pmatrix}
\begin{pmatrix}
Rsrvb\\
Vsrvb\\
Bsrvb
\end{pmatrix}
$$
- $Y$ donne la luminance
## L'interpolation
- Que faire lorsque l'on doit "chercher" la valeur d'un pixel mais que l'on ne tombe pas precisement sur un pixel ?
- 1er solution (rapide): prendre la du pixel le plus proche ![](https://i.imgur.com/bavt9yR.png)
- 2nd solution: Faire une interpolation bi-lineaire ![](https://i.imgur.com/ebNQsiB.png)
Peut-on faire mieux ?
- Interpolation bicubique
- Utilise 4 points (calcul de la derivee) ![](https://i.imgur.com/dKybTVd.png)
### Interpolation bicubique
![](https://i.imgur.com/CmdOiGN.png)
$$
f(x) = ax^3+bx^2+cx+d\\
f'(x)=3ax^2+2bx+c
$$
On connait les valeurs pour $x=-1$, $x=0$, $x=1$ et $x=2$
$$
f(-1)=p0, f(0)=p1 \text{ et } f(2)=p3\\
f'(0)=(p2-p0)/2 \text{ et } f'(1)=(p3=p1)/2
$$
Mais aussi
$$
f(0) = d\\
f(1) = a+b+c+d
$$
$$
f'(0) = c\\
f'(1) = 3a+2b+c
$$
On peut donc en conclure que les coefficients a,b,c,d du ploynome et donc interpoler les valeurs intermediaires du signal entre 0 et 1.
![](https://i.imgur.com/UvTPioQ.png)
Artefact:
![](https://i.imgur.com/uZaB0gA.png)
### Autres interpolation
- Il existe d'autres methodes d'interpolation
- Pour faire le choix de l'interpolation, il faut faire un compromis entre vitess et qualite
![](https://i.imgur.com/dFMrb9W.jpg)
# Conclusion
- Codage de l'image et de la couleur
- Espaces de couleurs, passage d'un espace a l'autre
- Applications
- Effet sepia
- Transformation artistiques
- Morphing
- Correction gamma
- Interpolation