Search
Loci: Developers
show printer friendly
send to a friend
Constructing Mathlets Quickly using LiveGraphics3D
LiveGraphics3D Input
We begin our tutorial with a basic example in which only one parameter, INPUT, is passed to the applet. The value of this parameter is a string which describes the graphics to be displayed; in this case we have a line, a large red point and a smaller blue point. (Recall that you can review Mathematica's syntax for describing graphics objects.)
To create this applet on your computer system, download the file live.jar from the "LiveGraphics3D Homepage" (Kraus) or from this article's list of accompanying files. In the same directory, create an HTML file with the following code. If you open the file in a web browser, you should see the same applet as the one displayed below.
<html><body>
<applet archive="live.jar" code="Live.class" width="300" height="300">
<param name="INPUT"
value="Graphics3D[{
Line[{{0,0,0},{2,0,0}}],
{RGBColor[1,0,0],PointSize[0.06],Point[{2,0,0}]},
{RGBColor[0,0,1],PointSize[0.03],Point[{1,0,0}]}
}, (* Done with list of primitives; now include options *)
PlotRange->{{-2,2}, {-2,2}, {-1,1}},
Axes -> True, AxesLabel -> {X, Y, Z}]" />
</applet>
</body></html>
Resulting Applet:
You should be able to rotate, spin, and change the zoom level in the image using the same controls as in the introduction. In this particular applet neither point can be dragged.
Equipped with the basic knowledge of how to embed LiveGraphics3D into a web page, we can start to construct the example from the introduction. First we'll create the wireframe mesh which represents a portion of the graph of
z = f(x, y) = 2 y e−x2−y2
over the rectangle −1 ≤ x ≤ 3, −2 ≤ y ≤ 1
We used a 20 by 20 grid, which can be constructed using the following Mathematica commands. (For those who are unfamiliar with Mathematica and have not yet read the syntax overview, Table[] is a variant of a for-loop. Again, this could be mimicked using loops with another computer language.)
f[x_,y_]= 2y*Exp[-x^2-y^2];
xmin = -1; xmax = 3;
ymin = -2; ymax = 1;
n = 20;
dx = (xmax-xmin)/n;
dy = (ymax-ymin)/n;
mesh = {GrayLevel[0.7], (* Make the line segments gray, not black *)
(* This pair of nested Tables creates the cross sections y=j *)
Table[ (* Let the y-values vary *)
Table[ (* y fixed, now let x-values vary *)
Line[{{i, j, f[i, j]}, {i + dx, j, f[i + dx, j]}}],
{i, xmin, xmax - dx/2, dx}],
{j, ymin, ymax, dy}],
(* This pair of nested Tables creates the cross sections x=i *)
Table[ (* Let the x-values vary *)
Table[ (* x fixed, now let the y-values vary *)
Line[{{i, j, f[i, j]}, {i, j + dy, f[i, j + dy]}}],
{j, ymin, ymax - dy/2, dy}],
{i, xmin, xmax, dx}]
};
The variable mesh now contains a long list of line segments which represent the wireframe mesh. Writing this list out would require about 50 kilobytes of text, which is more than we care to display in this article. Fortunately the input for LiveGraphics3D can be placed in a separate file. Within Mathematica, the easiest way to create the file is using the following function, which is included in the accompanying Mathematica notebook. To save space, it truncates decimal numbers before writing the object to the file mesh.lg3d in the current working directory.
example = Graphics3D[mesh, Boxed -> False]; WriteLiveForm["mesh.lg3d", example]
To show the mesh in LiveGraphics3D, we use the INPUT_FILE parameter instead of INPUT:
<html><body> <applet archive="live.jar" code="Live.class" width="300" height="300"> <param name="INPUT_FILE" value="mesh.lg3d"/> </applet> </body></html>Resulting Applet:
The use of INPUT or INPUT_FILE is largely a personal preference for small amounts of data. For a large scene, an advantage of the INPUT_FILE method is that the file can be stored into a ZIP archive; because the input consists of fairly repetitive text, the compression rate is typically very high, which results in much shorter download times for the input files. Another advantage is that certain characters can appear in an input file, but not in the value of the INPUT parameter. For details, see the documentation at the LiveGraphics3D homepage.