Effect - Animated Lighting

C H A P T E R 4

■ ■ ■

71

Effect: Animated Lighting
As you glance around any room, it becomes apparent that though every object is illuminated subtly from
many angles, one light source tends to dominate the others. The light from this main source makes one
side of an object appear bright and the other side dark, often with a smooth gradient transitioning
between the two. The human eye uses this difference between the light and dark to estimate an object’s
size and shape. When light moves across an object, the eye and brain get a chance to confirm the
guesses, providing certainty about the nature of the object.
Simulating light in an application is an old trick; both the beveled corners of the 90s and the over-
glossy buttons of the 2000s are ways of simulating light. As animations become increasingly common in
everyday computing tasks, the opportunity to take advantage of animated light to produce convincing
effects also increases. This chapter explores the basics of lighting in JavaFX and how to animate it.
Lighting Basics
Every node in JavaFX has a property called effect. JavaFX comes with a number of built-in effects to give a
Node a unique look. Among these is Lighting, which is used to illuminate a Node in a realistic way. The
Lighting effect can also give an otherwise flat-seeming node a 3D look. A lighting effect can cast light
on a single Node, or all nodes in a Group. Simply placing a light in the scene will not illuminate all Nodes in
the scene unless that light is applied to the root Node. When applying a Lighting effect, there are three
types of lights to choose from. These three types will be familiar to anyone who has worked with 3D
graphics. In fact, two of the three types of lights allow you to specify a Z coordinate, something that is not
common in a 2D graphics library.
CHAPTER 4 ■ EFFECT: ANIMATED LIGHTING

72

Figure 4-1. Sample lights
The screenshot in Figure 4-1 shows three rectangles, the left one illuminated by a DistantLight, the
center illuminated by a PointLight and the right illuminated by a SpotLight. Here’s how each light works:

DistantLight: A DistantLight is a far-away light and will illuminate a Node evenly from one direction.
Much like the Sun, this light will strike every node in a group from the same direction. In JavaFX, how
this light hits its target can be specified by setting the properties azimuth and elevation. Azimuth
describes the angle from which the light will be coming. An azimuth of 0.0 is to the right of a Node while
an azimuth of 90.0 is from the bottom, and so forth.
Elevation describes how directly or obliquely the light will hit the node. An elevation of 0.0 indicates
that the DistantLight is shining on the node from the plane of the screen, while an elevation of 90.0
indicates the DistantLight is coming from the perspective of the user.

PointLight: A PointLight is a light that exists someplace in the scene and illuminates Nodes from a
specific point in space. This is much like a bare light bulb in a dark room. By specifying an X, Y, and Z
coordinate for a PointLight, an object can be illuminated as if it is very close to a light, or very distant.

CHAPTER 4 ■ EFFECT: ANIMATED LIGHTING

73

SpotLight: A SpotLight is much like a PointLight in that an X, Y, and Z location can be specified.
However, the SpotLight also has a sense of direction, and a point at which the light is shining can be
specified. A SpotLight is like a desk lamp or a flashlight, in that it produces a cone of light. When this
cone intersects a surface, it projects a very distinctive light pattern on to the surface.
Animating Light
Each of the light types provides unique opportunities for animation. The examples that follow explore
how you can use these light types to produce particular results. There is an additional example at the
end that shows how lighting can be combined with shadows to make some interesting animations. The
code in Listing 4-1 is the framework in which the examples are run.

Listing 4-1. Main.fx
var exampleGroup = Group{};

public function run():Void{

var sampleButton = Button{
text: "Sample Lights";
action: sampleLights;
}
var distantButton = Button{
text: "Distant Light";
action: distantLight;
}
var pointButton = Button{
text: "Point Light";
action: pointLight;
}
var spotButton = Button{
text: "Spot Light";
action: spotLight;
}
var withButton = Button{
text: "Shadow";
action: withShadow;
}

var topBox = HBox{
translateX: 48
translateY: 16
spacing: 32

content: [sampleButton, distantButton, pointButton, spotButton, withButton]
}

Stage {
title: "Chapter 4"
width: 640
CHAPTER 4 ■ EFFECT: ANIMATED LIGHTING

74

height: 480
scene: Scene {
fill: Color.BLACK
content: [topBox,exampleGroup]
}
}
}

function reset(){
delete exampleGroup.content;
exampleGroup.scene.fill = Color.BLACK;
}
function sampleLights():Void{
reset();

var rect1 = Rectangle{
width: 100
height: 100
fill: Color.WHITE
effect: Lighting{

light: DistantLight{azimuth: 180.0, elevation: 45.0, color: Color.RED}
surfaceScale: 4;
}
}

var rect2 = Rectangle{
width: 100
height: 100
fill: Color.WHITE
effect: Lighting{
light: PointLight{x: 50.0, y: 50.0, z: 20.0, color: Color.GREEN}
surfaceScale: 4;
}
}

var rect3 = Rectangle{
width: 100
height: 100
fill: Color.WHITE
effect: Lighting{
light: SpotLight{x: 50.0, y: 30.0, z: 20.0, pointsAtX: 50.0, pointsAtY: 100.0,
color: Color.BLUE}
surfaceScale: 4;
}
}


var box = HBox{
translateX: 96
translateY: 190

spacing: 64
Download at WoweBook.com
CHAPTER 4 ■ EFFECT: ANIMATED LIGHTING

75

content:[rect1, rect2, rect3]
}

insert box into exampleGroup.content;
}

Each of the five buttons in Listing 4-1 clears the contents of exampleGroup and then inserts new
content. The method that produced the non-animated example from the previous section is also
included; it shows how the three rectangles with the different light effect are created. The details of the
animated examples follow.
Distant Light Example
This example explores how a distant light can be used to make otherwise 2D text appear 3D. In the
screenshots in Figures 4-2 and 4-3, you can see the same text illuminated from two different angles.

Figure 4-2. Distant light on the right
CHAPTER 4 ■ EFFECT: ANIMATED LIGHTING

76


Figure 4-3. Distant light on the top
Figure 4-2 shows the text is being illuminated from the right so that the right side of each letter is
brighter than the left side. In Figure 4-3, the letters are lit from the top. The code in Listing 4-2 creates an
animation that includes the two scenes.

Listing 4-2. Main.fx (distantLight)
function distantLight():Void{
reset();

var elev = 0.0;
var azim = 0.0;

var lighting = Lighting {
light: DistantLight { azimuth: bind azim, elevation: bind elev }
surfaceScale: 3
}