Tutorial Project 2: Building a Document, Part 3

The third part of this project adds another page to the graph Document that elaborates the theme of the last, and introduces sprites. Now sprites are small movable objects that live in a Graph2D window and move under program control. We have two types of sprites available in Mathwright32: bitmap sprites and polygon sprites (or polysprites).

Bitmap sprites are (usually) small graphic objects that are based on a bitmap (.bmp file) on disk. They may be translated under program control. Polysprites are more versatile. They are not based on fixed images, but are defined as polygonal regions with border and fill colors, and can be subjected to any affine transformation (rotations, expansions, translations, etc. under script control). In this Document, we use a bitmap sprite that is provided on disk.

We will create a third page for the graph Document that does the following. When the reader graphs a function by pressing Enter, she may move the mouse over the window and a small pointing arrow will follow the x-coordinate of the cursor, moving along the graph. We shall examine two scripts in this example. The intention is not to develop in detail the MathScript syntax, so don't worry if that is not clear - just copy the scripts exactly as written. We will discuss syntax later. But we want to give some idea what scripting is like.

Step 1: Add a third page to the graph Document, and copy page 2 into it.

Open Mathwright Author by selecting Mathwright Author 32 in the MWAuthor32 menu or by one of the other methods discussed earlier. Then select WorkBook, Open Document… and when the dialog box appears, find the graph subdirectory of the Documents folder, and select graph.lva and press OK.

The two-page Document that you created in Part 2 should appear. Press the >>> button to go to Page 2. Now we will copy this entire page, then create a third blank page and paste this page onto it. To copy the page, go to Design mode and then follow this procedure: Select Page, Copy this Page on the menu.

Note: You now have a copy of this page in Mathwright32 memory. If you wanted to paste this page into a different Document, you could go to Reader mode select WorkBook, New Document... without closing Mathwright32, and open up the destination Document. You could then paste the page into the new Document. The same is true for copying and pasting an object.

Remaining in Design mode, select: Page, Insert new Page after this one... A sky blue blank page appears and the caption tells you that it is page 3of 3. Your Document now has 3pages. Now, remaining in Design mode, select: Page, Paste Page. Switch to Reader mode, and you see that page 3 is now identical to page 2.

This is a good time to Save the Document by selecting WorkBook, Save.

Now let's remove the >>> button on page 3. Go to page 3, switch to Design mode, and dismiss the >>> button by clicking the close button in the upper right corner.

While we are at it, we will change two of the settings of the graph2D gadget: graph. Switch to Reader mode for that. Pull up the menu for the graph2D gadget graph, and select: Settings, Coordinate System.

You will see a dialog box for choosing the type of coordinate system to display. The default was Cartesian Grid. Select Cartesian Axes, and click OK.

Next, we'll change the background color of the graph2D. Follow the same procedure. Pull up the menu for the graph2D gadget graph, and select: Settings, Background Color... This time you get a dialog that allows you to choose any of 16 million colors:

Click: Define Custom Colors, and type: 13, 202, 242 in the Red, Green, Blue fields. Then click OK.

Next, we will change the Pen Width from the default 1 to 2 for thicker graphs. Get the menu for the graph2D gadget graph again, and select: Settings, Pen Width. Type 2.

Finally, change the Pen Color to black. select: Settings, Pen Color, and in the color dialog, select Black.

Press Enter in the input field, and your page should resemble:

 

Step 2: Place a Sprite in the Graph2D window: graph

Graph2D windows may have sprites assigned to them. A sprite is a bitmap (.bmp file) that represents a small graphics object. You may create them in any paint program, or may import them from other files. The bitmap file should be saved in the directory of the Document, since it is a resource for the Document. Additionally, sprites have names which are MathScript strings, just like any other object. This is so that we may refer to it in scripts.

Each graph2D may have as many sprites as desired (within reason) and, while different ones may come from the same bitmap file, each sprite in a given window must have its own string name so that MathScript can distinguish them for that window. So different windows may have sprites with identical names.

We will copy a sprite that is in the graph Document (the finished version of this one) into the current directory. You may find it in Windows Explorer by browsing to Program Files\Bluejay Lispware\Mathwright32\microworlds\graph. The sprite we want is called arrow.bmp. To copy that file, go to Windows Explorer, and select arrow.bmp in the Program Files\Bluejay Lispware\Mathwright32\microworlds\graph directory. Next, select Edit, Copy on the Windows Explorer Menu. After that, find the directory where graph.lva resides, and select it. Then select Edit, Paste.

