DemoDHTML: Filters

Light filter

Light is not like the other filters. While it may count as a single filter, it must be applied with one of several methods using SCRIPT. These various methods can add general, non-directional light (addAmbient), or a cone of light as from a spotlight on a stage (addCone), or a point of light like a light bulb (addPoint).

The two identical images below illustrate the difference in just setting the light filter and setting it plus scripting the filter (addCone in this case). Using FILTER:light alone just turns out the stage lights!


Set inline STYLE="FILTER:light"	Set inline STYLE="FILTER:light" In the BODY tag include: onLoad= {santa2.filters.light.addCone(160,200,0,100,100,255,0,0,100,20);}

Note that when we say we are "adding" a light, this means like to a darkened stage. We are not "adding" to the ordinary view of an image or text, but to the completely blacked out version! This explains why when you "add" ambient light, the result is darker than what you started with!!

Syntax & Setting

In STYLE the light filter is created with the simple syntax:

{FILTER: Light} or {filter:light(enabled=0)}

Enabled=0 disables the filter while a value of 1 enables it. The light filter is often disabled to start with so you won't see an all-black image while the page is loading.

The actual type of light source is set with script. The various choices are listed under Light in the filters list.

Multiple Lights

Just as on a stage, you can have several different lights shining on the same object or on different parts of the page. There is a limit, however, of 10 lights for each Visual Filter control. To have more lights, you must create more Visual Filter controls by creating different objects to apply your lights to, in groups of 10 or less. You will start running into time lags on the rendering with very many lights, especially if they are being manipulated thru scripts.

Combining Lights

You should also be aware of how light colors combine with each other and with the existing colors on the page.

Let's first check on the effect of lights on existing color.
The buttons below define spotlights which are exactly the same except for color.
Clicking and reclicking will add light sources. Remember that only 10 can be applied at a time, including repeats. The "Remove filters" button will reset everything so you can start over.

What did you get with all three colors on?

How do the lights interact just with each other?

The circles below are white with a black edge. Red, Green, and Blue cone lights have been created centered directly above the circles. These lights are centered over their respective circles at a z-distance of 90, strength of 100, spread of 300.

Turn on the lights by clicking the buttons. Note how the colors blend where the lights overlap.

Clicking multiple times has the effect of adding that many spotlights! Try 3 clicks each.
Remember that you can only have 10 lights at a time.

Notice the center section where all colors overlap is now white!
Can you find areas of purple, yellow, and orange?