Constructing Mathlets Quickly using LiveGraphics3D

Jonathan Rogness is with the Mathematics Department and the IT Center for Educational Programs at the University of Minnesota, where LiveGraphics3D is used in a variety of courses.

Martin Kraus is with the Institute for Visualization and Interactive Systems at the University of Stuttgart. He is the author of LiveGraphics3D.

Suppose you've thought of a great idea for an interactive picture or animation which will help students learn a crucial concept in class. How can you take that vision and turn it into a reality? You no doubt have the analytic geometry skills to describe the objects which you want the computer to show, but writing a computer program to display this graphical output is not feasible without a fair amount of programming experience. This is particularly true in the case of three-dimensional graphics, where the desire to rotate an object can make the program even more complex; for an overview of these issues, see "Writing Mathlets II" (Leathrum, 2002) in this journal.

In this article we describe how to use a Java applet called LiveGraphics3D to speed up the process by removing the need to create a graphics engine in Java, Flash, or other programming languages. Instead, you can use a well-established language to describe the objects on the screen, and LiveGraphics3D handles all aspects of the display. Furthermore, you can define complex manipulations of these objects. This allows users to interact with your graphics in a structured and meaningful way.

As an example consider the following mathlet, which shows the graph of the function

`z = f(x,y) = 2 y e-x2-y2`

over the domain `[-1, 3] × [-2, 1]`. The green and blue curves represent the cross sections `x=a` and `y=b`. The red point has coordinates `(a,b,f(a,b))`, and we have also displayed a piece of the plane tangent to the surface at this point. This is a variant of a mathlet used at the University of Minnesota to show students the geometric interpretation of partial derivatives, but we are not including it here to advocate its use; rather, it is a relatively simple example which allows us to demonstrate most of LiveGraphics3D's features.

Try experimenting with the following controls in the mathlet; here "click" always refers to pressing the left mouse button.

• Click and drag the red point to move the point, cross sections, and tangent plane.
• Click and drag elsewhere in the image to rotate the picture.
• Release the button while dragging to make the picture spin; click on the picture again to stop the motion.
• Press the Shift key and click and drag vertically to zoom in and out of the picture.
• Press the Shift key and click and drag horizontally to rotate around an axis perpendicular to the screen.
• Press the Home key to restore the picture to its original settings.

Writing a program from scratch to display this image and implement the user interface would be time consuming, but with a little practice you can routinely construct similar mathlets in a matter of minutes using LiveGraphics3D.

Organization and Prerequisites

The rest of this article is organized as follows. First we present an overview of LiveGraphics3D's features and compare it to alternatives such as JavaView. Then we show you how to create your own mathlets by constructing the example above, step by step. In the remaining pages we will use several examples to demonstrate hints and advanced techniques which we have used in creating our own mathlets.

Throughout the article we will assume you are familiar with placing Java applets on web pages using the `<applet>` and `<param>` HTML tags. If needed, you can find a description of this process in the Java Tutorial's "Using the APPLET tag" page (Sun.com). We will also assume you are comfortable with very basic computer statements which are common to most popular programming languages, such as `xmax=2` or `dx=(xmax-xmin)/n`, as well as the concept of a `for`-loop. The article includes all of the necessary HTML and computer code to create the first few examples; later, when you have gained some expertise, we will leave some of the details to you.

The graphical input to LiveGraphics3D is described using Mathematica's syntax for graphics objects. It should be stressed that Mathematica is not needed to either create or view mathlets with LiveGraphics3D. The input can always be written by hand using a standard text editor, although using Mathematica can make the development process somewhat easier for large projects. The upshot of this is that you do not need a copy of Mathematica to read this article or use LiveGraphics3D in your courses, but you do need to know something about Mathematica's syntax. We have prepared a short overview of the necessary commands for people who are unfamiliar with the Mathematica language.

Click here to open the overview of Mathematica's syntax in a new window.

The choice of a computer algebra system (CAS) is a personal one and JOMA does not endorse any one particular system over another. However, the computer code in this article is presented in the Mathematica language. This seems to be the most natural choice because some knowledge of the syntax is already necessary to work with LiveGraphics3D. We will not use anything beyond the basic Mathematica functions and loops described in the overview mentioned above; the code also contains a number of comments enclosed by the symbols (* and *) for those of you who are unfamiliar with the language. Later on we will discuss ways to avoid the use of Mathematica entirely by generating the input for LiveGraphics3D using a different CAS or programming language.

LiveGraphics3D's license permits free use for non-commercial purposes, and it runs on any Java 1.1-enabled browser. Click the button at the right if you need to install a Java plug-in.

Bugs in specific versions of certain browsers can occasionally prevent LiveGraphics3D from initializing correctly. Often LiveGraphics3D can correct this problem on its own after a short delay; if not, reloading the page in your browser should fix everything.

Next Page: LiveGraphics3D Overview