Issuu on Google+

Compte rendu 1 - Fondement du Multimédia Matrices et réglages colorimétriques

Avant de pouvoir expliquer et commenter les exercices réalisés en TP sur les matrices de transformations colorimétriques, il me semble important de saisir comment une couleur est codée. De ce fait je vais articuler ce contre rendu sur deux parties : la première sur une définition rapide de la couleur et de son codage, puis une seconde sur la manière de réaliser des réglages colorimétriques dans flash.

Définition de la couleur Qu’est ce que la couleur ? La couleur est liée à la lumière qui est la réunion de toutes les couleurs (entre autres). Parmi les ondes électromagnétiques il n’y a qu’une infime partie qui est visible par l’homme. Ce spectre visible correspond au spectre des couleurs visibles (de 380nm : Violet, à 780 nm : Rouge). La théorie tri-chromique est le fait que nous avons 3 nerfs (cônes) qui sont sensibles aux couleurs rouge, vert et bleu. La rétine est composée de Cônes et de Bâtonnets. Les bâtonnets sont très sensibles à la lumière mais ils ne peuvent pas détecter la couleur. Les cônes à l’inverse sont sensibles à la couleur mais peut sensible à la lumière. Le cercle chromatique (RVB) Le cercle chromatique à douze couleurs contient trois couleurs primaires, trois couleurs secondaires et six couleurs tertiaires. Les couleurs primaires sont séparées de 120° : il s'agit ici du Rouge (0°), du Vert (120°) et du Bleu (240°). 60° sépare une couleur primaire d'une couleur secondaire : il s'agit ici du Cyan (180°), du Magenta (300°) et du Jaune (60°). Les deux types de synthèse de couleurs Synthèse additive : Il s‘agit d’une source de lumière a laquelle on va ajouter les différentes couleurs. Les couleurs primaires sont RVB et secondaires CMJ. Le modèle RVB est utilisé par tous les appareils d’émission de couleurs, ex : un projecteur. Synthèse soustractive : C’est appliqué pour les systèmes qui réfléchissent la lumière. Les couleurs primaires sont CMJ et secondaires RVB. Si les 3 ondes de couleurs RVB sont réfléchies on voit en blanc, inversement si les 3 ondes sont absorbées on voit du noir. Yoann PIERRE | Master 1 PSM


Nota bene

TRUE COLOR et ALPHA - Une image TRUE COLOR est une image codée sur 8 bits par composantes de couleurs (RVB) donc 24 bits. Par ailleurs si on ajoute une couche Alpha pour la transparence on va avoir une image codée sur 32 bits. Générer une couleur aléatoire - Pour générer une couleur aléatoire TRUE COLOR il suffit de générer un entier aléatoire allant de 0 à 224.

Les modèles colorimétriques Plusieurs modèles colorimétriques existent, ayant chacun leurs avantages/inconvénients et leurs domaines d’applications. L’objectif ici n’est pas d’expliquer les différents modèles… notons simplement qu'il en existe plusieurs : RVB et R’B’V’ ; CMJ et CMJN ; CIE XYZ, CIE xyY, CIE Lab ; TSL ; etc Commission Internationale de l’Eclairage Le CIE (Commission Internationale de l’Eclairage) fut chargée en 1931 d’élaborer un tableau normalisé des couleurs. Ce dernier a donné naissance à une multitude de systèmes pratiques, dont le Lab qui représente mieux la perception des différences de couleurs mais n'est plus sur le principe de la synthèse additive. Teinte, Luminosité et Saturation Le modèle TSL (Teinte, Saturation, Luminosité) s'agit simplement d'une représentation de l'espace RVB plus proche de la manière dont l'esprit humain perçoit le phénomène de la couleur. Pour les non initiés tout comme pour les initiés, il sera donc plus facile d'utiliser les réglages TSL pour faire des retouches photographiques.

Conversion d'un modèle colorimétrique à un autre Source utile Le site http://easyrgb.com fournit les explications et les formules de conversions de différents modèles colorimétriques vers d'autres en pseudo-code. Source intéressante contenant davantage d'informations à ce sujet. Passer du RVB au CMJ Lors du TP1, nous avons réalisé une transformation d'un modèle RVB vers un modèle CMJ. D'un point de vue théorique, le passage du RVB au CMJ est très facile à appliquer. Il suffit de prendre la complémentaire de la couleur. Pour ce faire, on applique ces calculs : • • •

