Constructing Mathlets Quickly using LiveGraphics3D - Introduction

Jonathan Rogness and Martin Kraus

Suppose you have 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 objects can make the program even more complex; for an overview of these issues, see "Writing Mathlets II" and "Writing Mathlets III" (Leathrum, 2002, 2005) 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 ex2y2

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. The process does not require any Java programming; the different behaviors are controlled by parameters in your web page. In this sense LiveGraphics3D has some of the properties of a "lite applet," as described in (Wattenberg, et al.).

Organization and Prerequisites

The rest of this article is organized into two sections. The first section starts with an overview of LiveGraphics3D's features and compares it to alternatives such as JavaView. We then give you a basic summary of how to create your own mathlets by constructing the example above, step by step. We also explain how to create animations and two-dimensional mathlets using LiveGraphics3D. Finally, this section includes a few advanced examples to demonstrate the power and versatility of the applet. The second section of the article is essentially an appendix with advanced information for more experienced users; topics range from including text in your mathlet to generating input for LiveGraphics3D using Java or other languages.

Throughout the article we will assume you are familiar with placing Java applets on web pages using the  and  HTML tags. If needed, you can find a description of this process in the Java Tutorial's "Using the APPLET tag" page ( We will also assume you are comfortable with very basic computer statements which are common to most popular programming languages, such as  or  , as well as the concept of a  -loop. The article includes all of the necessary HTML and computer code to create the first few examples; in the later examples 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.

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. You may need to install the Java plug-in for your browser.

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.