ModernJava
http://www.modernminds.com
R ippleApplet (Version 1.1)

RippleApplet is an applet and a canvas class that uses a mathematical distortion algorithm to create a water-like ripple or wave animation. The ripple animation frames are rendered using a user specified background image. Each frame of animation can optionally be overlaid with a static transparent GIF (GIF89a) foreground image.

The applet can be configured so that when the user clicks on the applet, a link to a specified URL is performed.

The following documentation describes how the RippleApplet class is used. You can also use the Ripple canvas class if you wish to integrate the animation in your own application or applet. The Ripple class is documented separately.
O peration

On initialization, RippleApplet loads the image to animate and the static overlay image (if specified). The applet then begins to render the animation while displaying a progress bar.

Precisely how the animation is rendered and the speed at which the animation is displayed is controlled by applet parameters, which are described in detail below.
S ample

No Java Support If your browser supports Java, you should see a demonstration of the RippleApplet to the left of this text.

For this example, a picture of water was used as the background image.
P arameters

Following are the HTML parameters for the applet. A parameter marked "Opt" is optional, and a parameter marked "Req" is required.

Req image The file name of the GIF or JPEG image that is to be animated.

The file path is based starting with the directory in which the Java applet is located.
Opt imageMask The file name of a transparent GIF (GIF89a format) image that will be drawn on top of each rendered frame. (The animated image is overlaid with the non-animated imageMask image.)

The file path is based starting with the directory in which the Java applet is located.
Opt initImage If set to "true", then the applet will draw the original image and then the imageMask overlay (if specified) before the frame rendering process begins. This prevents having a blank "hole" while the rendering process is executing.

If set to "false", then only a progress bar at the bottom of the applet will be displayed.

If this parameter is not specified, then the parameter value defaults to "false".
Opt frames The number of frames of animation to create.

The more frames of animation that are created, the smoother the animation will be, but the longer the initialization time will be.

The parameter value defaults to 20 if not specified.
Opt nWaves The number of vertical sine waveforms to use when creating "ripples."

The parameter value defaults to 1 sine wave if not specified.
Opt percent This parameter specifies the amplitude of each sine wave in percent of image height.

The parameter value defaults to 10 percent if not specified.
Opt offset The incremental number of degrees of offset that should be used for the sine waves when generating each frame of animation (must be between 0 and 360 degrees).

The parameter value defaults to 5 degrees if not specified.
Opt delay The number of milliseconds to delay between each frame of the "ripple" animation.

This parameter determines the speed of the animation.

The parameter value defaults to 70 if not specified.
Opt direction This parameter controls the direction of the ripple movement.

If set to "up", then the ripples will move from the bottom to the top of the applet. If set to "down", then the ripples will move from the top to the bottom of the applet.

If this parameter is not specified, then the parameter value defaults to "up".
Opt url This parameter specifies a URL to load when the mouse is clicked within the applet area.
Opt target This parameter specifies an optional target for the url parameter.
E xample

An example of a HTML APPLET tag with all parameters for this applet is shown below.

<APPLET CODE="RippleApplet.class" WIDTH="128" HEIGHT="128">
<PARAM NAME="image" VALUE="RippleBkgnd.JPG">
<PARAM NAME="imageMask" VALUE="RippleMask.GIF">
<PARAM NAME="initImage" VALUE="true">
<PARAM NAME="frames" VALUE="20">
<PARAM NAME="nWaves" VALUE="10">
<PARAM NAME="percent" VALUE="10">
<PARAM NAME="offset" VALUE="5">
<PARAM NAME="delay" VALUE="100">
<PARAM NAME="direction" VALUE="down">
</APPLET>
D ownload

The applet RippleApplet, along with a copy of this documentation, is available for download as a standard zip file, as a self-extracting file (for Windows95/NT users), or as a self-installing Java class file.
C opyright

This documentation and the object code for RippleApplet and Ripple may be copied and distributed freely for non-commercial purposes so long as neither the code nor the documentation is altered in any way. If the object code is distributed with any documentation whatsoever, then this unaltered document must accompany the code.


Copyright © 1997, 1998 by Modern Minds, Inc.