ColorMatrixFilter - die Matrix

[michael]

Zitat von Alois

ach ja, noch etwas Stoff :

var w=myMC._width;
var h=myMC._height;
var greyscale = new flash.display.BitmapData(w,h,true);
var bmh=this.createEmptyMovieClip("bmp_holder",3);
bmh.attachBitmap(greyscale,1,"auto",true);
greyscale.draw(myMC);
for(var i=0;i<w;i++){
        for(var j=0;j<h;j++){
                var pix=greyscale.getPixel(i,j)>>16;
                /*einfach nur den Rotanteil nutzen bringt meist
                recht gute Graustufenbilder, aber man kann natürlich
                auch eine Mischung aus rgb testen*/
                pix=pix<<16|pix<<8|pix;
                greyscale.setPixel(i,j,pix);
        }
} 

...habs jetzt aus einer anderen Bastelei von mir rauskopiert, aber das dürfte so gehen...

Edit: Syntaxfehler entfernt

hier noch der coolere weg graustufenbilder zu erzeugen
samt script:
http://page.freett.com/isolations_ne...ad/test20.html

hab die kommentare mal nach meinem verständnis übersetzt

//invert
var filterObj = new flash.filters.ColorMatrixFilter ();
filterObj.matrix = new Array (0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0);
mc.filters = [filterObj];
//greyscale
var filterObj = new flash.filters.ColorMatrixFilter ();
filterObj.matrix = new Array (1 / 3, 1 / 3, 1 / 3, 0, 0, 1 / 3, 1 / 3, 1 / 3, 0, 0, 1 / 3, 1 / 3, 1 / 3, 0, 0, 0, 0, 0, 1, 0);
mc.filters = [filterObj];
//sepia
var filterObj = new flash.filters.ColorMatrixFilter ();
filterObj.matrix = new Array (1 / 2, 1 / 2, 1 / 2, 0, 0, 1 / 3, 1 / 3, 1 / 3, 0, 0, 1 / 4, 1 / 4, 1 / 4, 0, 0, 0, 0, 0, 1, 0);
mc.filters = [filterObj];
//scharfzeichnung
var filterObj = new flash.filters.ConvolutionFilter ();
filterObj.matrix = new Array (0, -1, 0, -1, 5, -1, 0, -1, 0);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];
//konturen
var filterObj = new flash.filters.ConvolutionFilter ();
filterObj.matrix = new Array (1, 1, 1, 1, -7, 1, 1, 1, 1);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 0;
filterObj.divisor = 1;
mc.filters = [filterObj];
//relief
var filterObj = new flash.filters.ConvolutionFilter ();
filterObj.matrix = new Array (1, 1, 0, 1, 0, -1, 0, -1, -1);
filterObj.matrixX = 3;
filterObj.matrixY = 3;
filterObj.bias = 128;
filterObj.divisor = 1;
mc.filters = [filterObj]; 

[Alois]

Zitat von michael

...

hab die kommentare mal nach meinem verständnis übersetzt

//invert
var filterObj = new flash.filters.ColorMatrixFilter ();
filterObj.matrix = new Array (0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1, 0);
mc.filters = [filterObj];
... 

nein das ist nicht invert, da sind praktisch nur Rot- und Blaukanal vertauscht, ein Negativ geht so:

PHP-Code:

var filterObj = new flash.filters.ColorMatrixFilter ();
filterObj.matrix = new Array (-1, 0, 0, 0, 255, 
0 ,-1, 0, 0, 255,
0, 0, -1, 0, 255,
0, 0, 0, 1, 0);
mc.filters = [filterObj]; 


...naja, wenn Du willst kann ich Dir die matrix jetzt sogar erklären, aber eigentlich spricht das ja fast für sich (r,g,b,a,offset).

[michael]

ah, da das beispielbild quasi nur aus rot und blau bestand, hielt ich das für invertiert.

mit der matrix hab ich mich schon immer schwer getan
(nein, ich schlucke keine blauen pillen)
wie sind denn die 5 werte in den 15 einzuordnen?
vieleicht kram ich auch nen alten thread zu begingradienfill raus
von dir erklärt wär aber noch schöner.
auch wenn ich das dodekaeder-script bis heute nicht kapiert hab

[Alois]

...naja, die ColorMatrix ist wohl eher verwandt mit color.setTransform (da hab ich auch mal was erklärendes drüber geschrieben), anders ist halt nur, daß man jetzt nicht mit dem ursprünglichen Rotanteil den neuen Rotanteil sondern zusätzlich auch den Grün-,Blau- und Alphaanteil manipulieren kann.
Die ersten 5 Zahlen des arrays manipulieren den Rotanteil des pixels,
danach kommen 5 Zahlen für Grün,
dann 5 für Blau...
und die letzten 5 sind für alpha....
und der neue Rotanteil wird so berechnet
array[0]*(alter Rotanteil)+array[1]*(alter Grünanteil)+array[2]*(alter Blauanteil)+array[3]*(altes alpha/Transparenz)+array[4]
...und so geht das dann halt auch mit Grün, Blau und alpha.
Die Matrix sieht also so aus(im Beispiel mal die Werte für ein Negativ):
.......|*Rot+|*Grün+|*Blau+|*Alpha+|+
______________________________________
Rot...|...-1..|....0...|....0....|.....0....|..255....
______________________________________
Grün.|...0....|..-1...|....0....|.....0....|..255....
______________________________________
Blau..|...0...|...0....|..-1....|.....0....|..255....
______________________________________
Alpha|...0...|...0....|....0....|.....1....|....0. ....

