Tutorial Project 6: A 3D Graphics Animation
This project is introduces the Graph3D Objects. In the project, we build a
one-page Document called "Revolutions". The finished version
of this Document (with an additional page) appears at the New Mathwright Library
and Cafe ( http://www.mathwright.com
) under the name "Revolutions
of Surfaces" and you may compare your
results with the first Interaction page of that.
In
Revolutions, you may define and graph a function, f(x) of a single
variable. You define the function, choose the domain and draw the space graph
using the Control Panel:
Next,
you may select a start angle (degrees) and an end angle through which to rotate
the graph. The surface that is "swept out" is drawn in yellow, and
the beginning graph is drawn in green, and the end graph is drawn in red.
Use the Control panel below for that.
3D Graphics is an enormous topic in Mathscript. We will not even pretend in
this Tutorial to cover all the bases. For a detailed description of the Graph3D
objects, we recommend that you peruse Welcome
to Mathscript 3D in the reference section. In this tutorial, we will explore
space graphs, space curves, and surfaces as we build a simple Microworld that
illustrates how graphs may be rotated to sweep out surfaces.
This
work will have two parts: Screen Design and Scripting. We focus
on all of the Screen Design in Part 1 of this Tutorial, and on the
Scripting in Part 2.
Part 1: Screen Design
Step 1: Document Directory
Before
you begin, be sure that the screen resolution is 800x600 or 1024x768. The
Documents that you create may be displayed on reader machines or browsers
in any resolution. You have no control over that. But if you create them in
800x600 or 1024x768 resolution, then they will display properly in 640x480,
800x600, or 1024x768 resolutions in the reader's machine or browser. This
is especially important because, in the browsers, you may shrink or enlarge
the page as you like to fit your web page. Along these lines, we remind you
that if you use wallpaper bitmaps (and hotspots) then you may use either bitmaps,
GIFs, or JPGs. And these should be 800x600, or 1024x768 pixels to match your
screen resolution.
You
set the screen resolution by right-clicking on the background screen to get
the menu, and then selecting Properties. Under Settings, choose 800x600 or
1024x768 screen resolution. The colors should be High Color (16 Million or
2^24 Colors).
We
begin by creating the "Document Directory". Every Document should be placed
in its own directory. The reason for this is that Documents often have auxiliary
files called resources, such as bitmap files and sound files. When a Document
is placed on the server, all of its resources need to be packaged together
so that MathwrightWeb knows where to find them.
When
the Document is viewed by a reader in Applet mode, MathwrightWeb brings these
resources to the user's web cache one at a time, as needed. Any particular
resource is downloaded only once. The next time it is needed (If the reader
returns to a page, say, or reopens the Document at a later time) the resource
is simply loaded from the cache. If, however, for some reason, the resource
is removed from the cache, then MathwrightWeb will go back to the server to
get another copy of the resource.
Therefore,
the first step in creating the revolutions Document is to create a
directory called revolutions that will hold it. We use lowercase for
all file names and directories because some servers (notably Apache servers)
are case sensitive, and may not find a file if the case is wrong. Of course,
this is not an issue for Mathwright32 Author or Reader when they read Documents
offline, but we follow the practice outlined above because most Documents
will be served from web servers.
Another
practice that we follow for reasons that will be clear when you read the final
Project on Packaging and Delivering your Document, is this: The name
of the directory should be the same (lowercase) name as the name of your Document
( .lva file). We will create Documents in the C:\My Documents folder,
because that is where Mathwright32 looks for them.
Thus,
go to the Windows Explorer, select the C:\My Documents directory, then
select File, New, Folder: and when asked for a name, type revolutions.
This will create a directory: C:\My Documents\revolutions\ into which
you will place the Document.
Step 2: Adding the "handcursor.cur" resource
If
you browse in Windows Explorer to the home directory: Program Files/Bluejay
Lispware/Mathwright32 Author you will find a little file called: handcursor.cur
Whenever you create a new Document, copy this file and paste it into your
new directory. While it is not needed for offline reading in Mathwright32,
it is a necessary resource for MathwrightWeb. Thus, highlight it, and select:
Edit, Copy. Then browse to your new directory, and select Edit, Paste.
Step 3: Creating the Document
Next,
let's open Mathwright32 Author to create the revolutions Document.
There are several ways to open Mathwright32 as we saw above. You may click
on the Mathwright Author 32 icon above in the MWAuthor32 button
on the Start Menu that was set up with the system, or you may go to
Windows Explorer and click on mwauthor.exe in the Program Files/Bluejay
Lispware/Mathwright32 Author subdirectory, or you may select Run...,
then enter C:/Program Files/Bluejay Lispware/Mathwright32 Author\mwauthor.exe.
Any
of these will open a blank copy of the program. Now, once the program is open,
select WorkBook, New Microworld from the menu. The screen will turn
white, and the page caption will change to: Untitled0: Page 1 of 1
This means that
you have created a new Document. It has the temporary name: Untitled0.lva.
Mathwright32
Author wakes up in Reader Mode. You may change to Design mode
if you like by selecting "Go to Design mode" in the WorkBook menu above.
The advantage of being in Design mode is that certain objects that you create,
such as push buttons and text fields, will be moveable and resizeable in this
mode, and will not be activated when the mouse clicks on them. In Design mode,
you may copy and paste objects or whole pages, may insert or delete pages,
and so on.
On
the other hand, Reader mode is where you give objects their specific properties,
create and run scripts, and save the Document to disk.
Step 4: Setting the Page color
Now,
let's set the page color for the Document. The "default" page color for a
book is white. Each new page that you place in a Document will have this default
color. When you set the page color for the Document, you change the default
background color to a new color. That changes the color of the current page,
and of each new page that will be added subsequently.
Select
Page, Page Background color... A dialog box will appear with a selection
of colors to choose from. Select the light grey in the sixth row, sixth column,
as marked below:
The screen should change to light grey. This light grey will be the default background color for all new pages. You may still change the background color for any particular page by selecting: Page, Page Background Color... on any page.
The
next step is to go to Design Mode and create an object so that we can
save this Microworld. There are 13 types of Objects (or Gadgets) that you
may create in Design Mode. These
are: Button Gadgets, CheckBox Gadgets, CommandField Objects, Data Table Objects,
Graph2D Gadgets, Graph3D Objects, HotSpot Gadgets, Label Objects, MathEdit
Objects, Horizontal Slider Gadgets, Vertical Slider Gadgets, TextBox Objects,
and TextField (or TextLine) Gadgets.
Mathwright always opens up in Reader mode. Next, select the Type of Object to create from the Objects menu. Select Label Object. We will create a simple Label.
- Place the cursor where you would like the upper-left corner of the rectangle to be.
- Press and hold the left mouse button down.
- Move the mouse to the lower-right corner of the rectangle, while holding the left mouse button down.
- Release the left mouse button when satisfied.
This
is done by the menu selection: WorkBook, Go to Reader mode. You should
see in the upper left corner something like the following (except that the
Title of the book is not changed yet in your version):
Next,
access the menu for the new Label by right-clicking on the blank white rectangle..
You will see one option available: Edit the Label. This option is only
available in Mathwright32 Author. In Mathwright32 Reader and MathwrightWeb,
Labels do not have menus. They really are a part of the background page. Select
that, and the other menu options become available, and you may enter text
in the Label now.
First, select Set Background Color... and choose the same light grey color you used for the page. The Label disappears! Actually, you see that there is a blinking caret where it was, so it is not really gone. It just blends with the background now.
Next, select Set Font... and change the Font to Arial, 24 pt, Bold. Then click on the label and type the text:
Surfaces of Revolution
You should see something like this (except that the Title of the book is still not changed yet in your version)::
If it did not fit, then just return to Design Mode and resize the Label, then return to Reader Mode.
Now, follow the instructions below to Save the Document.
Step 5: Saving Changes
As
you make changes, we recommend that you save those changes frequently. The
procedure for doing that follows.
Get into Reader mode, and Select WorkBook, Save As...
And type in the Dialog Box C:\My Documents\revolutions\revolutions or, select the C:\My Documents\revolutions directory, then type revolutions in the dialog box as below. Save the Document. It is saved as revolutions.lva.
As
you develop your book, frequently follow a procedure
similar to this one for saving the book for the first time. And every now
and then, back up your work by copying the directory to disk, or at least
to a different directory. Nothing is more frustrating than losing a day's
(or a week's) work in the ether after a system or program crash.
Simply
select WorkBook, Save, and the changes will be saved to the file: revolutions.lva,
which is the Document File that you would open in Mathwright32 Author or Reader.
It is good practice to do this from time to time, and of course, for projects
in which you have invested a fair amount of time, you should save a "backup"
copy of your .lva file to some other place, such as a floppy disk,
or another directory occasionally.
Next,
we will create a Graph3D object and place it directly below the label we just
made.
To create this, you must place Mathwright in Design mode. This is done by the menu selection: WorkBook, Go to Design mode.
Step 6: Creating a Graph3D Object
We
are nearly ready to draw a Graph3D object on the screen. This is where the
graphs will be drawn. The procedure that we will use applies to all Display
Objects and Gadgets. Read and follow the procedure outlined below to build
a Graph3D object with the name: graph. Use the illustrations below
as a guide, or see the picture of the completed Microworld at the beginning
of this Tutorial for an idea how to draw it. .
Before drawing the Graph3D Object:
After drawing the Graph3D Object (in Design Mode):
After drawing the Graph3D Object (in Reader Mode):
How to create Display Objects and Gadgets from the Object Menu
Next, select the Type of Object to create from the Objects menu. In this case, select a Graph3D Object.
Now,
once you have selected Graph3D object , the cursor will change to a "pointing
finger ". This indicates that you are expected to draw the outline of the
object on the screen. Do this in 4 steps:
- Place the cursor where you would like the upper-left corner of the rectangle to be.
- Press and hold the left mouse button down.
- Move the mouse to the lower-right corner of the rectangle, while holding the left mouse button down.
- Release the left mouse button when satisfied.
Naming Display Objects and Gadgets
Step 7: Add five more Labels
Function f(x) to graph:
Now, Save the Document.
Step 8: Add five TextField Gadgets
Choose: Arial, 12 pt, Bold. Next, seed the TextField with some arbitrary initial expression in x, such as:
(x+7)*(x-2)*(x-9)/100
Step 9: Add three Button Gadgets
Part 2: Scripting
How and where to create Scripts
- Compose the Script
- Compile the Script
- Attach the Script
readfloat; 'sets double reading mode'
precision 7; 'sets numeric precision to 7'
make variable x; 'declare 4 variables'
make variable y;
make variable a;
make variable b;
make f(x) x; 'declare 8 functions'
make g(x) x;
make h(x) x;
make k(x) x;
make f1(x) x;
make f2(x) x;
make k1(x) x;
make k2(x) x;
Step 10: Scripting the PushButtons
Select from it Actions, then Edit Script.
let pt be evaluate(textlist("revs")); 'check if TextField "revs" is empty'
if length(pt)==0 then { notice("Please enter a function.")} else {
make variable x; 'declare variables'
make variable y;
let h(x) be value evaluate(text("revs")); 'define the function h'
let f(x,y) be [x,h(x)*(1-y),0]; 'define parametric surface'
let k(x) be [x, h(x), 0]; 'define the space curve'
let domx1 be evaluate(text("domx11")); 'define the domain for f(x,y)'
let domx2 be evaluate(text("domx12"));
let domy1 be 0;
let domy2 be 1;
set the surfacerefinement to 30, 30; 'sets refinement of the surface'
set the surfacedomain to [domx1+0.01, domx2-0.01], [domy1, domy2];
set the curvedomain to domx1, domx2;
set the curverefinement to 200;
draw the surface f using color lred;
draw the tube k using color blue width 0.2;
}
set the surfacerefinement to 30, 30;
set the surfacedomain to [domx1+0.01, domx2-0.01], [domy1, domy2];
set the curvedomain to domx1, domx2;
set the curverefinement to 200;
Finally, the lines:
draw the surface f using color lred;
draw the tube k using color blue width 0.2;actually draw the parametric surface and space curve. We supply the colors here, and choose the width 0.2 as the radial width for the "tube" that represents the graph itself.
Each of these commands creates a named actor. "f" is the name of the parametric surface, and "k" is the name of the space curve. Later calls to this function will replace the present f and k by the new dfinitions, and will thus replace the object in the Graph3D with the new object.
Now type the following script in the window. Notice that each line ends with a semicolon.
let f(x,y) be [0,0,0];
let g(x,y) be [0,0,0];
let k(x) be [0,0,0];
let f1(x,y) be [0,0,0];
let f2(x,y) be [0,0,0];
let k1(x) be [0,0,0];
let k2(x) be [0,0,0];
set surfacerefinement to 5,5;
set curverefinement to 10;
surface f;
surface f1;
surface f2;
surface g;
tube k;
tube k1;
tube k2;
let pt be evaluate(textlist("revs"));
if length(pt)==0 then { notice("Please enter a function.")} else {make variable x;
make variable y;
let h(x) be value evaluate(text("revs"));
let f(x,y) be [0,0,0]; 'these red commands erase any previous graph'
let k(x) be [0,0,0];
let f1(x,y) be [0,0,0];
let f2(x,y) be [0,0,0];
set surfacerefinement to 5,5;
set curverefinement to 10;
surface f;
surface f1;
surface f2;
tube k;
let g(x,y) be [x,h(x)*cos(y),h(x)*sin(y)]; 'surface to sweep'
let domx1 be evaluate(text("domx11"));
let domx2 be evaluate(text("domx12"));
let domy1 be radian(evaluate(text("ang1")));
let domy2 be radian(evaluate(text("ang2")));
set the surfacerefinement to 40, 40;'this loop draws the surface in incremental increases of 0.1'
do
i=domy1+.01
until i > domy2 {
let domy be i;
set the surfacedomain to [domx1+0.01, domx2-0.01], [domy1, domy];
draw the surface g using color yellow; 'draws next surface''this step guarantees the surface is drawn immediately'
gldraw {
flush();
}
i := i+.1;
}
let f1(x,y) be [x,h(x)*y*cos(domy1),h(x)*y*sin(domy1)]; 'start surface'
set the surfacerefinement to 30, 30;
set the curverefinement to 200;
set the surfacedomain to [domx1+0.01, domx2-0.01], [0, 1];
set the curvedomain to domx1, domx2;
draw the surface f1 using color lgreen; 'draw the start surface'
let f2(x,y) be [x,h(x)*y*cos(domy2),h(x)*y*sin(domy2)]; 'end surface'
draw the surface f2 using color lred; 'draw the end surface'
let k1(x) be [x, h(x)*cos(domy1),h(x)*sin(domy1)]; 'start curve'
let k2(x) be [x, h(x)*cos(domy2),h(x)*sin(domy2)]; 'end curve'
draw the tube k1 using color green width 0.2; 'draw the start curve'
draw the tube k2 using color red width 0.2; 'draw the end curve'}
do
i=domy1+.01
until i > domy2 {
let domy be i;
set the surfacedomain to [domx1+0.01, domx2-0.01], [domy1, domy];
draw the surface g using color yellow; 'draws next surface''this step guarantees the surface is drawn immediately'
gldraw {
flush();
}
i := i+.1;
}
