What Is an Effect?

An effect is a filter that accepts one or more graphical inputs, applies an algorithm on the inputs, and produces an output. Typically, effects are applied to nodes to create visually appealing user interfaces. Examples of effects are shadow, blur, warp, glow, reflection, blending, and different types of lighting, among others. The JavaFX library provides several effect-related classes. Effects are conditional features. They are applied to nodes and will be ignored if they are not available on a platform. Figure 17-1 shows four Text nodes using the drop shadow, blur, glow, and bloom effects.

An instance of the Effect class represents an effect. The Effect class is the abstract base for all effect classes. All effect classes are included in the javafx.scene.effect package.

Chaining Effects

Some effects can be chained with other effects when they are applied in sequence. The output of the first effect becomes the input for the second effect and so on, as shown in Figure 17-2.

Effect classes that allow chaining contain an input property to specify the effect that precedes it. If the input is null, the effect is applied to the node on which this effect is set instead of being applied to the preceding input effect. By default, the input is null. The following snippet of code creates two chains of effects on Text nodes, as shown in Figure 17-3:

// Effect Chain: Text >> Reflection >> Shadow

DropShadow dsEffect = new DropShadow();

dsEffect.setInput(new Reflection());

Text t1 = new Text("Reflection and Shadow");

t1.setEffect(dsEffect);

// Effect Chain: Text >> Shadow >> Reflection

Reflection reflection = new Reflection();

reflection.setInput(new DropShadow());

Text t2 = new Text("Shadow and Reflection");

t2.setEffect(reflection);

In Figure 17-3, a Reflection effect followed by a DropShadow is applied to the text on the left; a DropShadow followed by a Reflection effect is applied to the text on the right. Notice the sequence of effects makes a difference in the output. The second chain of effects produces a taller output as the reflection also includes the shadow.

If an effect allows chaining, it will have an input property. In subsequent sections, I will list the input property for the effect classes, but not discuss it.

Shadowing Effects

The DropShadow Effect

The DropShadow effect draws a shadow (a blurred image) behind the input, so the input seems to be raised. It gives the input a 3D look. The input can be a node or an effect in a chain of effects.

An instance of the DropShadow class represents a DropShadow effect. The size, location, color, and quality of the effect are controlled by several properties of the DropShadow class :

• offsetX

• offsetY

• color

• blurType

• radius

• spread

• width

• height

• input

The DropShadow class contains several constructors that let you specify the initial values for the properties:

• DropShadow()

• DropShadow(BlurType blurType, Color color, double radius, double spread, double offsetX, double offsetY)

• DropShadow(double radius, Color color)

• DropShadow(double radius, double offsetX, double offsetY, Color color)

The offsetX and offsetY properties control the position of the shadow in pixels relative to the input. By default, their values are zero. The positive values of offsetX and offsetY move the shadow in the positive x-axis and y-axis directions, respectively. The negative values move the shadow in the reverse directions.

The following snippet of code creates a DropShadow object with the offsetX and offsetY of 10px. The third rectangle from the left in Figure 17-4 shows the rectangle with the effect using the same rectangle with a DropShadow effect and different x and y offsets. For the fourth from the left rectangle, the shadow is positioned at the lower-right corner of the rectangle as the rectangle size (50, 25) matches the offsets (50, 25).

DropShadow dsEffect = new DropShadow();

dsEffect.setOffsetX(10);

dsEffect.setOffsetY(10);

Rectangle rect = new Rectangle(50, 25, Color.LIGHTGRAY);

rect.setEffect(dsEffect);

The color property specifies the color of the shadow. By default, it is Color.BLACK. The following code would set the color to red:

DropShadow dsEffect = new DropShadow();

dsEffect.setColor(Color.RED);

The blurring in the shadow can be achieved using different algorithms. The blurType property specifies the type of blurring algorithm for the shadow. Its value is one of the following constants of the BlurType enum:

• ONE_PASS_BOX

• TWO_PASS_BOX

• THREE_PASS_BOX

• GAUSSIAN

The ONE_PASS_BOX uses a single pass of the box filter to blur the shadow. The TWO_PASS_BOX uses two passes of the box filter to blur the shadow. The THREE_PASS_BOX uses three passes of the box filter to blur the shadow. The GAUSSIAN uses a Gaussian blur kernel to blur the shadow. The blur quality of the shadow is the least in ONE_PASS_BOX and the best in GAUSSIAN. The default is THREE_PASS_BOX, which is very close to GAUSSIAN in quality. The following snippet of code sets the GAUSSIAN blur type:

DropShadow dsEffect = new DropShadow();

dsEffect.setBlurType(BlurType.GAUSSIAN);

The radius property specifies the distance the shadow is spread on each side of the source pixel. If the radius is zero, the shadow has sharp edges. Its value can be between 0 and 127. The default value is 10. The blurring outside the shadow region is achieved by blending the shadow color and the background color. The blur color fades out over the radius distance from the edges.

Figure 17-5 shows a rectangle twice with a DropShadow effect. The one on the left uses the radius of 0.0, which results in sharp edges of the shadow. The one on the right uses the default radius of 10.0 that spreads the shadow 10px around the edges. The following snippet of code produces the first rectangle in the figure that has sharp edges of the shadow:

DropShadow dsEffect = new DropShadow();

dsEffect.setOffsetX(10);

dsEffect.setOffsetY(10);

dsEffect.setRadius(0);

Rectangle rect = new Rectangle(50, 25, Color.LIGHTGRAY);

rect.setEffect(dsEffect);

