JavaScript/DHTML Tutorial

Filters: light() and addPoint()

DOM:
object.style.filter="light()";
object.filters.item(0).clear();
object.filters.item(0).addPoint(150,100, 100, 255, 255, 255, 100)

Macaws

x:	px
y:	px
z:
red:
green:
blue:
strength:	%

Figure 11-34. Application of light() and addPoint() filters.

The light() filter and addPoint() method create the effect of a spotlight shining on a page element. Two steps are required to apply these filters which must be done through scripting.

First, a light() filter is applied with a DOM setting in the following general format.

object.style.filter="light()"

Figure 11-35. General format for light() filter.

Second, a spotlight is added with the addPoint() method to focus a light on the page element. The general format for this method is shown below.

object.filters.item(filter#).addPoint(x, y, z, red, green, blue, strength)

Figure 11-36. General format for addPoint() method.

filter# is a reference to the sequence of filters applied to the element; as filters are added they are numbered consecutively starting with 0.

x is the horizontal coordinate of the light source, measured in pixels across the width of the element.

y is the vertical coordinate of the light source, measured in pixels from the top of the element.

z is the z-axis level of the light source; the higher the number the larger the light span.

red is a red value from 0 (lowest saturation) to 255 (highest saturation).

green is a green value from 0 (lowest saturation) to 255 (highest saturation).

blue is a blue value from 0 (lowest saturation) to 255 (highest saturation).

strength is the intensity of the light filter from 0% to 100%.

In the following example, a script applies these statements to shine a light on the center of a division. The assumption is that the light filter is the first filter (0) applied to the division. The filters are applied when the page is loaded.

<script type="text/javascript">

function AddPoint()
{
  document.getElementById("DIV").style.filter="light()";
  document.getElementById("DIV").filters.item(0).addPoint(90,80,100,255,255,255,100);
}

</script>

<body onLoad="AddPoint()">

<div id="DIV">
  contents of division...
</div>

Listing 11-15. Code to apply a point light source to a division.

(Each time the addPoint() method is applied, a new light source is added. To keep this from causing additional lights to be added to the example image, the light source is cleared with its clear() method before issuing the statement. You should not need to use the clear() method on your pages.)

Below is an animated effect, moving the light source across the image with the moveLight() method.

Figure 11-37. Animating an addPoint() filter across an image.

<script type="text/javascript">
var Location;

function InitPic()
{
  document.getElementById("PIC").style.filter="light()";
}

function AddLight()
{
  document.getElementById("PIC").filters.item(0).addPoint(0,100,75, 255, 255, 255,100);
  Location = 0;
  Timer = setInterval("RunLight()",100);
}

function RunLight()
{
  if (Location < 300) {
    Location += 7;
    document.getElementById("PIC").filters.item(0).moveLight(0,Location,100,75,true);
  } else {
    Timer = clearInterval();
  }
}

</script>

<body onload="InitPic()">
...
<img id="PIC" src="Macaws.jpg" style="float:left; margin-right:20px"/>

<input type="button" value="Run" onclick="AddLight()"/>

Listing 11-16. Code to animate a point light source across an image.

When the page loads, the InitPic() function is called to initialize the image by adding a light source. Since no additional methods are applied to the light() filter, the picture starts out with no light shining on it.

A button to activate the moving light calls the AddLight() function. This function applies the addPoint() method to the image's light source, placing the point of light at the left of the image (x = 0) and half-way down (y = 100). A z-axis value of 75 elevates the light above the image. Then the picture is made visible with the spot of light showing on its left edge.

Movement of the light across the picture occurs through an interval timer that increments the light source 7 pixels every 10th of a second (100 milliseconds). To set this up, variable Location is established to keep track of the light's location during its movement. The variable is initialized to 0, matching the left edge of the picture. Function MoveLight() is called by the timer every 100 milliseconds:

Timer = setInterval("MoveLight()",100)

The MoveLight() function checks the current location of the light source. If it is less that 300 pixels across the image (the width of the picture), then the Location variable is increment by 7 (pixels) and the light is moved:

document.getElementById("PIC").filters.item(0).moveLight(0,Location,100,75,true)

The moveLight() method is in the following format and includes five parameters.

object.filters.item(filter#).moveLight(lightnumber, x, y, z, absolute)

Figure 11-38. General format for moveLight() method.

filter# is a reference to the sequence of filters applied to the element; as filters are added they are numbered consecutively starting with 0.

lightnumber is the numeric identifier for the light source (0 in the case of a single light).

x specifies the left pixel coordinate of the light source.

y specifies the top pixel coordinate of the light source.

z specifies the z-index level of the light source.

absolute specifies whether the light source is moved absolutely (true) or relative (false) to the initial position of the source.

In the example script, the Location variable is incremented by 7 pixels and is used as the y value in the moveLight() method. Thus, each time the MoveLight() function is called, the light moves 7 pixels across the picture.

When the light reaches the right edge of the picture (Location=300), the timer is turned off, halting the MoveLight() function and leaving the picture dark.