Creating Visual Effects in JavaFX

Previous
Next

3 Applying Blur Effects

Blurring are common effects that can be used to provide more focus to selected objects. With JavaFX you can apply a boxblur, a motion blur, or a gaussian blur.

BoxBlur

The BoxBlur is a blur effect that uses a simple box filter kernel, with separately configurable sizes in both dimensions that control the amount of blur applied to an object, and an Iterations parameter that controls the quality of the resulting blur.

Figure 3-1 shows two samples of blurred text.

Figure 3-1 BoxBlur Effect

Description of Figure 3-1 follows
Description of "Figure 3-1 BoxBlur Effect"

Example 3-1 is a code snippet that uses the BoxBlur effect.

Example 3-1 BoxBlur Example

    static Node boxBlur() {
        Text t = new Text();
        t.setText("Blurry Text!");
        t.setFill(Color.RED);
        t.setFont(Font.font("null", FontWeight.BOLD, 36));
        t.setX(10);
        t.setY(40);
 
        BoxBlur bb = new BoxBlur();
        bb.setWidth(5);
        bb.setHeight(5);
        bb.setIterations(3);
 
        t.setEffect(bb);
        t.setTranslateX(300);
        t.setTranslateY(100);
 
        return t;
    }

Motion Blur

A motion blur effect uses a Gaussian blur, with a configurable radius and angle to create the effect of a moving object.

Figure 3-2 shows the effect of the motion blur on a text.

Figure 3-2 Motion Blur Effect

Description of Figure 3-2 follows
Description of "Figure 3-2 Motion Blur Effect"

Example 3-2 shows a code snippet that creates a motion blur effect with radius set to 15 and angle set to 45 in the sample application.

Example 3-2 Motion Blur Example

    static Node motionBlur() {
        Text t = new Text();
        t.setX(20.0f);
        t.setY(80.0f);
        t.setText("Motion Blur");
        t.setFill(Color.RED);
        t.setFont(Font.font("null", FontWeight.BOLD, 60));
 
        MotionBlur mb = new MotionBlur();
        mb.setRadius(15.0f);
        mb.setAngle(45.0f);
 
        t.setEffect(mb);
 
        t.setTranslateX(300);
        t.setTranslateY(150);
 
        return t;
    }

Gaussian Blur

The Gaussian blur is an effect that uses a Gaussian algorithm with a configurable radius to blur objects.

Figure 3-3 shows the effect of the Gaussian blur on a text.

Figure 3-3 Gaussian Blur

Description of Figure 3-3 follows
Description of "Figure 3-3 Gaussian Blur"

Example 3-3 shows a code snippet that blurs the text using Gaussian blur effect.

Example 3-3 Gaussian Blur

    static Node gaussianBlur() {
        Text t2 = new Text();
        t2.setX(10.0f);
        t2.setY(140.0f);
        t2.setCache(true);
        t2.setText("Gaussian Blur");
        t2.setFill(Color.RED);
        t2.setFont(Font.font("null", FontWeight.BOLD, 36));
        t2.setEffect(new GaussianBlur());
        return t2;
    }
Previous
Next