The spread property specifies the portion of the radius, which has the same color as the shadow. The color for the remaining portion of the radius is determined by the blur algorithm. Its value is between 0.0 and 1.0. The default is 0.0.

Suppose you have a DropShadow with a radius 10.0 and a spread value of 0.60 and the shadow color is black. In this case, the blur color will be black up to 6px around the source pixel. It will start fading out from the seventh pixel to the tenth pixel. If you specify the spread value as 1.0, there would be no blurring of the shadow. Figure 17-6 shows three rectangles with a DropShadow using a radius of 10.0. The three DropShadow effects use different spread values. The spread of 0.0 blurs fully along the radius. The spread of 0.50 spreads the shadow color in the first half of the radius and blurs the second half. The spread of 1.0 spreads the shadow color fully along the radius, and there is no blurring. The following snippet of code produces the middle rectangle in Figure 17-6:

DropShadow dsEfefct = new DropShadow();

dsEfefct.setOffsetX(10);

dsEfefct.setOffsetY(10);

dsEfefct.setRadius(10);

dsEfefct.setSpread(.50);

Rectangle rect = new Rectangle(50, 25, Color.LIGHTGRAY);

rect.setEffect(dsEfefct);

The width and height properties specify the horizontal and vertical distances, respectively, from the source pixel up to where the shadow color is spread. Their values are between 0 and 255. Setting their values is equivalent to setting the radius property, so they are equal to (2 * radius + 1). Their default value is 21.0. When you change the radius, the width and height properties are adjusted using the formula if they are not bound. However, setting the width and height changes the radius value, so the average of the width and height is equal to (2 * radius + 1). Figure 17-7 shows four rectangles with DropShadow effects. Their width and height properties were set as shown under each rectangle. Their radius properties were adjusted automatically. The fourth from the left rectangle was produced using the following snippet of code:

DropShadow dsEffect = new DropShadow();

dsEffect.setOffsetX(10);

dsEffect.setOffsetY(10);

dsEffect.setWidth(20);

dsEffect.setHeight(20);

Rectangle rect = new Rectangle(50, 25, Color.LIGHTGRAY);

rect.setEffect(dsEffect);

The program in Listing 17-2 lets you experiment with properties of the DropShadow effect. It displays a window as shown in Figure 17-8. Change the properties to see their effects in action.

// DropShadowTest.java

// ...find in the book's download area.

Listing 17-2

Experimenting with DropShadow Properties

The InnerShadow Effect

The InnerShadow effect works very similar to the DropShadow effect. It draws a shadow (a blurred image) of an input inside the edges of the input, so the input seems to have depth or a 3D look. The input can be a node or an effect in a chain of effects.

An instance of the InnerShadow class represents an InnerShadow effect. The size, location, color, and quality of the effect are controlled by several properties of the InnerShadow class:

• offsetX

• offsetY

• color

• blurType

• radius

• choke

• width

• height

• input

The number of properties of the InnerShadow class is equal to that for the DropShadow class. The spread property in the DropShadow class is replaced by the choke property in the InnerShadow class, which works similar to the spread property in the DropShadow class. Please refer to the previous section “The DropShadow Effect” for a detailed description and examples of these properties.

The DropShadow class contains several constructors that let you specify the initial values for the properties:

• InnerShadow()

• InnerShadow(BlurType blurType, Color color, double radius, double choke, double offsetX, double offsetY)

• InnerShadow(double radius, Color color)

• InnerShadow(double radius, double offsetX, double offsetY, Color color)

The program in Listing 17-3 creates a Text node and two Rectangle nodes . An InnerShadow is applied to all three nodes. Figure 17-9 shows the results for these nodes. Notice that the shadow is not spread outside the edges of the nodes. You need to set the offsetX and offsetY properties to see a noticeable effect.

// InnerShadowTest.java

// ...find in the book's download area.

Listing 17-3

Using the InnerShadow Class

The Shadow Effect

The Shadow effect creates a shadow with blurry edges of its input. Unlike DropShadow and InnerShadow, it modifies the original input itself to convert it into a shadow. Typically, a Shadow effect is combined with the original input to create a higher-level shadowing effect:

• You can apply a Shadow effect with a light color to a node and superimpose it on a duplicate of the original node to create a glow effect.

• You can create a Shadow effect with a dark color and place it behind the original node to create a DropShadow effect.

An instance of the Shadow class represents a Shadow effect. The size, color, and quality of the effect are controlled by several properties of the Shadow class:

• color

• blurType

• radius

• width

• height

• input

These properties work the same way they work in the DropShadow. Please refer to the section “The DropShadow Effect” for a detailed description and examples of these properties.

The Shadow class contains several constructors that let you specify the initial values for the properties:

• Shadow()

• Shadow(BlurType blurType, Color color, double radius)

• Shadow(double radius, Color color)

The program in Listing 17-4 demonstrates how to use the Shadow effect. It creates three Text nodes . A shadow is applied to all three nodes. The output of the first shadow is displayed. The output of the second shadow is superimposed on the original node to achieve a glow effect. The output of the third shadow is placed behind its original node to achieve a DropShadow effect. Figure 17-10 shows these three nodes.

// ShadowTest.java

// ...find in the book's download area.

Listing 17-4

Using a Shadow Effect and Creating High-Level Effects

Blurring Effects

A blurring effect produces a blurred version of an input. JavaFX lets you apply different types of blurring effects, which differ in the algorithms used to create these effects.

The BoxBlur Effect

