Displacement mapping is a simple action of shifting pixels. An image map containing color values is used as data to create the displacement and move pixels around.
- understand displacement mapping
- actionscript documentation
About the demo with the picture, I created an image map in Photoshop, please notice my skill with a brush
The filter itself will take different parameters that can be changed in real-time (on a time interval):
- a canvas containing the image on which the filter will be applied on
- a canvas containing the image map to create the displacement
- a canvas where the result will be drawn
- a point (x and y) where the displacement will be applied on the image source
- a scale value for the X axis, this will be the amount of displacement on this axis
- a scale value for the Y axis
- a color channel for the X axis, the color used to create the displacement on this axis
- a color channel for the Y axis
It will look like this:
var filter = new filters.DisplacementMap( canvasSource, canvasMap, canvasTarget, new filters.Point(50, 50), 40, 40, filters.ColorChannel.RED, filters.ColorChannel.GREEN); filter.draw();
When the draw method is called, the filter will loop over the pixels of the image map and find the color that has been specified to create the displacement. A color is represented by the hexadecimal value of 255 (0xFF). If the color found in the map for a specific pixel is superior to the half (0×80), the pixel shifting will increase, otherwise it will decrease.
About the second demo, I reproduced a flash demo from Zeh Fernando that I really liked. There’s a simple background with heart pattern used as a source image, and the displacement map looks like this:
The gradient colors are chosen so that the displacement will create a magnifying effect. The red colors will be used to move the pixels on the X axis and the green colors will be used to move on the Y axis.
I also reproduced a little trick to emphasis the displacement. Ive added a simple png with transparency on top of the displacement, it contains lights and shadows:
I also tweened the filter values with TweenJS to add a bit of movement (the heart bump), as in the Flash version.