Filtro de convolución

Flash Player 9 y posterior, Adobe AIR 1.0 y posterior

La clase ConvolutionFilter se puede utilizar para aplicar una amplia gama de transformaciones gráficas, como efectos de desenfoque, detección de bordes, nitidez, relieve y biselado, a los objetos de visualización o a los objetos BitmapData.

Conceptualmente, el filtro de convolución recorre los píxeles de la imagen de origen de uno en uno y determina su color final basándose en el valor de cada píxel y de los que lo rodean. Una matriz, especificada como un conjunto de valores numéricos, indica la intensidad con la que cada uno de los píxeles circundantes afecta al valor final.

A modo de ejemplo, se puede tomar el tipo de matriz usado con mayor frecuencia, la matriz de tres por tres, que consta de nueve valores:

N    N    N 
N    P    N 
N    N    N

Si el filtro de convolución se aplica a un píxel determinado, este consulta el valor de color del píxel en sí ("P" en el ejemplo), además de los valores de los píxeles que lo rodean (llamados "N" en el ejemplo). No obstante, al definir los valores de la matriz, se especifica la prioridad que algunos píxeles tendrán a la hora de afectar a la imagen resultante.

Por ejemplo, la siguiente matriz, aplicada mediante un filtro de convolución, dejará la imagen exactamente igual que estaba:

0    0    0 
0    1    0 
0    0    0

La razón por la que la imagen no se ve modificada es porque el valor del píxel original tiene una fuerza relativa de 1 para determinar el color final del píxel, mientras que todos los que lo rodean tienen una fuerza relativa de 0, lo que significa que sus colores no afectan a la imagen final.

Del mismo modo, la siguiente matriz hará que los píxeles de una imagen se desplacen un píxel hacia la izquierda:

0    0    0 
0    0    1 
0    0    0

Hay que tener en cuenta que, en este caso, el píxel en sí no tiene ningún efecto sobre el valor final del píxel mostrado en esa posición en la imagen final, ya que solo se usa el valor del píxel de la derecha para determinar el valor resultante de ese píxel.

En ActionScript, la matriz se crea como una combinación de una instancia de Array que contiene los valores y dos propiedades que especifican el número de filas y columnas de la matriz. En el siguiente ejemplo se carga una imagen y, una vez cargada, se le aplica un filtro de convolución utilizando la matriz del listado anterior:

// 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);

Algo que no resulta obvio en este código es el efecto que se produce al utilizar valores diferentes a 0 y 1 en la matriz. Por ejemplo, la misma matriz con el número 8 en lugar de 1 en la posición de la derecha, realiza la misma acción (desplazar los píxeles a la izquierda) y, además, afecta a los colores de la imagen, haciéndolos 8 veces más brillantes. Esto se debe a que el color final de los píxeles se calcula multiplicando los valores de matriz por los colores de los píxeles originales, sumando los valores y dividiendo por el valor de la propiedad divisor del filtro. Hay que tener en cuenta que en el código de ejemplo, la propiedad divisor tiene el valor 1. En general, si se desea que el brillo de los colores permanezca aproximadamente igual que en la imagen original, el divisor debe ser igual a la suma de los valores de la matriz. De este modo, en el caso de una matriz cuyos valores suman 8 y el divisor vale 1, la imagen resultante será aproximadamente 8 veces más brillante que la original.

Si bien el efecto de esta matriz no es demasiado apreciable, es posible utilizar otros valores en la matriz para crear diversos efectos. A continuación se ofrecen varios conjuntos estándar de valores de matriz con los que obtener distintos efectos mediante una matriz de tres por tres:

Desenfoque básico (divisor 5):
```
     0 1 0 
     1 1 1 
     0 1 0
```

Nitidez (divisor 1):

     0, -1, 0 
    -1, 5, -1 
     0, -1, 0

Detección de bordes (divisor 1):

     0, -1, 0 
    -1, 4, -1 
     0, -1, 0

Efecto de relieve (divisor 1):
```
    -2, -1, 0 
    -1, 1, 1 
     0, 1, 2
```
Cabe destacar que en la mayor parte de estos efectos el divisor es 1. Esto se debe a que los valores negativos de la matriz, sumandos a los positivos, dan un valor de 1 (0 en el caso de la detección de bordes, pero el valor de la propiedad divisor no puede ser 0).