You are here

Constructing Mathlets Quickly using LiveGraphics3D - Moving Lines and Polygons

Jonathan Rogness and Martin Kraus

In this section we'll finish constructing the mathlet from the first page of the article. The only missing pieces are the colored cross sections and the tangent plane which follow the point as it moves around the surface. These are created using   and   primitives whose coordinates contain the variables x and y. Whenever the point is moved, the values of these variables are adjusted and the primitives are redrawn.

In terms of learning how to use LiveGraphics3D, there is very little new material in this section. The only changes in the HTML code are in the  parameter, and the rules for independent and dependent variables remain the same. The sole lesson here is how to create a list of graphics primitives whose coordinates depend on certain variables. For example, consider the following Mathematica code to construct the cross sections.

(* "mesh" and "point" are the same as in the previous example, *)
(* as are "f[x_,y_]," "xmin," "xmax," "dx" and so on.          *)

xSection = {RGBColor[0, 1, 0], Thickness[0.005],
    Table[Line[{{x, j, f[x, j]},
        {x, j + dy, f[x, j + dy]}}],
        {j, ymin, ymax - dy, dy}]};

ySection = {RGBColor[0, 0, 1], Thickness[0.005],
    Table[Line[{{i, y, f[i, y]},
        {i + dx, y, f[i + dx, y]}}],
        {i, xmin, xmax - dx, dx}]};
example = Graphics3D[{mesh, point, xSection, ySection}, Boxed -> False];
WriteLiveForm["meshSections.lg3d", example]

When reading the commands here, keep in mind that Mathematica will replace variables like   and   with their numeric value; in contrast,   and   have no numeric value and are therefore left as symbols. For instance, the expression


evaluates to the following primitive if   and  :


At runtime, LiveGraphics3D will replace any instances of the independent variables x and y with their current values; when the user moves the primitive  , the cross sections will automatically follow.

If you do not use Mathematica to generate the input for LiveGraphics3D, you will have to construct loops with output that mimics this behavior with numbers and symbols. (We'll discuss this later in the section on using LiveGraphics3D without Mathematica.) Whatever your method, once the input file is created, the inclusion of the applet into a web page is straightforward. As mentioned above, we only need to change the  parameter.

Resulting applet:

We are nearly finished constructing the mathlet; all that remains is to add the tangent plane. This requires a bit more analytic geometry than the previous steps, but nothing harder than a typical multivariable calculus homework problem. Specifically, we need to find a parametric equation for the plane tangent to the surface at the point (x, y, f(x, y)). As readers are well aware, one possibility is

p(s, t) = (x, y, f(x, y)) + s (1, 0, fx(x, y)) + t (0, 1, fy(x, y)).

Once we have determined the tangent plane, we can use polygons to graph a portion of it. Our commands to accomplish these steps appear below, with plenty of comments for people who are unfamiliar with Mathematica. Of course, there are many ways to find an equation for the tangent plane, and your approach may vary.

(* "mesh," "point," "xSection" and "ySection are *)
(* the same as in the previous example, as are   *)
(* "xmin," "xmax," "dx" and so on.               *)

(* Create the tangent plane at the point {x, y, f[x, y]}    *)
(* First use the partial derivatives to find two vectors    *)
(* a and b for the parametrization                          *)

fx[x_, y_] = D[f[x, y], x];  (* Differentiate with respect to x *)
fy[x_, y_] = D[f[x, y], y];  (* Differentiate with respect to y *)

(* Here is the parametric equation for the plane tangent  *)
(* to the surface at the point {x,y,f[x,y]}.  Recall that *)
(* the value of z=f[x,y] is automatically calculated by   *)
(* LiveGraphics3D.                                        *)
plane[s_, t_] = {x, y, z} + s*{1, 0, fx[x, y]} + t*{0, 1, fy[x, y]};

(* Let s and t range from -1/2 to 1/2 *)
smin = -1/2; smax = 1/2; tmin = -1/2; tmax = 1/2;

(* We'll use a 10x10 grid for the parametrized plane *)
n = 10; ds = (smax - smin)/n; dt = (tmax - tmin)/n;

(* Use a Table to generate the list of 100 polygons *)
tanplane = {RGBColor[0.8, 0.8, 0.8], (* Make the polygons Gray *)
    Table[Polygon[{plane[i, j], (* 4 vertices for each *)
         plane[i + ds, j],
        plane[i + ds, j + dt],
        plane[i, j + dt]}],
        {i, smin, smax - ds/2, ds},
        {j, tmin, tmax - dt/2, dt}]};

example = Graphics3D[
    {mesh, point, xSection, ySection, tanplane},
    Lighting->False, (* Use RGBColors for tanplane *)
    Boxed -> False];
WriteLiveForm["meshPlane.lg3d", example]

Our mathlet is now complete, and can be included on a web page using the following HTML code.

Resulting applet:

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