Apply Special Effects - JavaFX: Developing Rich Internet Applications - page 178

DisplacementMap
One of the more sophisticated effects, you can use a DisplacementMap to
change the appearance of your content in some very unique ways. For each pixel,
a corresponding user-supplied FloatMap entry is retrieved, and along with
optional scale and offset instance variables, applied to the content to produce
a new output.
For this effect, we'll lean heavily on the JavaFX API documentation. As
explained there, each individual FloatMap entry contains per-pixel offset infor-
mation in the x and y direction. Filling FloatMap entries with values of (0, 0)
would signify no offset change, whereas a FloatMap full with values of (0.5, 0.5)
would yield an offset half the original source size.

Taken in good part from the API documentation, the next example fills a FloatMap
with data produced by a mathematical function (a sine wave). The result of using
it inside a DisplacementMap produces a wavy effect on your content. The API
example uses shapes and text as input. If instead we use the image of, for exam-
ple, a flag, the DisplacementMap effect could be construed to produce an image
of a flag flapping in the wind. Listing 6.6 has the details.

Listing 6.6 An Example Usage of DisplacementMap

import java.lang.Math;
import javafx.scene.*;
import javafx.stage.*;
import javafx.scene.effect.*;
import javafx.scene.image.*;

function run (args : String[]) : Void {
var w = 200;
var h = 140;
var map = FloatMap { width: w height: h }
for (i:Integer in [0..<w]) {
var v = (Math.sin(i/35.0*Math.PI)-0.5)/30.0;
for (j:Integer in [0..<h]) {
map.setSamples(i, j, 0.0, v);

}
}
Stage {
scene: Scene {
content: [
ImageView {
effect: DisplacementMap { mapData: map }
image: Image {
url: "{__DIR__}brazilflag.jpg"
}