Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Out and About

JavaScript Bouncing Balls

Multi-dialogue forms on one page

Turning Tables Into Selection Lists

Drag and Drop with Microsoft Internet Explorer 5

Dynamic Floating Tool Tips

What is DHTML?

Image Manipulation Techniques

String Gradients the Fun Way!

MSIE Page Transition Filters

"The Light Fantastic"

You are here: irt.org | Articles | Dynamic HTML (DHTML) | "The Light Fantastic" [ previous next ]

Published on: Monday 15th March 1999 By: Ryan Detert and Martin Webb

"The Light Fantastic"

Note:
The examples presented in this article can only be viewed with Internet Explorer 4.0 or better, on the Windows platform.

If you are using a Windows machine, but do not have IE4, we'd recommend that you download IE4 from Microsoft so you can appreciate the examples presented.

Introduction

Microsoft Internet Explorer 4.0 offers a powerful line of DHTML commands and functions. We previously covered many of the Visual Filter effects in the previous Multimedia in Microsoft Internet Explorer article. This time we return to the one main Visual Filter that we left out: Lights.

View Source

Visual Filters

As mentioned in the previous article, Visual Filters can be used to manipulate both regular text, as well as images. Here is an example of text-manipulation using the glow() filter:

This text is glowing!

The code that performed the task was simply:

<DIV STYLE="width:150; height:20; filter:Glow(color=red; strength=50)"> 
This logo is glowing!
</DIV>

Light Filters

Initializing a Light Filter requires the following syntax:

<IMG SRC="image.gif" STYLE="filter:Light;">

This Light filter control can then be used by JavaScript to apply various Light methods to the image object.

Light Filter Methods

There are seven Light Filter methods:

AddAmbient

The AddAmbient() method can be used to either dim or strengthen the light cast on an image. This means that you can make a picture brighter or darker by placing a virtual light over the image. The ambient light may also be any 24-bit color composed of an RGB triplet.

Syntax:

object.filters.Light.AddAmbient(R,G,B,Strength);

<DIV ID="AmbientId" STYLE="width:320; height:240; filter:Light">
<IMG SRC="image.jpg" WIDTH="320" HEIGHT="240">
</DIV>

Color: R: G: B:
Strength:

Source:

AddCone

The AddCone() method is one of more interesting Light Filter methods. However, this filter requires a little bit of 3-Dimensional Cartesian Co-ordinate understanding (x, y, z), and is thus slightly more cryptic than any of the other filters. This light is literally projected as a cone. With this, picture a cone in your mind, then look at its vertex. This vertex is placed at the 3D co-ordinate (x, y, z) where (0, 0, 0) is the top left corner of the image. The more you increment the z-value, the closer towards you the vertex appears. A target (x, y) co-ordinate value is also specified, in which the center of the cones base will be located. The light is brightest at its defined origin, the cone's vertex. This method also requires a strength setting and a spread variable that represents the width (in degrees) of the cone as it projects from its origin. The coned light may also be any 24-bit color composed of an RGB triplet.

Syntax:

object.filters.Light.AddCone(x1,y1,z1,x2,y2,R,G,B,Strength,Spread);

<DIV ID="ConeId" STYLE="width:320; height:240; filter:Light">
<IMG SRC="image.jpg" WIDTH="320" HEIGHT="240">
</DIV>

x1y1
z1x2
y2
Color: R: G: B:
Strength: Spread:

Source:

AddPoint

The AddPoint() method behaves in very much the same way that the AddCone() method does. However, the results are slightly different. Unlike the spot light cast on an image using the AddCone() method, the AddPoint() method casts what is known as an omni spot light, which is most like an illuminated blotch of light focused on a specified region.

Syntax:

object.filters.Light.AddPoint(x,y,z,R,G,B,Strength);

<DIV ID="PointId" STYLE="width:320; height:240; filter:Light">
<IMG SRC="image.jpg" WIDTH="320" HEIGHT="240">
</DIV>

xy
zStrength:
Color: R: G: B:

Source:

ChangeColor

This method changes the light color of any previously applied Light Filter. There two important things to note while using these next few filters, the lightnumber and fAbsolute property. You must access the previously applied Light filters by the number index in which they were accessed. For example, if you used the AddAmbient() method first, then it would be indexed as lightnumber=0. The fAbsolute property will be discussed in other methods as well, it basically tells the browser exactly how you would like to apply the method. For instance, using the ChangeColor() method, if fAbsolute is true the light is changed to the specified color, but if it is false the light is decremented or incremented accordingly, based on the RGB values.

Syntax:

object.filters.Light.ChangeColor(Lightnumber,R,G,B,fAbsolute);

Lightnumber: fAbsolute:
Color: R: G: B:

Source:

ChangeStrength

This method is used in exactly the same way as the ChangeColor() method except that it alters a previously applied Light filter's intensity.

Syntax:

object.filters.Light.ChangeStrength(Lightnumber,Strength,fAbsolute);

Lightnumber: Strength:
fAbsolute:

Source:

Clear

This filter deletes all lights associated with an object. This filter is pretty straightforward.

Syntax:

object.filters.Light.Clear;

MoveLight

