3x creative use of displacement filterPondelok, Júl 21st, 2008
I fell in love with DisplacementMapFilter as it first time appeared in Flash 8. All tree demos you see here are remakes of some old AS2 experiments; in AS3 performance should not be such issue – actually the only performance test I took was when I displaced 800×600 bitmap with itself back in AS2 and that was a limit that time; here we use AS3 and we are using much smaller maps.
- I always use red channel when dealing with artificial displacement maps (DisplacementMapFilter.componentX = BitmapDataChannel.RED). The neutral color is then 0×800000 (R:128, G:0, B:0), any brighter or darker (red) color will affect the filter.
- To apply filter temporary (you can remove or change it later) pass it to the ‘filters’ array of any DisplayObject, to apply it permanently use applyFilter method of appropriate BitmapData object.
Wave (ripple) displacement effect
The idea is very simple, I draw wave like gradient, then scale it and apply it as a displacement filter. I hope someone will create more realistic gradient and send me a link . In top left corner you can see preview of the displacement map – the fill color is neutral (0×800000) and the wave is using full red to black gradient.
|Distort displacement effect
Deform your face! That game is very old but I never realised it is so easy to get similar effect just with displacement filter. Simply rotate the ‘scaleX’ and ‘scaleY’ properties to displace selected area to any direction, using soft mound (radial gradient) as displacement map. In top left corner see the displacement map preview.
|Glassy Button (material with refractive index)
Of course it is just simulation of refractive index, and absolutely unrealistic simulation to be honest, but who cares . In this demo I use right tree filter effects: first I get a rounded rectangle shape (the right one on the top) and apply inner glow filter to soften the edges. The result is used as displacement map (the left one on the top). Then I get another copy of the same shape and apply inner bevel filter with ‘knockout’ parameter that hide the shape itself and gives us just the bevel.
Then you can animate the displacement and bevel “depth” or even change the shape at runtime. For this demo purpose I drag the button with mouse – imagine the result achieved if the button will hover above playing video.
|Download source files here.|
|PS: The hot babe is Syrinx by W. McMillan, Kelvin Groove Museum.|