The BoxBlur effect uses a box filter kernel to produce a blurring effect. An instance of the BoxBlur class represents a BoxBlur effect. The size and quality of the effect can be configured using these properties of the class:

• width

• height

• iterations

• input

The width and height properties specify the horizontal and vertical size of the effect, respectively. Imagine a box defined by the width and height centered on a pixel of the input. The color information of the pixel is spread within the box during the blurring process. The values of these properties are between 0.0 and 255.0. The default values are 5.0. A value of less than or equal to 1.0 does not produce the blurring effect in the corresponding direction.

The iterations property specifies the number of times the blurring effect is applied. A higher value produces a better quality blur. Its value can be between zero and three. The default is one. The value of three produces the blur quality comparable to the Gaussian blur, discussed in the next section. The value of zero produces no blur at all.

The BoxBlur class contains two constructors:

• BoxBlur()

• BoxBlur(double width, double height, int iterations)

The no-args constructor creates a BoxBlur object with the width and height of 5.0 pixels and iterations of 1. The other constructor lets you specify the initial value for the width, height, and iterations properties, as in the following section of code:

// Create a BoxBlur with defaults: width=5.0, height=5.0, iterations=1

BoxBlur bb1 = new BoxBlur();

// Create a BoxBlur with width=10.0, height=10.0, iterations=3

BoxBlur bb2 = new BoxBlur(10, 10, 3);

The following snippet of code creates four Text nodes and applies BoxBlur effects of various qualities. Figure 17-11 shows the results of these Text nodes. Notice that the last Text node does not have any blur effect as the iterations property is set to zero.

Text t1 = new Text("Box Blur");

t1.setFont(Font.font(24));

t1.setEffect(new BoxBlur(5, 10, 1));

Text t2 = new Text("Box Blur");

t2.setFont(Font.font(24));

t2.setEffect(new BoxBlur(10, 5, 2));

Text t3 = new Text("Box Blur");

t3.setFont(Font.font(24));

t3.setEffect(new BoxBlur(5, 5, 3));

Text t4 = new Text("Box Blur");

t4.setFont(Font.font(24));

t4.setEffect(new BoxBlur(5, 5, 0)); // Zero iterations = No blurring

The GaussianBlur Effect

The GaussianBlur effect uses a Gaussian convolution kernel to produce a blurring effect. An instance of the GaussianBlur class represents a GaussianBlur effect. The effect can be configured using two properties of the class:

• radius

• input

The radius property controls the distribution of the blur in pixels from the source pixel. The greater this value, the more the blur effect. Its value can be between 0.0 and 63.0. The default value is 10.0. A radius of 0 pixels produces no blur effect.

The GaussianBlur class contains two constructors:

• GaussianBlur()

• GaussianBlur(double radius)

The no-args constructor creates a GaussianBlur object with a default radius of 10.0px. The other constructor lets you specify the initial value for the radius, as in the following code:

// Create a GaussianBlur with a 10.0 pixels radius

GaussianBlur gb1 = new GaussianBlur();

// Create a GaussianBlur with a 20.0 pixels radius

GaussianBlur gb2 = new GaussianBlur(20);

The following snippet of code creates four Text nodes and applies GaussianBlur effects of different radius values. Figure 17-12 shows the results of these Text nodes. Notice that the last Text node does not have any blur effect as the radius property is set to zero.

Text t1 = new Text("Gaussian Blur");

t1.setFont(Font.font(24));

t1.setEffect(new GaussianBlur(5));

Text t2 = new Text("Gaussian Blur");

t2.setFont(Font.font(24));

t2.setEffect(new GaussianBlur(10));

Text t3 = new Text("Gaussian Blur");

t3.setFont(Font.font(24));

t3.setEffect(new GaussianBlur(15));

Text t4 = new Text("Gaussian Blur");

t4.setFont(Font.font(24));

t4.setEffect(new GaussianBlur(0)); // radius = 0 means no blur

The MotionBlur Effect

The MotionBlur effect produces a blurring effect by motion. The input looks as if you are seeing it while it is moving. A Gaussian convolution kernel is used with a specified angle to produce the effect. An instance of the MotionBlur class represents a MotionBlur effect. The effect can be configured using the three properties of the class:

• radius

• angle

• input

The radius and input properties work the same as respective properties for the GaussianBlur class, as described in the previous section. The angle property specifies the angle of the motion in degrees. By default, the angle is zero.

The MotionBlur class contains two constructors:

• MotionBlur()

• MotionBlur(double angle, double radius)

The no-args constructor creates a MotionBlur object with a default radius of 10.0px and an angle of 0.0 degrees. The other constructor lets you specify the initial value for the angle and radius, as shown in the following code:

// Create a MotionBlur with a 0.0 degrees angle and a 10.0 pixels radius

MotionBlur mb1 = new MotionBlur();

// Create a MotionBlur with a 30.0 degrees angle and a 20.0 pixels radius

MotionBlur mb1 = new MotionBlur(30.0, 20.0);

The program in Listing 17-5 shows how to use the MotionBlur effect on a Text node, with the results shown in Figure 17-13. The two sliders let you change the radius and angle properties.

// MotionBlurTest.java

// ...find in the book's download area.

Listing 17-5

Using the MotionBlur Effect on a Text Node

The Bloom Effect

The Bloom effect adds a glow to the pixels of its input that have a luminosity greater than or equal to a specified limit. Note that not all pixels in a Bloom effect are made to glow.

