JavaFX - DisplacementMap

As you might already know, an image is composed of infinite number of pixels. The Displacement Map Effect shifts the pixels of an input image by a certain distance and produces an output image with different locations of these pixels.

To apply this effect on a JavaFX node, you need to use the DisplacementMap class. To displace the pixels on input image, the distance is specified by the first two bands of a FloatMap. A FloatMap is a buffer that contains floating point data, which in this case, is the distance.

This class has the following properties −

• input − specifies the input data, i.e. the image.

• mapData − specifies the map data for this displacement map effect. This specifies how to map pixels.

• offsetX − specifies the offset by which all x coordinate offset values in the FloatMap are displaced after they are scaled

• offsetY − specifies the offset by which all y coordinate offset values in the FloatMap are displaced after they are scaled

• scaleX − specifies the scale factor by which all x coordinate offset values in the FloatMap are multiplied

• scaleY − specifies the scale factor by which all y coordinate offset values in the FloatMap are multiplied

• wrap − Defines whether values taken from outside the edges of the map "wrap around" or not.

Example

In this example, we are trying to apply the Displacement Map effect on a text using the DisplacementMap class. Save this code in a file with the name DisplacementMapExample.java.

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.effect.Effect;
import javafx.scene.effect.DisplacementMap;
import javafx.scene.effect.FloatMap;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import javafx.scene.text.Font;
import javafx.scene.text.FontWeight;
import javafx.scene.text.Text;
         
public class DisplacementMapExample extends Application { 
   @Override 
   public void start(Stage stage) {
      int width = 220;
      int height = 100;
 
      FloatMap floatMap = new FloatMap();
      floatMap.setWidth(width);
      floatMap.setHeight(height);

      for (int i = 0; i < width; i++) {
         double v = (Math.sin(i / 20.0 * Math.PI) - 0.5) / 40.0;
         for (int j = 0; j < height; j++) {
            floatMap.setSamples(i, j, 0.0f, (float) v);
         }
      }

      DisplacementMap displacementMap = new DisplacementMap();
      displacementMap.setMapData(floatMap);

      Text text = new Text();
      text.setX(40.0);
      text.setY(80.0);
      text.setText("Displacement Map");
      text.setFill(Color.web("0x3b596d"));
      text.setFont(Font.font(null, FontWeight.BOLD, 50));
      text.setEffect(displacementMap);
	  
	  //Creating a Group object  
      Group root = new Group(text);   
               
      //Creating a scene object 
      Scene scene = new Scene(root, 600, 300);  
      
      //Setting title to the Stage 
      stage.setTitle("DisplacementMap Effect"); 
         
      //Adding scene to the stage 
      stage.setScene(scene); 
         
      //Displaying the contents of the stage 
      stage.show(); 
   }
   public static void main(String args[]){ 
      launch(args); 
   } 
}   

Compile and execute the saved java file from the command prompt using the following commands.

javac --module-path %PATH_TO_FX% --add-modules javafx.controls DisplacementMapExample.java 
java --module-path %PATH_TO_FX% --add-modules javafx.controls DisplacementMapExample     

Output

On executing, the above program generates a JavaFX window as shown below.