Cyan = 255 – Rouge Magenta = 255 – Vert Jaune = 255 – Bleu

Yoann PIERRE | Master 1 PSM


Explication du TP1 (voir TP1)

Pour réaliser ce TP, j'ai utilisé la classe colorTransform contenue dans le paquet flash.geom. La méthode colorTransform appliquée sur un objet Transform contient 8 paramètres : • • • • • • • •

redMultiplier : Valeur du multiplicateur de rouge greenMultiplier : Valeur du multiplicateur de vert blueMultiplie r: Valeur du multiplicateur de bleu alphaMultiplier : Valeur du multiplicateur de transparence alpha redOffset : Valeur du décalage appliqué au canal de couleur rouge greenOffset : Valeur du décalage appliqué au canal de couleur vert blueOffset : Valeur du décalage appliqué au canal de couleur bleu alphaOffset : Valeur du décalage appliqué au canal de transparence alpha

Ainsi, il suffit d'appliquer sur les deux movieclips témoins rvb et cmj d'appliquer la méthode colorTransform en utilisant la propriété transform des objets : rvb.transform.colorTransform = ... La couleur à afficher provenant de sliders : il faut simplement, dans un nouveau colorTransform qui sera appliqué à l'objet, reporter les valeurs comprises entre 0 et 255 pour le RVB et appliquer la formule vu précédemment pour le CMJ.

Yoann PIERRE | Master 1 PSM


rvb.transform.colorTransform = new ColorTransform (0, 0, 0, 1,.text, Number(vert.dec.text), Number(bleu.dec.text), 1); cmj.transform.colorTransform = new ColorTransform (0, 0, 0, 1, 255-Number(rouge.dec.text), 255Number(vert.dec.text), 255-Number(bleu.dec.text), 1);

Utilisation des matrices de transformation de couleurs Dans Flash, afin de réaliser des transformations colorimétriques, il faut utiliser la classe ColorMatrixFilter qui permet d'appliquer une transformation de matrice 4 x 5 aux valeurs de couleur RVBA et alpha de chaque pixel de l'image d'entrée. La matrice unitaire de la transformation colorimétrique correspond à la mettre à 100% les canaux RVB et Alpha donc une multiplication par 1. 1 0 0 0

0 0 0 1 0 0 0 1 0 0 0 1 Matrice unitaire

0 0 0 0

Matrice prédéfinie : Variance de gris Avant de vouloir passer une image en variance (ou nuance) de gris, il est important de comprendre que la variance de gris résulte de la luminosité. Cette dernière correspond à l’impression subjective causée par l’énergie lumineuse. Elle est aussi appelée brillance, clarté ou encore éclat. La luminosité en RVB s’obtient en appliquant les coefficients de chaque couleur. Y(R, V, B) = 0.30R + 0.59V + 0.11B 0.3086 0 0 0

0 0 0 0.6094 0 0 0 0.0820 0 0 0 1 Matrice variance de gris

0 0 0 0

Matrice prédéfinie : Sépia La matrice du sépia proposée ici se base sur la matrice de la variance de gris avec de légers coefficients pour les canaux rouge et vert de sorte à retrouver une teinte rougeâtre. 0.3086 0 0 0

0 0 0.6094 0 0 0.0820 0 0 Matrice sépia

0 0 0 1

85 60 0 0

Yoann PIERRE | Master 1 PSM


Matrice prédéfinie : Négatif La matrice négatif cherche a affiché la couleur inverse de l’image originale. On prend donc la valeur maximal 255 à laquelle on soustrait la valeur R, V et B. On obtient la matrice ci-dessous. -1 0 0 0

0 0 -1 0 0 -1 0 0 Matrice négatif

0 0 0 1

255 255 255 0

Matrices prédéfinies : couches RVB Afin de sélectionner uniquement la couche Rouge, Vert ou Bleu, il faut afficher 100% du canal que l’on souhaite et mettre à nul les autres canaux. On obtient ainsi les trois matrices suivantes : 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0 Matrice couche Rouge

0 0 0 0

0 0 0 1 0 0 0 0 0 0 0 1 Matrice couche Vert

0 0 0 0

0 0 0 0 0 0 0 0 0 0 1 0 0 0 0 1 Matrice couche Bleu

0 0 0 0

