Rakesh Menon
Ripple Effect
This sample demonstrates the use of Reflection and DisplacementMap effects in combination with Animation APIs to create ripple effect.
Understanding the Code
Reflection effect is used to create the reflection of the specified image.
A simple reflection of image can be created as shown below.
Source Code
ImageView {
image: Image { url: "{__DIR__}images/golden_gate.png" }
effect: Reflection {
bottomOpacity: 0.8
topOpacity: 1.0
fraction: 1.0
topOffset: 0
}
}
The pixels in the image can be displaced to specified location using DisplacementMap effect.
Below image shows a pixel effect obtained by randomly moving the pixels.
Source Code
// Instantiate the FloatMap as per size of the image
var floatMap = FloatMap {
width: 400
height: 235
};
// Specify the displacement of individual pixels.
// In this pixels are shifted by random number.
function createMapData(map:FloatMap): FloatMap {
var w = map.width;
var h = map.height;
var random = new java.util.Random();
for (x in [0..(w-1)]) {
for(y in [0..(h-1)]) {
map.setSample(x, y, 0, random.nextFloat()/100.0 );
}
}
for (y in [0..(h-1)]) {
for (x in [0..(w-1)]) {
map.setSample(x, y, 1, random.nextFloat()/100.0 );
}
}
return map;
}
// Apply the DisplacementMap effect to ImageView
ImageView {
image: Image { url: "{__DIR__}images/golden_gate.png" }
effect: DisplacementMap {
mapData: createMapData(floatMap)
}
}
We can control the displacement of pixels based on an equation and effect the changes over a period of time.
Merging above two effects will provide a reflection of the image with ripple effect.