Building Your Own Photo Cube

ROVIN' AND RAVIN' WITH MIKE
Copyright © 2003 by Michael Segers, All rights reserved
Brought to you by Peanut.org

Building Your Own Photo Cube

Sorry to disappoint you, but this is not a carpentry project.... well, maybe a virtual carpentry project, something special to add as you hammer away at your website. (Of course, you have built your website, haven't you?) This rather spectacular web page effect is a good way to demonstrate how easy it is to create memorable pages for your own site.

First, directions to you as a spectator: After waiting for the images to load, you can use your mouse to nudge the cube as it rotates. You can change its speed and direction interactively. That's pretty good, isn't it? But, you can make the cube stop moving and select an image by left-clicking it. If you wonder where that image comes from (and all of these images illustrate R & R articles), double click it, and you will be taken to the article. To return to this page, use the return arrow in your browser window.

Now, you may be wondering how I did that, and I'll tell you: I don't have a clue. You no more have to understand how everything on a web page works to be able to make a appealing page than you have to understand how everything in your car's engine works to be able to drive. For example, check the date here. You can look at the source for these pages to see what's going on, but don't ask me to explain it. (Someone once asked me if I had ever forgotten to change the date on that page.)

Our photo cube up there is an example of something called a Java applet. If you really want to know more, check the always helpful Webopedia, "The #1 online encyclopedia dedicated to computer technology" for Java and applet. But, let me make a suggestion: don't bother. Just think of applets as great special effects that you can add to your web page--so special that you don't have to understand them. I don't, and I use them all the time, just cutting and pasting codes that have effects that I like.

All you need to do is find any of the many sites that provide libraries of these special effects. The cube comes from a particularly good site, JavaFile.com. Click on Image Effects, and then on 3D Cube Applet. You can download a ZIP file that contains a web page called cube3d.htm which is the same as the page you see at 3D Cube Applet. There is also a file called image3dcube.class. This is not a file that you open and view. It is the brains behind the cube. There is also an image, servercube.jpg, the image that you see on all six sides of the cube on their website.

So, now what? Well, for starters, click on View and then on Source in your browser. That shows you the code that makes this page and the cube look the way they do. In the source for this page, you'll see -

</applet>

Everything except the areas shaded in yellow or blue is exactly the way it is on the original page. The areas shaded in yellow are the names of the illustrations, which are all in the same directory with this article. Go ahead, click on http://www.peanut.org/mike/text to see this directory. The areas shaded in blue are the URLs for the six articles in which those images appear. Notice that they are also in the text directory, but I found by trial and error that I had to use the full address, while for the images, I could use just the title within the directory.

Why? Again, I don't know. I just know that this works.

Now, how do you make it "work" for you? Just copy and past the lines above in the body part of your web page. Fill in the names of your image files and the URLs for the links if you want to. (You can use the cube without links.) Then, save your page, and make sure that you have the image3dcube.class file (which you can download from 3D Cube Applet) in the same directory. You could download it from my text directory (remember, it has to be in the same directory as the page on which the cube appears), but don't do that. You really should see all the goodies waiting for you--for free--at JavaFile.com.

Then, stand back and watch your cube spin. The values shaded in gray can be changed to vary colors, speed, angles and other aspects of your cube. By the way, I put the cube on a white background, because it did not show up well on this patterned background. This line of code shows that the cube has a white (FFFFFF) background:

If you change FFFFFF to 000000 your cube will have a black background, to FF0000, it will have a red background, or to FFFF00, a yellow background. How do I know what these hexadecimal numbers are for the different colors? Simple: I've just checked the values for the colors on this page by looking at the source. For instance, the color of the letters in this text is represented by 800000... and the two links in this paragraph take you to definitions in Webopedia.

If anyone asks you how the cube works, just say, "Oh, it's kinda' complicated. I'll explain it to you some day when I have lots of time." Then, smile broadly, keep your feet dry and your heart full of noble (but slightly devious) thoughts, and don't be surprised if folks start asking you to help them design their web sites.

If you enjoyed this article, you can learn much more about -

Building Your Own Website

And you can view another photo cube.