How to continuously fade a BitmapData to a certain color?

Question

I'm drawing stuff on a bitmapData and I need to continuously fade every pixel to 0x808080 while still drawing (its for a DisplacementMapFilter)... I think this illustrates my problem:
http://www.ventdaval.com/lab/grey.swf

The simpler approach I tried was drawing a semi-transparent grey box on it, but it never reaches a single color (i.e. 0x808081 will never be turned to 0x808080)... The same kind of thing happens with a ColorMatrixFilter trying to progressively reduce the saturation and/or contrast. (the example above is applying a filter with -10 contrast every frame).

I'm trying paletteMap now, and I'm sensing this could be the way to go, but I haven't been able to get it... any ideas?

Answer 1

You can try to fade it slightly more than you are fading it now, so color will go to 0x808080, you just need to do some calculations.

Yes, you can do this with paletteMap. The third way will be to write PixelBender shader for it. You can also use your normal fading and do paletteMap or PixelBender one once in a few frames, to speed-up all this.

Answer 2

I think the easiest way to do this would be with two successive color filters. That is:

var n:Number = 0.9;
var off:Number = 0x80;
var filter:ColorMatrixFilter = new ColorMatrixFilter( [
        1, 0, 0, 0, -off, 
        0, 1, 0, 0, -off, 
        0, 0, 1, 0, -off, 
        0, 0, 0, 1, -off ] );
var filter2:ColorMatrixFilter = new ColorMatrixFilter( [
        n, 0, 0, 0, off, 
        0, n, 0, 0, off, 
        0, 0, n, 0, off, 
        0, 0, 0, n, off ] );

function onFrame( e:Event ) {
    myBMD.applyFilter( myBMD, myBMD.rect, new Point(), filter );
    myBMD.applyFilter( myBMD, myBMD.rect, new Point(), filter2 );
}

The first filter offsets each channel value downwards by 128 - turning your gray-based image into a black-based image. The second filter multiplies each channel value by the modulator (0.9 in my example), and then offsets the values back up by 128.