[michael]

vielen dank für deine ausführungen.
ich muss das noch ein paarmal lesen bis ich verstanden habe
warum man 5 werte braucht um rotanteil des pixels zu beschreiben

[Alois]

man muss nicht unbedingt 5 Werte haben,
aber so kann man halt mehr manipulieren, ohne den 5.Wert(den offset) könnte man z.B. kein Negativ machen, hier noch mal der link zur color.setTransform-Erklärung:
Farbe bestimmen mit color.setTransform
...der ja dem ColorMatrixFilter sehr ähnlich ist. Genau genommen entspricht
ColorObject.ra=ColorMatrixArray[0]*100
ColorObject.rb=ColorMatrixArray[4]
ColorObject.ga=ColorMarixArray[6]*100
ColorObject.gb=ColorMatrixArray[9]
ColorObject.ba=ColorMatrixArray[12]*100
ColorObject.bb=ColorMatrixArray[14]
ColorObject.aa=ColorMatrixArray[18]*100
ColorObject.ab=ColorMatrixArray[19]
...allerdings kann man mit ColorSetTransform keine Graustufenbilder...

[michael]

ahhh, gleich hab ichs aber setTransform hat 8werte die ich nachvollziehen kann. an dieser stelle hakt es noch:

Die ersten 5 Zahlen des arrays manipulieren den Rotanteil des pixels,
und der neue Rotanteil wird so berechnet
array[0]*(alter Rotanteil)+array[1]*(alter Grünanteil)+array[2]*(alter Blauanteil)+array[3]*(altes alpha/Transparenz)+array[4]

wie kann denn der rotanteil eines bildes über alten grünanteil verfügen? wenn ich mir in einem bildbearbeitungpropramm den roten kanal eines bildes anzeigen lasse, gibts da doch nur rotwerte von 0-255.

ich habe also jetzt mehr möglichkeiten als bei setTransfom, weil ich den rotanteil eines bildes mit einem neuen grün/blau anteil multiplizieren kann,
entsprechend grün und blau mit den jeweils anderen werten, wenn ich es richtig verstanden habe.


danke für die geduld.

[michael]

hab das mal zu einem neuen thema gemacht.
ist für sich interessant und hatte fast nichts mehr mit bitmapdata zu tun.

[Alois]

Zitat von michael

...
wie kann denn der rotanteil eines bildes über alten grünanteil verfügen? wenn ich mir in einem bildbearbeitungpropramm den roten kanal eines bildes anzeigen lasse, gibts da doch nur rotwerte von 0-255.
...

Ja und genau das muss man auch beachten, sie die doch die greyscale-matrix an, da wird immer 1/3 (=0.33...) des alten Rot-,Grün- und Blauwertes für den neuen Rotwert hinzugerechnet. Würde man dort jeweils den vollen Wert nehmen wäre das Ergebnis viel zu hell. Wenn das Ergebnis über 255 oder unter 0 ist wird der Wert halt als 255 oder 0 interpretiert...
...und weil es jetzt ein eigener thread ist, hier nochmal eine schöne Matrix:

PHP-Code:

//schwarzweiss
var filterObj = new flash.filters.ColorMatrixFilter ();
filterObj.matrix = new Array (
255, 255, 255, 0, -255*255,
 255 ,255, 255, 0, -255*255,
 255, 255, 255, 0, -255*255,
 0, 0, 0, 1, 0);
mc.filters = [filterObj]; 


...wenn das Bild zu hell oder zu dunkel ist, kann man das mit den Offset-Werten variieren.

btw. warum werden die matrix-Werte mit dem as-tag immer so weit rechts angezeigt?
(naja, mit dem php-tag gehts ja)

[NON]

Hallo,

der ColorMatrixFilter ist schon echt dufte,
ich würde nur gerne wissen,
wie ich ein Bild einer beliebigen RGB-Farbe nach einfärben kann.

z.B. wie in Photoshop, wenn man folgendes durchführt:
Bild -> Anpassungen -> Farbton/Sättigung, unten den Haken "Färben" sätzt und entsprechend der gesetzten/eingestellten Farbe das Bild färbt.

sämtliche Beispiele die ich über die Suche gefunden habe befassen sich mit Graustufen und leider eröffnet sich mir darüber nicht der Weg zu meiner gesuchten Lösung

Ich möchte ein Bild mit diesem "B5C1C6" Farbton einfärben,
entspricht
R: 181
G: 193
B: 198

wie müsste ich die Matrix füllen? -wie ich eine Graueinfärbung hin bekomme ist mir bewusst, ich bekomme nur nie das Ergebnis hin wie es mir Photoshop mit besagtem Farbton, über besagte Methode, liefert.

Wäre über einen Lösungsvorschlag sehr dankbar

grüße NON

[thekai]

Ist es möglich so einen Filter zu Tweenen?
Vlt. 2 Filter zu machen und den Unterschied zu Tweenen?