The threshold property is a number between 0.0 and 1.0. Its default value is 0.30. All pixels in the input having a luminosity greater than or equal to the threshold property are made to glow. The brightness of a pixel is determined by its luminosity. A pixel with a luminosity of 0.0 is not bright at all. A pixel with a luminosity of 1.0 is 100% bright. By default, all pixels having a luminosity greater than or equal to 0.3 are made to glow. A threshold of 0.0 makes all of the pixels glow. A threshold of 1.0 makes almost no pixels glow.

Figure 17-14 shows four Text nodes with Bloom effects that have different threshold values. A Text node is laid over a rectangle using a StackPane. Notice that the lower the threshold value, the higher the blooming effect. The following snippet of code creates the first Text node and Rectangle pair from the left in Figure 17-14:

Text t1 = new Text("Bloom");

t1.setFill(Color.YELLOW);

t1.setFont(Font.font(null, FontWeight.BOLD, 24));

t1.setEffect(new Bloom(0.10));

Rectangle r1 = new Rectangle(100, 50, Color.GREEN);

StackPane sp1 = new StackPane(r1, t1);

The Glow Effect

The level property specifies the intensity of the Glow effect. It is a number between 0.0 and 1.0, and its default value is 0.30. A level of 0.0 adds no glow, and a level of 1.0 adds the maximum glow.

Figure 17-15 shows four Text nodes with Glow effects with different level values. A Text node is laid over a rectangle using a StackPane. Notice that the higher the level value, the higher the glowing effect. The following snippet of code creates the first Text node and Rectangle pair from the left in Figure 17-15:

Text t1 = new Text("Glow");

t1.setFill(Color.YELLOW);

t1.setFont(Font.font(null, FontWeight.BOLD, 24));

t1.setEffect(new Glow(0.10));

Rectangle r1 = new Rectangle(100, 50, Color.GREEN);

StackPane sp1 = new StackPane(r1, t1);

The Reflection Effect

The topOffset specifies the distance in pixels between the bottom of the input and the top of the reflection. By default, it is 0.0. The fraction property specifies the fraction of the input height that is visible in the reflection. It is measured from the bottom. Its value can be between 0.0 and 1.0. A value of 0.0 means no reflection. A value of 1.0 means the entire input is visible in the reflection. A value of 0.25 means 25% of the input from the bottom is visible in the reflection. The default value is 0.75. The topOpacity and bottomOpacity properties specify the opacity of the reflection at its top and bottom extremes. Their values can be between 0.0 and 1.0. The default value is 0.50 for the topOpacity and 0.0 for the bottomOpacity.

Figure 17-16 shows four Text nodes with Reflection effects configured differently. The following snippet of code creates the second Text node from the left, which shows the full input as the reflection:

Text t2 = new Text("Chatar");

t2.setFont(Font.font(null, FontWeight.BOLD, 24));

t2.setEffect(new Reflection(0.0, 1.0, 1.0, 1.0));

The SepiaTone Effect

The level property specifies the intensity of the SepiaTone effect. It is a number between 0.0 and 1.0. Its default value is 1.0. A level of 0.0 adds no sepia toning, and a level of 1.0 adds the maximum sepia toning.

The following snippet of code creates two Text nodes with the results shown in Figure 17-17. Notice that the higher the level value, the higher the sepia toning effect:

Text t1 = new Text("SepiaTone");

t1.setFill(Color.WHITE);

t1.setFont(Font.font(null, FontWeight.BOLD, 24));

1.setEffect(new SepiaTone(0.50));

Rectangle r1 = new Rectangle(150, 50, Color.BLACK);

r1.setOpacity(0.50);

StackPane sp1 = new StackPane(r1, t1);

Text t2 = new Text("SepiaTone");

t2.setFill(Color.WHITE);

t2.setFont(Font.font(null, FontWeight.BOLD, 24));

t2.setEffect(new SepiaTone(1.0));

Rectangle r2 = new Rectangle(150, 50, Color.BLACK);

r2.setOpacity(0.50);

StackPane sp2 = new StackPane(r2, t2);

The DisplacementMap Effect

The DisplacementMap effect shifts each pixel in the input to produce an output. The name has two parts: “Displacement” and “Map.” The first part implies that the effect displaces the pixels in the input. The second part implies that the displacement is based on a map that provides a displacement factor for each pixel in the output.

The DisplacementMap class requires that you set the mapData property to a FloatMap that contains values for band 0 and band 1 for each pixel in the output.

The scaleX, scaleY, offsetX, and offsetY are double properties. They are used in the equation (described shortly) to compute the displacement of the pixels. The scaleX and scaleY properties have 1.0 as their default values. The offsetX and offsetY properties have 0.0 as their default values.

If the preceding equation looks very complex, don’t be intimidated. In fact, the equation is very simple once you read the explanation that follows. The mapData[x,y][0] and mapData[x,y][1] parts in the equation refer to the values at band 0 and band 1, respectively, in the FloatMap for the location at (x, y).

Suppose you want to get the pixel for the (x, y) coordinates in the output, that is, you want to know which pixel from the input will be moved to (x, y) in the output. First, make sure you get the starting point right. To repeat, the equation starts with a point (x, y) in the output and finds the pixel at (x1, y1) in the input that will move to (x, y) in the output.

You can read these equations as “The pixel at (x, y) in the output is obtained by moving the pixel at (x1, y1) in the input to (x, y).”

The program in Listing 17-6 creates a Text node and adds a DisplacementMap effect to the node. In the mapData, it sets values, so all pixels in the top half of the input are moved to the right by 1 pixel, and all pixels in the bottom half of the input are moved to the left by 1 pixel. The Text node will look like the one shown in Figure 17-18.