Matrice de la Teinte En considérant les variables suivantes, on obtient la matrice de teinte ci-après. Elle se base sur le cercle colorimétrique (recherche des valeurs avec le cosinus et le sinus) et des luminances. var t:Number = valeurADefinir*Math.PI/180; //changement de la valeur en radian var cos:Number = Math.cos(t); //définition du cosinus var sin:Number = Math.sin(t); //définition du sinus //définition des nuances de gris à appliquer sur chaque canal de couleur (Rouge, Vert et Bleu) var lumR:Number = 0.3086; var lumG:Number = 0.6094; var lumB:Number = 0.0820; lumR+cos*(1lumR)+sin*(-lumR) lumR+cos*(lumR)+sin*(0.143) lumR+cos*(-lumR)+sin*((1-lumR)) 0

lumG+cos*(-lumG)+sin*(lumB+cos*(lumG) lumB)+sin*(1-lumB) lumG+cos*(1lumB+cos*(-lumB)+sin*(lumG)+sin*(0.140) 0.283) lumG+cos*(lumB+cos*(1lumG)+sin*(lumG) lumB)+sin*(lumB) 0 0 Matrice teinte

0

0

0

0

0

0

1

0

Yoann PIERRE | Master 1 PSM


Matrice de la Saturation En considérant les variables suivantes, on définit la matrice de la saturation. var valeur:Number = valeurADefinir; var sat:Number = 1 + ((valeur > 0) ? 3 * (valeur / 100) : (valeur / 100)); var rWeight:Number = 0.3086; var gWeight:Number = 0.6094; var bWeight:Number = 0.0820; var baseSat:Number = 1 - sat; var rSat:Number = (baseSat * rWeight) + sat; var r:Number = baseSat * rWeight; var gSat:Number = (baseSat * gWeight) + sat; var g:Number = baseSat * gWeight; var bSat:Number = (baseSat * bWeight) + sat; var b:Number = baseSat * bWeight; 0.3086 0 0 0

0 0 0 0.6094 0 0 0 0.0820 0 0 0 1 Matrice saturation

85 60 0 0

Matrice de la Luminosité La matrice de luminosité ajoute le mettre nombre à chaque. De ce fait les trois canaux gardent les mêmes rapports de différences entre eux mais évoluent tous vers l'une des deux extrémités : 0 tout noir et 255 tout blanc. 1 0 0 0

0 1 0 0

0 0 valeurADefinir 0 0 valeurADefinir 1 0 valeurADefinir 0 1 0 Matrice luminosité

Yoann PIERRE | Master 1 PSM


Explication du TP2 (voir TP2) Pour pouvoir effectuer des transformations colorimétriques sur une image, il faut utiliser ColorMatrixFilter du paquet flash.filters. On applique donc une matrice de transformation colorimétrique de la façon suivante : var filter:ColorMatrixFilter = new ColorMatrixFilter(matrice) image.filters = new Array(filter); L’application de tous les réglages prédéfinis, à savoir sépia, variance de gris, négatif et les couches RVB correspond à la mise en tableau (Array) des valeurs expliquées ci-dessus. Ce tableau est alors appliqué à l’image via ColorMatrixFilter comme expliqué précédemment. Pour les réglages de Teinte, Saturation et Luminosité, il est nécessaire de recourir à la multiplication de matrice afin de combiner les différents réglages. Par ailleurs, il n’est pas possible de simplement multiplier la dernière matrice appliquée à celle que l’on veut appliquer à l’instant T car on effectuerait une modification colorimétrique à une image qui est déjà modifiée (ce qui surmultiplierait les effets !)… Il faut donc appliquer les modifications sur la dernière matrice uniquement lorsque l’utilisateur change de type de réglage. if (slidePresent != slidePrecedent) {derniereMatrice = matricePresent;} Les matrices 4x5 sont des tableaux (Array) et non pas de type matrix, il est donc nécessaire de réaliser sa propre fonction de concaténation de deux matrices. Voir l’extrait de code réalisant la concaténation de matrice et derniereMatrice ci-dessous : var rslt:Array = new Array(); for (var i=0;i<=19;i++) { rslt[i] = 0; for (var j=0;j<=3;j++) { rslt[i] += (matrice[5*j+i%5]*derniereMatrice[Math.floor(i/5)*5+j]); } if ((i+1)%5 == 0) {rslt[i] += derniereMatrice[i];} }

Yoann PIERRE | Master 1 PSM


Transformation Colorimétrique