You are here

Constructing Mathlets Quickly using LiveGraphics3D - LiveGraphics3D Input

Jonathan Rogness and Martin Kraus

We begin our tutorial with a basic example in which only one parameter,  , 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  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.

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 ex2y2

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,   is a variant of a  -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   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  in the current working directory.

example = Graphics3D[mesh, Boxed -> False];
WriteLiveForm["mesh.lg3d", example]

To show the mesh in LiveGraphics3D, we use the  parameter instead of  :

The use of  or  is largely a personal preference for small amounts of data. For a large scene, an advantage of the  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  parameter. For details, see the documentation at the LiveGraphics3D homepage.

Jonathan Rogness and Martin Kraus, "Constructing Mathlets Quickly using LiveGraphics3D - LiveGraphics3D Input," Convergence (May 2006)