// DisplacementmapTest.java

// ...find in the book's download area.

Listing 17-6

Using the DisplacementMap Effect

The DisplacementMap class contains a wrap property , which is set to false by default. A pixel in the output is a pixel in the input that is moved to a new location. The location of the pixel in the input that needs to move to a new location is computed by the equation. It is possible that for some locations in the output, you do not have available pixels in the input. Suppose you have a 100px wide by 50px tall rectangle, and you apply a DisplacementMap effect to move all pixels to the left by 50px. The points at x = 75 in the output will get the pixel at x = 125 in the input. The input is only 100px wide. Therefore, for all points x > 50 in the output, you will not have available pixels in the input. If the wrap property is set to true, when the locations of the pixels in the input to be moved are outside the input bounds, the locations are computed by taking their modulus with the corresponding dimension (width along the x-axis and height along the y-axis) of the input. In the example, x = 125 will be reduced to 125 % 100, which is 25, and the pixels at x = 25 in the input will be moved to x = 75 in the output. If the wrap property is false, the pixels in the output are left transparent.

Figure 17-19 shows two Text nodes with DisplacementMap effects. Pixels in both nodes are moved 100px to the left. The Text node at the top has the wrap property set to false, whereas the Text node at the bottom has the wrap property set to true. Notice that the output for the bottom node is filled by wrapping the input. The program in Listing 17-7 is used to apply the wrapping effects.

The ColorInput Effect

The ColorInput effect is a simple effect that fills (floods) a rectangular region with a specified paint. Typically, it is used as an input to another effect.

Creating a ColorInput object is similar to creating a rectangle filled with the paint of the ColorInput. The x and y properties specify the location of the upper-left corner of the rectangular region in the local coordinate system. The width and height properties specify the size of the rectangular region. The default value for x, y, width, and height is 0.0. The paint property specifies the fill paint. The default value for paint is Color.RED.

The following snippet of code creates a ColorInput effect and applies it to a rectangle. The rectangle with the effect applied is shown in Figure 17-20. Note that when you apply the ColorInput effect to a node, all you see is the rectangular area generated by the ColorInput effect. As stated earlier, the ColorInput effect is not applied directly on nodes. Rather, it is used as an input to another effect.

ColorInput effect = new ColorInput();

effect.setWidth(100);

effect.setHeight(50);

effect.setPaint(Color.LIGHTGRAY);

// Size of the Rectangle does not matter to the rectangular area

// of the ColorInput

Rectangle r1 = new Rectangle(100, 50);

r1.setEffect(effect);

The ColorAdjust Effect

The ColorAdjust effect adjusts the hue, saturation, brightness, and contrast of pixels by the specified delta amount. Typically, the effect is used on an ImageView node to adjust the color of an image.

The hue, saturation, brightness, and contrast properties specify the delta amount by which these components are adjusted for all pixels. They range from –1.0 to 1.0. Their default values are 0.0.

The ImageInput Effect

The ImageInput effect works like the ColorInput effect. It passes the given image as an input to another effect. The given image is not modified by this effect. Typically, it is used as an input to another effect, not as an effect directly applied to a node.

The x and y properties specify the location of the upper-left corner of the image in the local coordinate system of the content node on which the effect is finally applied. Their default values are 0.0. The source property specifies the Image object to be used.

The program in Listing 17-9 shows how to use the ImageInput effect. It passes an ImageInput as an input to a DropShadow effect, which is applied on a rectangle, as shown in Figure 17-21.

// ImageInputTest.java

// ...find in the book's download area.

Listing 17-9

Using an ImageInput Effect As an Input to a DropShadow Effect

The Blend Effect

Blending combines two pixels at the same location from two inputs to produce one composite pixel in the output. The Blend effect takes two input effects and blends the overlapping pixels of the inputs to produce an output. The blending of two inputs is controlled by a blending mode.

The program in Listing 17-10 creates two ColorInput effects of the same size. Their x and y properties are set in such a way that they overlap. These two effects are used as top and bottom inputs to the Blend effect. A combo box and a slider are provided to select the blending mode and the opacity of the top input. Figure 17-22 shows the window that results from running this code. Run the program and try selecting different blending modes to see the Blend effect in action.

// BlendTest.java

// ...find in the book's download area.

Listing 17-10

Using the Blend Effect

The Lighting Effect

The Lighting effect, as the name suggests, simulates a light source shining on a specified node in a scene to give the node a 3D look. A Lighting effect uses a light source, which is an instance of the Light class , to produce the effect. Different types of configurable lights are available. If you do not specify a light source, the effect uses a default light source.

The no-args constructor uses a default light source. The other constructor lets you specify a light source.

Applying a Lighting effect to a node may be a simple or complex task depending on the type of effect you want to achieve. Let’s look at a simple example. The following snippet of code applies a Lighting effect to a Text node to give it a 3D look, as shown in Figure 17-23:

// Create a Text Node

Text text = new Text("Chatar");

text.setFill(Color.RED);

text.setFont(Font.font(null, FontWeight.BOLD, 72));

HBox.setMargin(text, new Insets(10));

// Set a Lighting effect to the Text node

text.setEffect(new Lighting());

If you use a chain of effects, the contentInput property specifies the input effect to the Lighting effect. This property is named as input in all other effects discussed earlier. I will not discuss this property further in this section. Please refer to the section “Chaining Effects” for more details on how to use this property.

