JavaScript/DHTML Tutorial

Filters: light() and addCone()

DOM:
object.style.filter="light()";
object.filters.item(0).clear();
object.filters.item(0).addCone(0, 0, 1, 300, 200, 0, 255, 0,20, 20);
object.filters.item(0).addCone(300, 0, 1, 0, 200, 255, 0, 0, 20, 20);

Macaws

Left cone:

x1:	px
y1:	px
z1:
x2:	px
y2:	px
red:
green:
blue:
strength:	%
spread:	%

Right cone:

x1:	px
y1:	px
z1:
x2:	px
y2:	px
red:
green:
blue:
strength:	%
spread:	%

Figure 11-31. Application of light() and addCone() filters.

The light() filter and addCone() method create the effect of multiple colored light sources shining on a page element. These are directional, cone-shaped light sources. 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-32. General format for light() filter.

Second, one or more cone lights are added with the addCone() method to shine a directional light across the page element. The general format for this method is shown below.

object.filters.item(filter#).addCone(x1, y1, z1, x2, y2, red, green, blue, strength, spread)

Figure 11-33. General format for addCone() 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.

x1 is the left coordinate of the location of the light source, in pixels.

y1 is the top coordinate of the location of the light source, in pixels .

z1 is the z-axis level of the light source.

x2 is the left coordinate of the target for the light focus.

y2 is the top coordinate of the target for the light focus.
(The light cone is at position x1,y1 focusing at position x2,y2 at z1 height above the element.)

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%.

spread is the angle of the light source from 0 to 90 degrees.

In the following example, a script applies these statements to shine a green light from the top-left and a red light from the top-right onto a division. The assumption is that the light filter is the first filter (0) applied to the division.These filters are applied when the page is loaded.

<script type="text/javascript">

function AddCone()
{
  document.getElementById("DIV").style.filter="light()";
  document.getElementById("DIV").item(0).addCone(0,0,1,300,200,0,255,0,20,20);
  document.getElementById("DIV").item(0).addCone(300,0,1,0,200,255,0,0,20,20);
}

</script>

<body onLoad="AddCone()">

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

Listing 11-14. Code to apply cone light sources to a division.

(Each time the addCone() 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.)