Moving Lines and Polygons

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 Line and Polygon 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 INPUT_FILE 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 i and dx with their numeric value; in contrast, x and y have no numeric value and are therefore left as symbols. For instance, the expression

Line[{{i, y, f[i, y]}, {i + dx, y, f[i + dx, y]}}]

evaluates to the following primitive if i = 1 and dx = 0.2:

Line[{{1, y, 2 y Exp[-1-y²]}, {1.2, y, 2 y Exp[-1.44-y²]}}]

At runtime, LiveGraphics3D will replace any instances of the independent variables x and y with their current values; when the user moves the primitive Point[{x,y,z}], 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 webpage is straightforward. As mentioned above, we only need to change the INPUT_FILE parameter.

<html><body>
<applet archive="live.jar" code="Live.class" width="500" height="500">
  
  <param name="INPUT_FILE" value="meshSections.lg3d">

  <param name="INDEPENDENT_VARIABLES" value="{x -> 1, y -> 0}" >
  <param name="DEPENDENT_VARIABLES" value="{
			x -> If[x < -1, -1, x],
  			x -> If[x >  3,  3, x], 
			y -> If[y < -2, -2, y],
			y -> If[y >  1,  1, y],
			z -> 2y*Exp[-x^2-y^2]}" >
  
</applet>
</body></html>

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,f_x(x,y)) + t*(1,0,f_y(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 *)
a[x_, y_] = {1, 0, fx[x, y]};
b[x_, y_] = {0, 1, fy[x, 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*a[x, y] + t*b[x, y];

(* Now create the polygons; 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.

<html><body>
<applet archive="live.jar" code="Live.class" width="500" height="500">
  
  <param name="INPUT_FILE" value="meshPlane.lg3d">

  <param name="INDEPENDENT_VARIABLES" value="{x -> 1, y -> 0}" >
  <param name="DEPENDENT_VARIABLES" value="{
			x -> If[x < -1, -1, x],
  			x -> If[x >  3,  3, x], 
			y -> If[y < -2, -2, y],
			y -> If[y >  1,  1, y],
			z -> 2y*Exp[-x^2-y^2]}" >
  
</applet>
</body></html>

Resulting applet:

Next Page: Including Text

Moving Lines and Polygons

Table of Contents