Customizing the Surface Texture

The surfaceScale and bumpInput properties are used to provide texture to a 2D surface to make it look like a 3D surface. Pixels, based on their opacity, look high or low to give the surface a texture. Transparent pixels appear low, and opaque pixels appear raised.

The surfaceScale property lets you control the surface roughness. Its value ranges from 0.0 to 10.0. The default is 1.5. For a higher surfaceScale, the surface appears rougher, giving it a more 3D look.

You can pass an Effect as an input to the Lighting effect using its bumpInput property. The opacity of the pixels in the bumpInput is used to obtain the height of the pixels of the lighted surface, and then the surfaceScale is applied to increase the roughness. If bumpInput is null, the opacity of the pixels from the node on which the effect is applied is used to generate the roughness of the surface. By default, a Shadow effect with a radius of 10 is used as the bumpInput. You can use an ImageInput, a blur effect, or any other effect as the bumpInput for a Lighting effect.

The program in Listing 17-11 displays a Text node with a Lighting effect. The bumpInput is set to null. It provides a check box to set a GaussianBlur effect as the bumpInput and a slider to adjust the surfaceScale value. Figure 17-24 shows two screenshots: one without a bump input and another with a bump input. Notice the difference in the surface texture.

// SurfaceTexture.java

// ...find in the book's download area.

Listing 17-11

Using the surfaceScale and bumpInput Properties

Understanding Reflection Types

When light falls on an opaque surface, part of light is absorbed, part is transmitted, and some is reflected. A 3D look is achieved by showing part of the surface brighter and part shadowy. You see the reflected light from the surface. The 3D look varies depending on the light source and the way the node surface reflects the light. The structure of the surface at the microscopic level defines the details of the reflection, such as the intensity and directions. Among several reflection types, two types are worth mentioning at this point: diffuse reflection and specular reflection.

In a diffuse reflection, the surface reflects an incident ray of light at many angles. That is, a diffuse reflection scatters a ray of light by reflecting it in all directions. A perfect diffuse reflection reflects light equally in all directions. The surface using a diffuse reflection appears to be equally bright from all directions. This does not mean that the entire diffuse surface is visible. The visibility of an area on a diffuse surface depends on the direction of the light and the orientation of the surface. The brightness of the surface depends on the surface type itself and the intensity of the light. Typically, a rough surface, for example, clothing, paper, or plastered walls, reflects light using a diffuse reflection. Surfaces may appear smooth to the eyes, for example, paper or clothing, but they are rough at the microscopic level, and they reflect light diffusively.

In a specular reflection, the surface reflects a ray of light in exactly one direction. That is, there is a single reflected ray for one incident ray. A smooth surface at the microscopic level, for example, mirrors or polished marbles, produces a specular reflection. Some smooth surfaces may not be 100% smooth at the microscopic level, and they may reflect part of the light diffusively as well. Specular reflection produces a brighter surface compared to diffuse reflection. Figure 17-25 depicts the ways light is reflected in diffuse and specular reflections .

Three properties of the Lighting class are used to control the size and intensity of the reflection:

• diffuseConstant

• specularConstant

• specularExponent

These properties are of the double type. The diffuseConstant is used for diffuse reflection. The specularConstant and specularExponent are used for specular reflection. The diffuseConstant property specifies a multiplier for the diffuse reflection intensity. Its value ranges from 0.0 to 2.0 with a default of 1.0. A higher value makes the surface brighter. The specularConstant property specifies the fraction of the light to which the specular reflection applies. Its value ranges from 0.0 to 2.0 with a default value of 0.30. A higher value means a bigger-sized specular highlight. The specularExponent specifies the shininess of the surface. A higher value means a more intense reflection and the surface looks shinier. The specularExponent ranges from 0.0 to 40.0 with a default value of 20.0.

Listing 17-12 contains the code for a utility class that binds the properties of the Lighting class to some controls that will be used to control the properties in the examples discussed later.

// LightingUtil.java

// ...find in the book's download area.

Listing 17-12

A Utility Class That Creates a Set of Controls Bound to the Properties of a Lighting Instance

The program in Listing 17-13 uses the utility class to bind the properties of a Lighting effect to UI controls. It displays a window as shown in Figure 17-26. Change the reflection properties using the sliders to see their effects.

// ReflectionTypeTest.java

// ...find in the book's download area.

Listing 17-13

Controlling Reflection’s Details

Understanding the Light Source

JavaFX provides three built-in light sources: distant light, point light, and spot light. A distant light is also known as a directional or linear light. A distant light source emanates parallel rays of light in a specific direction on the entire surface uniformly. The sun is a perfect example of a distant light source for the lighted surface of an object on the earth. The light source is so distant from the lighted object that the rays are almost parallel. A distant light source lights a surface uniformly, irrespective of its distance from the surface. This does not mean that the entire object is lighted. For example, when you stand in sunlight, not all parts of your body are lighted. However, the lighted part of your body has uniform light. The lighted part of an object depends on the direction distant light source of the light. Figure 17-27 shows a distant light hitting some part of the surface of an object. Notice that the rays of light are seen, not the light source itself, because, for a distant light, only the direction of the light is important, not the distance of the light source from the lighted object.

