[ CLICK HERE for free applets ]
www.Free-Applets.com

Lake java applet notes

by
David Griffiths
www.demon.co.uk/davidg/spigots.htm


Making it realistic


Original image

It's very easy to use the Lake applet to reflect a distant horizon, but what about a more complex image, like the one shown here, with some foreground detail?

Here, for instance, the courtyard does not reflect in the water and the tower on the right hand side projects out over the water. Can Lake be used to animate the water in this scene?

Fortunately Lake (version 2 and above) can - by using the OVERLAY parameter.

The parameter is used to place a static (i.e. non-rippling) image over the top of the lake scene. This is usually used to place a logo over the top of the scene, but we can use it more subtly. Here are the steps to create an animated version of this scene.

First crop the reflected part
Take the original image and then slice it where the horizon would be. A common mistake made when using Lake is to include a horizon in the reflected image. The only things that reflect in the surface of a flat lake are those above the horizon. We therefore need to get rid of the image below the horizon. We will supply the name of this image as the IMAGE parameter.

The height of the applet will have to be slightly less than twice the height of the reflected image. Fortunately the original image is 275 pixels high and when we try the applet with this height we see that it works quite nicely. So far then we have:


<applet code="Lake" width=400 height=275>
<param name=image value=toppart.gif>
</applet>


Now get the bits that won't reflect Image with the water cut out The first and easiest part of this process, is to cut out the part where the water shows through. You can see this to the left here.
Cut out the top half

But we can do more than this. By cutting out more of the picture we can save some bandwidth, and we know that the most of the top half of the image will already be visible. We can therefore crop out the top 150 rows of pixels.

Raised by 13 pixels
But... when the overlay image is placed over the animation, it is put in the centre of the applet. Central, that is, with regard to twice the height of the original image. That means the the overlay will be centred about the 150th pixel row. But the overlay is only 275 pixels high; therefore the image will drop by (300 - 275) / 2 =12.5 pixels. To make sure that the overlay goes over the right area, we must raise the image by 13 pixels.


The great cover up
Now that we have the reflection image and the overlay sorted out, we can put it all together with the following code:

<applet code="Lake" width=400 height=275>
<param name=image value=toppart.gif>
<param name=overlay value=mask3.gif>
</applet>

We can now compare the two images:


Original image

Lake version







Last updated: