Adapting the Necker Cube Applet

This page gives instructions for embedding the Animated Necker Cube applet on your own web page and animating it with your own images. (Updated July 13, 2014.)

Note: On July 13, 2014 I recompiled Necker.jar using Java 7 (prior to that it was compiled with Java 8). If you downloaded an earlier copy, you should download it again. At this time, Oracle doesn't seem to be recommending Java 8, so most people are running Java 7 in their Browser.

To Make Me Happy:

Please include the following HTML code on your Animated Necker Cube page:

Applet Author: <a href="http://dogfeathers.com/mark/index.html">Mark Newbold</a>

On your page, this will appear as: Applet Author: Mark Newbold

Email me the URL of your page. I may want to set up a link to your page from my pages. Also I will notify you of any significant enhancements or fixes to the applet.

The Java Jar file:

Go to this directory: http://dogfeathers.com/java/necker/.
Save "necker.jar" into a directory on your web server. (Try right-clicking necker.jar.)

If you are updating from a previous installation, you can remove any Necker ".class" files from your web server. Those are contained in "necker.jar" now.

The HTML Code:

Model your HTML code after this:

<table border="6" width="400" align="left"><tr><td>
<applet archive="http://dogfeathers.com/java/necker/necker.jar"
            code="NeckerCube.class" width="400" height="400">
  <param name=BEAMOPT value="1">
  <param name=IMGH1 value="http://dogfeathers.com/java/necker/JACKFLY8.GIF">
  <param name=IMGV1 value="http://dogfeathers.com/java/necker/MARKDIV4.GIF">
  <img src="images/NECKER.GIF" width="400" height="400">
</applet>
</tr></table>
Any text you put here will be positioned to the right of the table.
<br clear=left>

The <table> HTML tag is unnecessary -- it simply provides a nice border around the applet.

The "archive" attribute specifies the location, on your web server, of the "necker.jar" file. This can be a full absolute URL beginning with "http://", or a relative URL -- relative to the location of your web page.

You can change the applet "width" and "height" attributes. This will change the size of the cube and beams but will not affect the sizes of the images. Making the applet too large will result in "jumpy" animation, particularly on less-powerful computers. If you are using the <table> tag, make sure its width attribute is the same as applet's width.

The applet parameters are all optional. Parameter names must be uppercase. Unrecognized parameter names are ignored.

The BEAMOPT parameter controls how the moving beams are displayed.
The following BEAMOPT values are allowed:

If the BEAMOPT parameter is missing, a value of "1" is used.

Horizontally-moving images are specified using parameters IMGH1, IMGH2, etc. There are no particular limit to how many images can be specified. Having too many images might overload a web browser that is viewing your page. The applet will keep checking for IMGH parameters sequentially until one is missing. The values must be full absolute URLs, beginning with "http://". The images files MUST be on the same web server as the java class files.

Vertically-moving images are specified using parameters IMGV1, IMGV2, etc.

No-Java Image

The <img src= .....> tag specifies an image to be shown (instead of the applet) by web browsers that don't support Java. The image should have the same width and height as the applet. The image URL can be relative or absolute. I made my image by hitting my "print key" to capture some screen shots of the applet. I cut and pasted parts of two screen shots (using Photoshop) to make the final image. The text "THIS IS A GIF, NOT A JAVA APPLET" will help avoid confusion among your non-Java viewers.

Preparing Your Images:

Vertically-moving images should be tall and thin. Horizontally-moving images should be long and narrow. The line-of-motion of the horizontal images is tilted downward 7.1 degrees so it may be desirable to rotate your images clockwise by this angle.

Your final images must be sized appropriately for the cube. This is a matter of trial and error. I recommend that you work at a high resolution, and save your work at high resolution. At the end, you can copy the image to a different filename and play with the size until you get something that looks right in the cube.

The images should be made into "transparent GIF's" so that the irrelevant parts of the rectangular image are transparent. This is the really time-consuming part of the process.

I find it easiest to convert my image into 256-color indexed-color (palletized) mode before working with it. Pick a color (usually white) to represent the transparent background areas of the image. Use a good graphics program such as Adobe Photoshop or CorelDraw to change all "transparent" areas of the image to that background color. You will become very proficient at selecting areas of the image.

Make sure that none of the foreground areas of the image have that background color (change them to some slightly different color). Also get rid of any extra-light pixels on the perimeter of the image, since these give the image a cut-out appearance (change them to the background color).

Finally, use a utility such as Photoshop or LVIEW to specify the background color in the GIF file.

"How-to" info about transparent GIF's can be found on the Web -- search for "transparent gif".

Java Console Output

You should activate your Java Console while debugging. It may give you some useful information about why a particular image is not showing. See my Java Notes.

Performance

If you want the smoothest possible animation, don't put any animated GIF's or other Java applets on the same page with the Necker cube.

Java Source Code

I am not making the source code available at this time.

-- THE END --


<Dogfeathers Home Page>   <Mark's Home Page>   <Mark's Java Stuff>   <Animated Necker Cube>
Email: Mark Newbold
This page URL: http://dogfeathers.com/java/neckerhow.html