3x creative use of displacement filter

Pondelok, Júl 21st, 2008
3x creative use of displacement filter

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.

My tips:

  • 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.

tagged under:

ABOUT THIS AUTHOR


twitter.com/daniel_sedlacek

16 Comments


  1. Piergiorgio Niero
    • Visit Site
    Júl 21st, 2008

    good job man! waterdrop is very nice :)


  2. Jarav
    • Visit Site
    Júl 24th, 2008

    Thanks. Awesome demos. Do you know of any online tutorials where I can learn about the various filters?


  3. daniel.sedlacek
    • Visit Site
    Júl 25th, 2008

    Jarav: Well, no :) . You may try to google out something. But if you take a look at my source files, all the important steps in the code are documented.


  4. mi4k
    • Visit Site
    November 22nd, 2008

    Good Job, Dano :-)


  5. Chris
    • Visit Site
    Február 13th, 2010

    I think the source files link is missing?

    Wow great work, I hope I can get to read it ;)


  6. Davide
    • Visit Site
    Apríl 16th, 2010

    Hello, great effects.
    Can’t download the source, tho.

    Ciao


  7. daniel.sedlacek
    • Visit Site
    Apríl 19th, 2010

    It’s fixed. Sorry for the delay and enjoy ;)


  8. Jeff
    • Visit Site
    Jún 8th, 2010

    Awesome man..I never find this effect anywhere. I surprised when I did mouse over the images. great work. Going to download the file now. Thank you very much..


  9. Jeff
    • Visit Site
    Jún 8th, 2010

    Awesome man..The mouse over effect is really great..


  10. adansizlik
    • Visit Site
    Marec 9th, 2011

    good job man ;)


  11. ri
    • Visit Site
    Apríl 12th, 2011

    Thanks for sharing, Daniel. I really love the waterdrop effect.


  12. jhayr
    • Visit Site
    Máj 3rd, 2011

    good use of the filter, do you have any video tutorial of this? maybe some videos would help to get it done easier, thanks :D


  13. Daniel Sedlacek
    • Visit Site
    Máj 3rd, 2011

    @jhayr Sorry I have no video tutorial but the code is nicely commented ;) .


  14. uzair
    • Visit Site
    Máj 24th, 2011

    hi

    I am making an online T-shirt design tool. i have to give the logo a real after placing it to the shirt..
    It adopts the curves and folds of shirt.
    i got idea from photoshop that displacement map can do this for me.
    I got a little succes while implementing it on flex.
    But if i got for best result( means all the folds and curves) the logo gets that shape but the image got very observable changes and distortion.
    i want that the image should not distort at all and the logo take shape..
    Can you help me regarding this.

    If you have an idea, you can share it.. plz..


  15. Daniel Sedlacek
    • Visit Site
    Máj 25th, 2011

    My first thought is to do everything you do now but in bigger resolution and only after you apply the displacement filter scale the result picture down.


  16. uzair
    • Visit Site
    Máj 25th, 2011

    hey Daniel:

    i didn’t get you clearly. The thing which i understand that you want me to apply the displacement Map to the high resolution image and i scale down the resultant image..

    am i right???

    I am using Flex3 while doing all these stuff.

Sorry, comments for this entry are closed at this time.

Images is enhanced with WordPress Lightbox JS by Zeo