How the light point animations work

For more details see the source code to the light points page - you'll find more comments there.

MoonPath

Tip - to get an intense light, draw two points in the same place. I used two to create this moon, like this:

MyPic.filters.light.addPoint(-10, 72, 20,255,255,80,80)
MyPic.filters.light.addPoint(-10, 72, 20,255,255,80,80)

then moved them like this:

MyPic.filters.light.MoveLight(1, xpos, ypos, 20, 1)
MyPic.filters.light.MoveLight(2, xpos, ypos, 20, 1)

I increment xpos ( a variable) each time through, moving the moon to the right. The move routine is called repeatedly, using the setInterval() method. I would have moved the moon in an arc, but straight-line maths were easier!

GlowGrow

A light point's y-pos value determines how far away the 'torch' is from the image surface - the farther away (bigger the value), the bigger the light area, and the less intense the light. This routine works by drawing a single light point close to the image (low y-pos value), then repeatedly moving it further away using the MoveLight() method, like this:

MyPic.filters.light.MoveLight(1, 151, 108, zpos, 1)

Explode!

I find this one terrifyingly lifelike (not that I've ever actually seen a nuclear explosion first-hand!). This one takes the effect of adding more light points at the same location to the extreme - as you add them, IE4 makes the effect more and more intense.

This picture receives eight light points, one after the other, all at the same x,y coordinates. The first is of near-white light, close to the surface (y-pos = 50), immediately followed by two more, slightly yellower, at y-pos = 150. They form the initial burst, and are followed by eight yellow points, all at y-pos 150, at 50 millisecond intervals. Let's hope it never happens for real!

UFO!

Steven Spielberg eat your heart out! Actually this represents about as far as I'd go with light point animation programming, which isn't very far - although it's still great fun to do.

This animation demonstrates three sets of timers running concurrently - one each for the moon, red beacon and space-ship. They're completely independent, so once I set the moon moving, I could forget it and concentrate on putting the UFO through its paces.

The moon is moved in the same way as for MoonPath, though more slowly. The beacon is a single light-point, flashed by a pair of functions, beaconOn() and beaconOff(), which set its strength to 100 and zero percent respectively. They call each other with the setTimeout() method

The space-ship is simply three light points, moved one after the other by my move routine. When it reaches 'sea level', I gradually change its colour by repeatedly calling the .ChangeColor() method on each of the three lights, each time reducing the blue light level. Then I make the lights pulsate (grow dim then strong) by repeatedly calling the .SetStrength() method on all three lights, at first reducing the strength value each time through, then increasing it. Finally I change the three lights' colour back to white (by repeatedly increasing the blue level), and fly them back off the screen, this time on a diagonal path.

The techniqe for making a series of events happen, as in the UFO flying down, changing colour, pulsating etc, is to make each stage's JavaScript function repeat until a known state is reached, then move on to the next stage. Thus, for example, the function ufo2(), which moves the three lights vertically down the screen 10 pixels at a time, is set off to repeat indefinitely via a setInterval() method call. However when ufo2() finds that the vertical position (ypos) has reached 125 ('sea level'), it cancels its own interval (using the clearInterval() method) then uses setInterval() to set the next stage, ufo3() (which gradually changes the light colours) running.