This is the final Light Filter. It is used to change the location of either a cone light or point light. For cone lights, this method alters the light's focus, which are the x and y attributes. For point lights, this method moves the entire light to a new x ,y and z location. Note that it has no effect on ambient lights.

Syntax:

object.filters.Light.MoveLight(Lightnumber,x,y,z,fAbsolute);

Lightnumber: x:
y: z:
fAbsolute:

Source:

Limitations

There are, however, limitations on Light Filters:

<DIV STYLE="filter:Light;"><IMG SRC="image.gif">This is some text</DIV>

<IMG SRC="image.gif" STYLE="filter:Light Light1;">

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.all) {
    default.filters.Light.AddAmbient(...);
    default.filters.Light.AddCone(...);
    default.filters.Light.AddPoint(...);
    default.filters.Light.AddAmbient(...);
    default.filters.Light.AddCone(...);
    default.filters.Light.AddPoint(...);
    default.filters.Light.AddAmbient(...);
    default.filters.Light.AddCone(...);
    default.filters.Light.AddPoint(...);
    default.filters.Light.AddAmbient(...);

    // to add an eleventh filter:
    default.filters.Light1.AddCone(...);
}
//--></SCRIPT>

<IMG ID="default" SRC="image.gif" STYLE="filter:Light;">

<SCRIPT LANGUAGE="JavaScript"><!--
if (document.all)
    default.filters.Light.AddAmbient(255,255,255,100);
//--></SCRIPT>

Working Example

Finally, the source code for the Light Show shown in the introduction:

<SCRIPT LANGUAGE="JavaScript"><!--
function initArray(num) { for (var j=0; j < num; j++) this[j] = 0; }

// try to speed up by pre-calculating sines and cosine values:
var sinLookup = new initArray(360), cosLookup = new initArray(360);

for (var j=0, h; j < 360; j++) {
    h = j * Math.PI / 180;
    sinLookup[j] = Math.sin(h);
    cosLookup[j] = Math.cos(h);
}

var x  = new initArray(3), y  = new initArray(3); //(x,y) coordinates
var px = new initArray(3), py = new initArray(3); //define center of circles
var angles  = new initArray(3);  //specify angle that light will be rotated from previous (x,y)

var r, z = 84, w = -1;

function init() {
    with (picture) {
        r = width >> 2;               // set radii for all circles

    //set up centers of the 3 light circles
        x[0] = px[0] = width >> 1;    // divide by 2...looks cooler and faster ;-)
        x[1] = px[1] = width * (1/3);
        x[2] = px[2] = width * (2/3);

        y[0] = py[0] = height * (1/3);
        y[1] = py[1] = height * (2/3);
        y[2] = py[2] = height * (2/3);

        filters.Light.AddPoint(x[0], y[0], z, 0xFF, 0x00, 0x00, 90);
        filters.Light.AddPoint(x[1], y[1], z, 0x00, 0xFF, 0x00, 90);
        filters.Light.AddPoint(x[2], y[2], z, 0x00, 0x00, 0xFF, 90);
    }
    
    rotateCircles();
}

function rotateCircles() {
    // adjust z within limits:
    z += w; if (z<24 || z>84) w *= -1
    
    for (var i=0; i < 3; i++) {
        // use different step increments so they overlap:
        angles[i] += 10 + i*5; if (angles[i] >= 360) angles[i] = 0;
        
        // looks cooler if some are going in opposite direction:
        if (!(i % 2)) r *= -1; else r *= (r < 0) ? -1 : 1;

        x[i] = Math.floor(r * cosLookup[angles[i]] + px[i]);
        y[i] = Math.floor(r * sinLookup[angles[i]] + py[i]);
        
        picture.filters.Light.MoveLight(i, x[i], y[i], z, true);
    }

    window.setTimeout('rotateCircles()', 1);
}
//--></SCRIPT>

<IMG SRC="image.gif" WIDTH="100" HEIGHT="100" ID="picture" STYLE="filter:Light;" ALIGN="left">

How It Works:

Despite its complex facade, this demo really isn't all that complicated. First, three point lights were added to the image using the AddPoint() method. The lights were then just rotated in circles at different speeds using some fancy trigonometry functions to pass variables to the MoveLight() method. Don't get hung up on the trigonometry, the important thing is that you understand that the lights were moved using the MoveLight() method. To create the blurry effect, the z-value of the lights were altered so that they appeared to be moving towards and away from the image, thus causing the lights radius to become larger as the z-value became larger and vice-versa.

Conclusion

As you can see from some of these examples, Light Filters add yet another multimedia effect to your images and text. With a small amount of effort you can make your images come alive, and give the impression to your visitors that they are seeing a large image file being loaded without all that strain on the bandwidth. The faster the processor of the computer being used, then the faster the effects. As ever, the usual health warning has to be mentioned when doing any animation - too much animation without any just cause can and will offend people.

Related items

Out and About

JavaScript Bouncing Balls

Multi-dialogue forms on one page

Turning Tables Into Selection Lists

Drag and Drop with Microsoft Internet Explorer 5

Dynamic Floating Tool Tips

What is DHTML?

Image Manipulation Techniques

String Gradients the Fun Way!

MSIE Page Transition Filters

©2018 Martin Webb