Configuration of the Lake applet
Applet by David Griffiths
(This page compiled from other online sources and customized for this personal sample by Dave Joern.)

1. Go download "Lake.zip"
2. Unzip with a compression utility.
3. The zip file contains 3 files:

• Lake.class
• Lake.java
• sunset.jpg (or "yourfile.jpg")

4. Lake.class is needed for the applet to work.
5. Lake.java is the source code for the applet and is not needed for the applet to work.
     It is only so you can see how it was made.
6. sunset.jpg is not needed, but the applet does require an image.
7. Paste the following HTML into an HTML page:

<applet code="Lake.class" width=251 height=260>
<param name="image" value="sunset.jpg">
</applet>

8. This HTML tells the browser to find a file called 'Lake.class' in the same directory as the HTML page.
9. It also tells the browser to find an image called 'sunset.jpg' in the same directory.

10. And it tells the browser to display an applet that is 251 pixels wide and 260 pixels high.

(If applet height is exactly double, e.g., 270 pixels high, a small unrendered band may appear at the bottom edge.)

So, you need 3 files for the applet to work; an HTML file, the class file, and an image.

Note! (If the resulting image with lake ripples tends to "stretch or drag" as you scroll, just minimize the window and then maximize it back. Obviously a redraw problem on somewhat slower machines or overworked browsers...)

Options:
If you want to put the files in different directories from each other, you need to indicate the file path in the HTML. (Experience shows it best to put "Lake.class" in same directory as HTML file.)

You can use the codebase attribute to tell the browser to look in another directory.

Using your own image, change the "image" value:
(<param name="image" value="yourfile.jpg").
Change the height and width attributes of the applet to the width and twice the height of your image. Adjust the height accordingly depending on the effect result.

Put your image in the same directory as the class file and the HTML file.
(It is best to start this way as some browsers just can't quite figure out where the elements are located if placed in distant directories. This way, you will know for sure if the applet works or not. Then feel free to locate elements elsewhere and make sure it all still works as you move stuff.)

Using "Ripple area" .GIF masks
Size of two "half layers proper height" becomes a little more critical in this application.
The matching of the top JPEG "image" used as primary reflection to the transparent GIF "overlay"....the part of the puzzle, the transparent area of the GIF, allowing that area of the "Lake ripple" to render behind.

When run for the first time, there may be a "blank" area at the bottom. Simply go into the applet "height" and reduce that a few pixels at a time until the "blank" area goes away. Not so easy with a frame edge though. You'll see. Experiment....

If the overlaying GIF seems to be misaligned to the top JPEG, use your graphics editor and adjust (+/- a few pixels at a time) the transparent GIF height at the top edge.

---

This image was "prepared" to provide two applet parts which are then blended by the "Lake applet" with the code below to produce the final image at bottom.

(original ...) "Levitating Stump" photo by Dave Joern

---

(Two applet parts...)

1.) A solid JPEG (image) 383 pixels X 275 pixels

2.) A transparent GIF (overlay) 383 pixels X 550 pixels

---

As you can see, I have made major digital enhancements to the "top" area in an attempt to bring that closer to 50 percent of the overall height of image, or tall enough to reach the bottom of image if flopped over and down (which is what the applet does).
I made it tougher on myself with having a "frame".

This example is also slightly larger than what would normally be recommended, as the processing power needed to render the effect can slow things down.

<applet code="Lake.class" width=383 height=550>
<param name="image" value="stumpimage.jpg">
<param name="overlay" value="stumpoverlay2.gif">
</applet>

I had the masking area open toward the very bottom, but the lake ripple was leaving an "unfinished" or blank area, so the masking area was expanded up a little bit from the "frame" bottom. That being an adjustment to the art or "overlay image", you can also adjust the applet height value and note the results.

Note! (If the resulting image with lake ripples tends to "stretch or drag" as you scroll, just minimize the window and then maximize it back. Obviously a redraw problem on somewhat slower machines or overworked browsers...)

Naturally there are many, many more sizing and placement adjustments that can be made with a result you can be happy with.

Have fun!

Other Resources:
VirtualPHOTO_One PICTURE - To be MOVIE?
Lake Applet at the JavaBoutique