A point light source emanates rays of light in all directions from an infinitesimally small point in a 3D space. Theoretically, the light source has no dimension. It emanates light uniformly in all directions. Therefore, unlike the distant light, the direction of the point light source relative to the lighted object is immaterial. Bare light bulbs, stars (excluding the sun, which serves like a distant light), and candlelight are examples of point light sources. The intensity of a point light hitting a surface decreases with the square of the distance between the surface and the point light source. If a point light is very close to the surface, it creates a hotspot, which is a very bright point on the surface. To avoid hotspots, you need to move the light source a little away from the surface. A point light source is defined at a specific point in a 3D space, for example, using x, y, and z coordinates of the point. Figure 17-28 shows a point light radiating rays in all directions. The point on the object surface closest to the light will be illuminated the most.

A spot light is a special type of a point light. Like a point light, it emanates rays of light radially from an infinitesimally small point in a 3D space. Unlike a point light, the radiation of light rays is confined to an area defined by a cone—the light source being at the vertex of the cone emanating light toward its base, as shown in Figure 17-29. Examples of spot lights are car headlights, flashlights, spotlights, and desk lights with lampshades. A spot light is aimed at a point on the surface, which is the point on the surface where the cone axis is located. The cone axis is the line joining the vertex of the cone to the center of the base of the cone. In Figure 17-29, the cone axis is shown with a dashed arrow. The effect of a spot light is defined by the position of the vertex of the cone, the cone angle, and the rotation of the cone. The rotation of the cone determines the point on the surface that is intersected by the cone axis. The angle of the cone controls the area of the lighted area. The intensity of a spot light is highest along the cone axis. You can simulate a distant light using a spot light if you pull the spot light “far” back, so the rays of light reaching the surface are parallel.

A light source is an instance of the abstract Light class. A light has a color, which is specified by using the color property of the Light class. For example, using a red color Light will make a Text node with a white fill look red.

There are three subclasses of the Light class to represent specific types of light source. The subclasses are static inner classes of the Light class:

• Light.Distant

• Light.Point

• Light.Spot

A class diagram for classes representing light sources is shown in Figure 17-30. The Light.Spot class inherits from the Light.Point class. Classes define properties to configure the specific type of light sources.

Tip

When you do not provide a light source for a lighting effect, a distant light is used, which is an instance of the Light.Distant class.

Using a Distant Light Source

An instance of the Light.Distant class represents a distant light source. The class contains two properties to specify the direction of the light source:

• azimuth

• elevation

Both properties are of the double type. Their values are specified in degrees. Both properties are used together to position the light source in a 3D space in a specific direction. By default, their values are 45 degrees. They do not have maximum and minimum values. Their values are computed using modulo 360. For example, an azimuth value of 400 is effectively 40 (400 modulo 360 = 40).

The azimuth property specifies the direction angle in the XY plane. A positive value is measured clockwise, and a negative value is measured counterclockwise. A 0 value for the azimuth is located at the 3 o’clock position, 90 at 6 o’clock, 180 at 9 o’clock, 270 at 12 o’clock, and 360 at 3 o’clock. An azimuth of –90 will be located at 12 o’clock. Figure 17-31 shows the location of the distant light in the XY plane for different azimuth values.

The elevation property specifies the direction angle of the light source in the YZ plane. The elevation property values of 0 and 180 make the light source stay on the XY plane. An elevation of 90 puts the light source in front of the scene, and the entire scene is lighted. An elevation greater than 180 and less than 360 puts the light source behind the scene making it appear dark (without light).

The Light.Distant class contains two constructors:

• Light.Distant()

• Light.Distant(double azimuth, double elevation, Color color)

The no-args constructor uses 45.0 degrees for azimuth and elevation and Color.WHITE as the light color. The other constructor lets you specify these properties.

The program in Listing 17-14 shows how to use a Light.Distant light. It displays a window that lets you set the direction for a distant light shining on a rectangle and a Text node. Figure 17-32 shows an example of a text and rectangle with a distant light.

// DistantLightTest.java

// ...find in the book's download area.

Listing 17-14

Using a Distant Light Source

Using a Point Light Source

An instance of the Light.Point class represents a point light source. The class contains three properties to specify the position of the light source in space: x, y, and z. The x, y, and z properties are the x, y, and z coordinates of the point where the point light is located in the space. If you set the z property to 0.0, the light source will be in the plane of the scene showing as a very tiny bright point lighting a very small area. As the z value increases, the light source moves away from the scene plane, lighting more area on the scene. A negative value of z will move the light source behind the scene, leaving it with no light, and the scene will look completely dark.

The Light.Point class contains two constructors:

• Light.Point()

• Light.Point(double x, double y, double z, Color color)

The no-args constructor places the point light at (0, 0, 0) and uses a Color.WHITE color for the light. The other constructor lets you specify the location and the color of the light source.

The program in Listing 17-15 shows how to use a Light.Point light. It displays a window with sliders at the bottom to change the location of the point light source. As the point light source moves away from the scene, some area on the scene will be brighter than the other area. Figure 17-33 shows an example of a Text node overlaid on a rectangle being lighted by a point light.

// PointLightTest.java

// ...find in the book's download area.

Listing 17-15

Using a Point Light Source

Using a Spot Light Source

An instance of the Light.Spot class represents a spot light source. The class inherits from the Light.Point class. The inherited properties (x, y, and z) from the Light.Point class specify the location of the light source, which coincides with the vertex of the cone. The Light.Spot class contains four properties to specify the position of the light source in space:

• pointsAtX

• pointsAtY

• pointsAtZ

• specularExponent

The pointsAtX, pointsAtY, and pointsAtZ properties specify a point in the space to set the direction of the light. A line starting from (x, y, z) and going toward (pointsAtX, pointsAtY, pointsAtZ) is the cone axis, which is also the direction of the light. By default, they are set to 0.0. The specularExponent property defines the focus of the light (the width of the cone), which ranges from 0.0 to 4.0. The default is 1.0. The higher the value for the specularExponent, the narrower the cone is and the more focused light will be on the scene.

The Light.Spot class contains two constructors:

• Light.Spot()

• Light.Spot(double x, double y, double z, double specularExponent, Color color)

The no-args constructor places the light at (0, 0, 0) and uses a Color.WHITE color for the light. Because the default values for pointsAtX, pointsAtY, and pointsAtZ are 0.0, the light does not have a direction. The other constructor lets you specify the location and the color of the light source. The cone axis will pass from the specified (x, y, x) to (0, 0, 0).

The program in Listing 17-16 shows how to use a Light.Spot light. It displays a window that lets you configure the location, direction, and focus of the light using sliders at the bottom. Figure 17-34 shows an example of a Light.Spot light focused almost in the middle of the rectangle.

// SpotLightTest.java

// ...find in the book's download area.

Listing 17-16

Using a Spot Light Source

The PerspectiveTransform Effect

A PerspectiveTransform effect gives a 2D node a 3D look by mapping the corners to different locations. The straight lines in the original nodes remain straight. However, parallel lines in the original nodes may not necessarily remain parallel.

The first letter in the property names (u or l) indicates upper and lower. The second letter in the property names (l or r) indicates left and right. The last letter in the property names (x or y) indicates the x or y coordinate of a corner. For example, urx indicates the x coordinate of the upper-right corner.

The no-args constructor creates a PerspectiveTransform object with all new corners at (0, 0). If you set the object as an effect to a node, the node will be reduced to a point, and you will not be able to see the node. The other constructor lets you specify the new coordinates for the four corners of the node.

The program in Listing 17-17 creates two sets of a Text node and a rectangle. It adds two sets to two different groups. It applies a PerspectiveTransform effect on the second group. Both groups are shown in Figure 17-35. The group on the left shows the original nodes; the group on the right has the effect applied to it.

// PerspectiveTransformTest.java

// ...find in the book's download area.

Listing 17-17

Using the PerspectiveTransform Effect

Summary

An effect is a filter that accepts one or more graphical inputs, applies an algorithm on the inputs, and produces an output. Typically, effects are applied to nodes to create visually appealing user interfaces. Examples of effects are shadow, blur, warp, glow, reflection, blending, and different types of lighting. The JavaFX library provides several effect-related classes. Effect is a conditional feature. Effects applied to nodes will be ignored if it is not available on a platform. The Node class contains an effect property that specifies the effect applied to the node. By default, it is null. An instance of the Effect class represents an effect. The Effect class is the abstract base for all effect classes. All effect classes are included in the javafx.scene.effect package.

Some effects can be chained with other effects. The effects are applied in sequence. The output of the first effect becomes the input for the second effect and so on. Effect classes that allow chaining contain an input property to specify the effect that precedes it. If the input property is null, the effect is applied to the node on which this effect is set. By default, the input property is null.

A shadowing effect draws a shadow and applies it to an input. JavaFX supports three types of shadowing effects: DropShadow, InnerShadow, and Shadow.

A blurring effect produces a blurred version of an input. JavaFX lets you apply different types of blurring effects, which differ in the algorithms they use to create the effect. Three types of blurring effects are BoxBlur, GaussianBlur, and MotionBlur.

The Bloom effect adds glow to the pixels of its input that have a luminosity greater than or equal to a specified limit. Note that not all pixels in a Bloom effect are made to glow. An instance of the Bloom class represents a Bloom effect.

The Glow effect makes the bright pixels of the input brighter. An instance of the Glow class represents a Glow effect.

The Reflection effect adds a reflection of the input below the input. An instance of the Reflection class represents a reflection effect.

Sepia is a reddish-brown color. Sepia toning is performed on black-and-white photographic prints to give them a warmer tone. An instance of the SepiaTone class represents a SepiaTone effect.

The DisplacementMap effect shifts each pixel in the input to produce an output. The name has two parts: Displacement and Map. The first part implies that the effect displaces the pixels in the input. The second part implies that the displacement is based on a map that provides a displacement factor for each pixel in the output. An instance of the DisplacementMap class represents a DisplacementMap.

The ColorInput effect is a simple effect that fills (floods) a rectangular region with a specified paint. Typically, it is used as an input to another effect. An instance of the ColorInput class represents the ColorInput effect.

The ImageInput effect works like the ColorInput effect. It passes the given image as an input to another effect. The given image is not modified by this effect. Typically, it is used as an input to another effect, not as an effect directly applied to a node. An instance of the ImageInput class represents the ImageInput effect.

Blending combines two pixels at the same location from two inputs to produce one composite pixel in the output. The Blend effect takes two input effects and blends the overlapping pixels of the inputs to produce an output. The blending of two inputs is controlled by a blending mode. JavaFX provides 17 predefined blending modes. An instance of the Blend class represents the Blend effect.

The Lighting effect, as the name suggests, simulates a light source shining on a specified node in a scene to give the node a 3D look. A Lighting effect uses a light source, which is an instance of the Light class, to produce the effect.

A PerspectiveTransform effect gives a 2D node a 3D look by mapping the corners to different locations. The straight lines in the original nodes remain straight. However, parallel lines in the original nodes may not necessarily remain parallel. An instance of the PerspectiveTransform class represents a PerspectiveTransform effect.

The next chapter will discuss how to apply different types of transformations to nodes.