This places a copy of arrow.bmp in your directory. It is important, as we have stated already, to package all resources such as sprites in the Document directory. Now, get the menu of the Graph2D window again, and select: Utilities, Sprite...

You will see the initially empty dialog box below. Click Browse for Sprite File... and select arrow.bmp, which should now be in the graph directory. Type the name: ARR in the Name: box, and click Add the Sprite. The ARR sprite appears in the graph2D, and its name now appears in the list of current sprites, as below. Accept the default position, and click OK.

When you are finished, your page (avec le sprite) should resemble:

Step 3: Create a MathEdit Object to report the sprite location.

We need the MathEdit window that we'll call "location" for the output. Create one just below the Input TextLine. Go to Design mode, and select: Objects, MathEdit Object… and draw it, then name it: location. Return to Reader mode.

Step 4: Make some initializations in the WorkBook Script.

The next thing that we need to do is to modify the script of the graph2D gadget Script. Instead of clearing the screen, it is going to do two things. It will locate the cursor and move the sprite to the point on the graph with the same x coordinate, then print the sprite location in a TextBox that we'll create.

Before we do that though we are going to create a WorkBook Script that will do some initializations for us and define a program that we will need. For that, select the WorkBook, WorkBook Script menu, and open the (empty) script for the Document.

Enter the following script:

Let's step through the lines of the script. You may place comments in scripts, as we do below, between single quotes.

• precision 4; 'This sets the output to 4 significant places'
• readfloat; 'This tells the program to read numbers as decimals '
• make variable x; 'Sets x to as variable. It evaluates to itself'
• make f(x) x; 'Defines a global function f.'
• make fp(t) [t,f(t)]; 'This creates a global curve (vector-valued function of one variable) whose image is the graph of f'
• make arloc [0,f(0)]; 'Creates a global vector: arloc, which is the location of the arrow'

This script will be run once, when the book opens. Since the book is already open, we should execute it now so that we won't have to close and open the book. Thus click Execute. The script is run, the definitions are made, and you should see a graph appear in the Graph2D window. Now executing the script does not compile, attach, or save it. That must be done separately, since we might be executing it simply to test it. So now select Compile the Script, and Attach and Exit. The WorkBook Script is in place. This is a good time to Save the Document by selecting WorkBook, Save.

Step 5: Modify the script for the graph2D gadget, and set the graph2D for "Continuous Input".

Now we want to change the script of the Graph2D. Right-click the graph2D to get its menu, and select Actions, Edit Script.

Do that, and you will see the script:

clear;

Erase this script, and type the following script in the script window.

Let's step through this script. Notice that the global objects: f, fp, and arloc were created in the WorkBook script. So this script knows what they are.

• let pt be getpoint(); 'Gets the cursor coordinates and assigns them to the vector: pt.'
• let t be pt(1); 'Gets the x-coordinate of pt'
• let f(x) be value evaluate(text("Input")); 'Defines the function f from Input field. "Value" means that the definition of f is not the call to evaluate the text of "Input" but the return value, that is the text itself. There is a subtle but important difference. If it were the call to evaluate the text of the field, this field would be read each time the function f was called in the graph (250 times). Obviously, we only want to read and evaluate the text of the field once. The role of "evaluate" is to simplify any algebraic expression the user might have typed. Again, this is for efficiency in graphing.'
• let arloc be fp(t); 'Defines the point on the graph with that x-coordinate using the curve fp'
• clearmath in "location"; 'Clears the MathEdit window: location'
• output "Arrow at /v " arloc; 'Prints the new position in the MathEdit window. Since there is going to be a cascade of new values as the mouse moves, the MathEdit is cleared before each new value is printed.'
• movesprite "ARR" to arloc; 'Moves the sprite ARR to the new position'

Next, click Compile. And then Attach and Exit. The script is gone. Now when you click on the screen, nothing happens. In a little while, we will correct the label over the Input field.

Finally, since we want the sprite to follow the cursor as we drag it, we arrange for the script to be run continuously as the cursor is dragged (the mouse moved with the left button down). Select: Actions, Continuous Input... from the graph2D menu:

 

This is a good time to Save the Document by selecting WorkBook, Save.

Finally, we add two finishing touches. These will be left as an assignment for you. Change the instructions to read: Enter an expression in x Then press Enter. Move the mouse over the window to trace the graph.

And create a Clear Push Button. We still need a way to clear the window! You will recall that these things were done in parts 1 and 2 of this project. The Document is finished. Save it.

It should look like this:

End of Part 3 of Project 2