Search
Loci: Developers
show printer friendly
send to a friend
Constructing Mathlets Quickly using LiveGraphics3D
Simulating Two Dimensions
Although LiveGraphics3D was designed to display three-dimensional graphics, you can use it to display two-dimensional images as well. In principle, all you have to do is specify your two-dimensional graphics as a special case of three-dimensional graphics by setting all z-coordinates to 0. However, there are some additional issues that require special attention.
As an example, we will create a two-dimensional analog of the example in the introduction. The following code will show the tangent line at a point on the graph of f(x)=x(x2-1). We'll use an independent variable as one of the point's coordinates so that you can move it along the graph.
(* Function Definition *) f[x_] = x(x^2 - 1); (* A pair of thick black lines for the axes *) axes = {Thickness[0.015], Line[{{-2, 0, 0}, {2, 0, 0}}], Line[{{0, -2, 0}, {0, 2, 0}}]}; (* Graph f(x) with blue line segments. Coordinates *) (* on the graph have the form {x, f[x], 0} *) curve = {RGBColor[0, 0, 1], Thickness[0.01], Line[ Table[{x, f[x], 0}, {x, -1.5, 1.5, 0.1}] ]}; (* Large red point at {a, f[a], 0} *) point = {RGBColor[1, 0, 0], PointSize[0.03], Point[{a, f[a], 0}]}; (* The linearization of f(x) at x=a is given by *) (* La(x) = f(a) + f'(a)(x-a); plot this on the *) (* interval [-2,2] with a thin gray line. *) La[x_]=(a^3-a) + (3a^2-1)(x-a); tanline = {RGBColor[.5, .5, .5], Thickness[0.005], Line[{ {-2, La[-2], 0}, {2, La[2], 0} }]}; example = Graphics3D[{curve, axes, point, tanline}]; WriteLive["tangentLine3D.lg3d", example];
In the HTML code, we restrict the independent variable a to stay on the graph.
<html><body>
<applet archive="live.jar" code="Live.class" width="400" height="400" >
<param name="INPUT_FILE" value="tangentLine3D.lg3d" />
<param name="INDEPENDENT_VARIABLES" value="{a -> 0.5}" />
<param name="DEPENDENT_VARIABLES"
value="{a -> If[ a < -1.5, -1.5, a],
a -> If[ a > 1.5, 1.5, a]}" />
</applet>
</body></html>
Resulting Applet:
Needless to say, this first attempt is not very effective. You can drag the point and watch the tangent line move, but the overall effect is not two-dimensional. We have to address several points.
First and foremost, because our two-dimensional graphics are in the xy-plane, the best point of view is on the z-axis. This is specified with the option ViewPoint -> {0, 0, 1000}. The length of this vector determines the distance of a virtual camera to the center of the bounding box specified by PlotRange. Specifying a large vector minimizes the effects of the perspective projection, resulting in a nearly orthogonal projection. (For a typical perspective projection the length should be between 3 and 4.) In order to ensure that the y-axis is pointing upwards we also specify ViewVertical -> {0, 1, 0}; the length of this vector is unimportant. With these settings, the x-axis has to point to the right since LiveGraphics3D uses a right-handed coordinate system (and we have specified a point of view on the positive z-axis).
Second, in a two-dimensional example we have no need for the three-dimensional bounding box. We can remove it with the option Boxed -> False.
Finally, the above applet lets you rotate the picture. For two-dimensional graphics, however, general three-dimensional rotations are pointless. We can disable them by setting the applet parameter MOUSE_DRAG_ACTION to NONE.
The next version of the mathlet includes all of these enhancements. We've also adjusted the PlotRange and tweaked the MAGNIFICATION level so that the image fills all of the available space.
With these enhancements, our example takes this form:
(* Preceding commands are unchanged *)
example = Graphics3D[
{curve, axes, point, tanline},
ViewPoint -> {0, 0, 1000},
ViewVertical -> {0, 1, 0},
PlotRange -> {{-1.5, 1.5}, {-1.5, 1.5}, {-1, 1}},
Boxed -> False];
WriteLive["tangentLine.lg3d", example];
<html><body>
<applet archive="live.jar" code="Live.class" width="400" height="400" />
<param name="INPUT_FILE" value="tangentLine.lg3d" />
<param name="MOUSE_DRAG_ACTION" value="NONE" >
<param name="MAGNIFICATION" value="1.25" />
<param name="INDEPENDENT_VARIABLES" value="{a -> 0.5}" />
<param name="DEPENDENT_VARIABLES"
value="{a -> If[ a < -1.5, -1.5, a],
a -> If[ a > 1.5, 1.5, a]}" />
</applet>
</body></html>
Resulting Applet:
This second version is much better than our initial attempt, but there are still more issues involved in using LiveGraphics3D for two-dimensional mathlets. In this particular case, for example, it doesn't much matter if the red point is drawn above or below the blue curve; in more complicated mathlets with many objects, it can be crucial to make sure one object isn't covered up by another. If you need to worry about issues like these, read the "Advanced Features" section of this article, including the page on Advanced Two-Dimensional Mathlets.