Here is the second tutorial in Niko’s Inkscape Filter Effects series. Today’s tutorial focuses on the color matrix filter. The quote below (taken from the tutorial) best sums it up…

Color Matrix is an interesting filter, that can mix up the colours in your image in many ways. Blanc and white images, sepia toning, hue rotation and removing one of the basic colours from image are a couple examples, what kind of modifications this filter can do.

this demo requires Flash 10 Beta installed:

Extract from as3 language reference:

histogram() method

flash10 function histogram(hRect:Rectangle = null):Vector

Language Version : ActionScript 3.0
Player Version : Flash Player 10

Computes a 256 bin histogram of a BitmapData object.
The functions returns a vector of 4 number vectors.
The 4 number vectors represent the red, green, blue
and alpha components respectively. Each number vector
contains 256 values which represent the population count
of a indivual component value, from 0 to 255.

Parameters
hRect:Rectangle (default = null) — The area of the BitmapData
object that should be used.

Returns Vector

some code snippet from my demo:

function updateHistograms(bmpData:BitmapData,
sprites:Vector.<Sprite>):void {

// histogram is a Vector in two dimensions
// notice the interesting type Vector.<Vector.<Number>>
var hst:Vector.<Vector.<Number>> = bmpData.histogram();

var height:int=128; // height for diagrams
var maxValue:Number;
var value:Number;
var i:int;
var clr:int = 16; // value for bitwise shift left, start with red
// channel = 0:red, 1:green, 2:blue

for (var channel:int = 0; channel!=3; channel++) {

// find the max value on the histogram,
// i goes from 1 to 254,
// I discarded the 0 and 0xFF values to get a better balanced chart

maxValue =0.0;
for (i=1; i!=255; i++) {
value = hst[channel][i];
maxValue = value>maxValue ? value : maxValue;
}

with (sprites[channel].graphics) {
// empty and white background
clear();
beginFill(0xFFFFFF,1.0);
drawRect(0,0,255,height);
// draw a vertical line for each value with a corresponding color

i=0;
for each(value in hst[channel]) {
lineStyle(1.0,i<<clr) ;
moveTo(i,height);
lineTo(i++,Math.max(0.0,height-value*height/maxValue) );
}

}
clr -= 8;
}
}

In the demo I used Grant Skinner’s ColorMatrix for manipulating the image.

… two other new methods for BitmapData are getVector() and setVector() working just like older getPixels and setPixels-methods except with a Vector of uints, length = width x height:
like for instance copying pixels from 0,0 – 49,49 to 100,100 – 149,149:

var bmpVct:Vector.<uint> = bmpData.getVector(new Rectangle(0,0,50,50));
bmpData.setVector(new Rectangle(100,100,50,50),bmpVct);

And an example of experimental image manipulation of sorting by the pixel value

Para un proyecto que estoy realizando necesitaba poder manejar el brillo, contraste y saturación de unas imágenes. Descubrí (tristemente) que ActionScript no tiene métodos sencillos para afectar el color de esa manera… (Yo estaba buscando algo como: movie_clip.setSaturation = 20; o algo así!)… Sin embargo, me dí cuenta que era posible por medio de operaciones de matrices… YAY!!!…

… Ese “yay” fué sarcástico: siempre he apestado en álgebra lineal.

Pero bueno… El proyecto tenía que salir adelante así que seguí buscando alguna solución. La encontré y la quiero compartir con ustedes: Librería ColorMatrix para ActionScript 3 (también la tienen para el AS2). EXCELENTE y muy muy fácil de usar. Cuando te la bajas incluye un buen ejemplo en el que vemos cómo instanciarla y cómo aplicar los efectos de color a manera de filtros. Gracias a esto quedé bien con un cliente.

prototipo en el que estoy trabajando:
widget de visualización
basado en datos XML con manejo
y asignación de color dinámico