Home >
With all this talk about Astro, and PixelBender, it made me think more about graphics filters. So, I thought I'd revisit them. A few months back, I did a series on graphics tricks:
Flex Graphics Tricks Part 1: Masks
Flex Graphics Tricks Part 2: Blend Modes
Flex Graphics Tricks Part 3: Graphics Filters
This time, I'm sticking to the good old filters (not the shiny new ones in PixelBender), and decided to focus on displacement map filters. Basically, the displacement map filter displaces the pixels of a component, based on the bitmap data that is passed into the filter. The Adobe documents sum it up better than I can:
You can read more about it on the Adobe Documentation at: http://livedocs.adobe.com/flex/3/html/help.html?content=Filtering_Visual_Objects_18.html
I decided to take my previous post on Google Maps, and show how to put a displacement filter on it. Here's the example:
Move the mouse over the map to see the effect.
Now, here's how it works. I put a DisplaceMentMapFilter directly on the UIComponent container that is used to display the Google map component. This will cause the graphics filter to displace the graphics of the uicomponent, thus any child componets as well.
On the filter, there are a few key parameters that you will need to know about: In this example, I only used the X direction to keep it simple.
componentX and componentY
These two parameters are used to determine which color channels of the displacement bitmap should be applied to the distortion of the target object. In this example, I am only looking at the values of the RED color channel.
scaleX and scaleY
This is a multiplier that determines the amount to displace the image pixels based on the colors in the displacement bitmap. When using the color channel, you can displace both in the positive and negative direction. A hex value on the red channel of 7F would be a displacement of 0 (no displacement). 7f is halfway between 0 and FF. The values 0 and FF would represent the extremes of the displacement (-scaleX, and scaleX). You can use different color channels to have different displacement in the X and Y directions.
In this example, I'm using this source image over a canvas with a background color #7F7F7F (neutral) as the displacement bitmap source. The image position is updated on the mouseMove event to follow the mouse, so the achieved effect is a "magnified" view of the image just below the mouse.
You can view the application in a new window at:
http://www.tricedesigns.com/portfolio/google_displacement/main.html
You can view the source at:
http://www.tricedesigns.com/portfolio/google_displacement/srcview/index.html
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems http://www.cynergysystems.com
Flex Graphics Tricks Part 1: Masks
Flex Graphics Tricks Part 2: Blend Modes
Flex Graphics Tricks Part 3: Graphics Filters
This time, I'm sticking to the good old filters (not the shiny new ones in PixelBender), and decided to focus on displacement map filters. Basically, the displacement map filter displaces the pixels of a component, based on the bitmap data that is passed into the filter. The Adobe documents sum it up better than I can:
The DisplacementMapFilter class uses pixel values from a BitmapData object (known as the displacement map image) to perform a displacement effect on a new object. The displacement map image is typically different than the actual display object or BitmapData instance to which the filter is being applied. A displacement effect involves displacing pixels in the filtered image--in other words, shifting them away from their original location to some extent. This filter can be used to create a shifted, warped, or mottled effect.
You can read more about it on the Adobe Documentation at: http://livedocs.adobe.com/flex/3/html/help.html?content=Filtering_Visual_Objects_18.html
I decided to take my previous post on Google Maps, and show how to put a displacement filter on it. Here's the example:
Move the mouse over the map to see the effect.
Now, here's how it works. I put a DisplaceMentMapFilter directly on the UIComponent container that is used to display the Google map component. This will cause the graphics filter to displace the graphics of the uicomponent, thus any child componets as well.
<?xml version="1.0" encoding="utf-8"?>
<mx:DisplacementMapFilter
id="displacementMap"
scaleX="100"
mode="{ DisplacementMapFilterMode.CLAMP }"
componentX="{ BitmapDataChannel.RED }"/>
On the filter, there are a few key parameters that you will need to know about: In this example, I only used the X direction to keep it simple.
componentX and componentY
These two parameters are used to determine which color channels of the displacement bitmap should be applied to the distortion of the target object. In this example, I am only looking at the values of the RED color channel.
scaleX and scaleY
This is a multiplier that determines the amount to displace the image pixels based on the colors in the displacement bitmap. When using the color channel, you can displace both in the positive and negative direction. A hex value on the red channel of 7F would be a displacement of 0 (no displacement). 7f is halfway between 0 and FF. The values 0 and FF would represent the extremes of the displacement (-scaleX, and scaleX). You can use different color channels to have different displacement in the X and Y directions.
You can view the application in a new window at:
http://www.tricedesigns.com/portfolio/google_displacement/main.html
You can view the source at:
http://www.tricedesigns.com/portfolio/google_displacement/srcview/index.html
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
actually the neutral base is 808080 and your lens is a bit distorted too much on the x axis - i just made this to show you how its really ment to be...
http://thonbo.com/tempShowCase/lensLab.html
Thanks Philip, that's a great example. I kept mine simple, and only in the x direction on purpose. Yours shows a lot more of the capability that the displacement filters are capable of.