My bright and shiny toy for today is displacement maps. I’ve been meaning to actually understand exactly how they work so that I can be in control of what I create with them instead of just applying others’ examples.
I have a few weird experiments, but thought I would post a nice clear simple example for others to learn from.
Demo: displacementexample.swf
Source: displacementexample.as
The displacement filter, takes a look at the colour value of relevant pixel in the displacement map. It then uses this to calculate an offset and pulls the relevant pixel from the image and sets it as the output. I have tried to place clear comments in the code so you can follow.
For something interesting, you can put a gradient fill on the circle starting at the top with white and at the bottom with black. This creates a flipped effect for the pixels in the circle.
var fillType:String = GradientType.LINEAR;
var colors:Array = [0xFFFFFF,0x000000];
var alphas:Array = [1, 1];
var ratios:Array = [0x00, 0xFF];
var matr:Matrix = new Matrix();
matr.createGradientBox(radius*2, radius*2, Math.PI/2, width/2-radius, height/2-radius);
var spreadMethod:String = SpreadMethod.PAD;
this.graphics.beginGradientFill(fillType, colors, alphas, ratios, matr, spreadMethod)
Note: Going from white to black won’t get only the pixels in the circle flipped but also pixels from the surrounding area. To get exactly the pixels in the circle you will have to work out the colour values with the radius of the circle in the calculation to exactly get the right offset. I will let you do that 🙂
