La classe ConvolutionFilter permet d’appliquer un large éventail de transformations de traitement d’images aux objets BitmapData ou aux objets d’affichage, tels que la définition du flou, la détection du contour, l’accentuation, l’estampage et le biseautage.
Le principe de fonctionnement du filtre Convolution est le suivant : les pixels de l’image source sont analysés un par un pour déterminer la couleur finale de ce pixel sur la base de sa valeur et de celles des pixels adjacents. Une matrice, sous forme d’un tableau de valeurs numériques, indique dans quelle mesure la valeur de chaque pixel adjacent particulier affecte la valeur finale.
Le type de matrice le plus fréquemment utilisé est un tableau de trois par trois. La matrice comporte donc neuf valeurs :
N N N
N P N
N N N
Lorsque le filtre Convolution est appliqué à un pixel donné, il analyse la valeur colorimétrique du pixel lui-même (« P » dans notre exemple) et celles des pixels environnants (« N » dans l’exemple). Toutefois, le choix des valeurs de la matrice permet de spécifier la priorité de certains pixels pour le calcul de l’image résultante.
Par exemple, la matrice suivante, appliquée à un filtre Convolution, laissera l’image intacte, exactement comme l’image originale :
0 0 0
0 1 0
0 0 0
L’image n’a pas été modifiée car la valeur du pixel original a une priorité relative de 1 pour déterminer la couleur du pixel final, alors que les pixels environnants ont une priorité relative de 0 (autrement dit, leur couleur n’affecte pas l’image finale).
De même, la matrice suivante provoque un décalage à gauche de tous les pixels d’une image :
0 0 0
0 0 1
0 0 0
Notez que dans cet exemple, le pixel lui-même n’a aucun effet sur la valeur finale du pixel affiché au même emplacement dans l’image finale : seule la valeur du pixel de droite est utilisée pour déterminer la valeur résultante de chaque pixel.
En ActionScript, la matrice est une combinaison d’une occurrence de l’objet Array contenant les valeurs et deux propriétés spécifiant le nombre de lignes et de colonnes de la matrice. L’exemple suivant charge une image, puis lui applique un filtre Convolution sur la base de la matrice du listing précédent :
// Load an image onto the Stage.
var loader:Loader = new Loader();
var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg");
loader.load(url);
this.addChild(loader);
function applyFilter(event:MouseEvent):void
{
// Create the convolution matrix.
var matrix:Array = [0, 0, 0,
0, 0, 1,
0, 0, 0];
var convolution:ConvolutionFilter = new ConvolutionFilter();
convolution.matrixX = 3;
convolution.matrixY = 3;
convolution.matrix = matrix;
convolution.divisor = 1;
loader.filters = [convolution];
}
loader.addEventListener(MouseEvent.CLICK, applyFilter);
Un point important n’est pas évident dans ce code : l’effet de valeurs autres que 1 ou 0 dans la matrice. Par exemple, la même matrice avec le chiffre 8 au lieu de 1 dans le coin supérieur droit effectuerait la même action (décalage des pixels vers la gauche). Toutefois, les couleurs de l’image seraient 8 fois plus lumineuses. En effet, les valeurs finales de couleur des pixels sont calculées en multipliant les valeurs de la matrice par celles des couleurs originales des pixels, en additionnant ces valeurs, puis en les divisant par celle de la propriété
divisor
du filtre. Notez que, dans cet exemple, la propriété
divisor
a la valeur 1. En règle générale, pour que la luminosité des couleurs reste à peu près identique à celle des couleurs de l’image originale, la propriété divisor doit avoir une valeur égale à la somme des valeurs de la matrice. Ainsi, avec une matrice dont la somme des valeurs est 8, et pour un diviseur de 1, l’image résultante sera environ 8 fois plus lumineuse que l’image originale.
Bien que l’effet de cette matrice ne soit pas très spectaculaire, d’autres valeurs peuvent être utilisées pour créer divers effets. Voici quelques ensembles standard de valeurs de matrice permettant d’obtenir divers effets avec une matrice de trois sur trois :
-
Flou de base (diviseur 5) :
0 1 0
1 1 1
0 1 0
-
Accentuation (diviseur 1) :
0, -1, 0
-1, 5, -1
0, -1, 0
-
Détection des contours (diviseur 1) :
0, -1, 0
-1, 4, -1
0, -1, 0
-
Estampage (diviseur 1) :
-2, -1, 0
-1, 1, 1
0, 1, 2
Notez qu’avec la plupart de ces effets, le diviseur est 1. En effet, l’addition des valeurs négatives et des valeurs positives dans la matrice donne 1 (ou 0 dans le cas de la détection des contours, mais la valeur de la propriété
divisor
ne peut pas être 0).
