GargoyleTutorial.tioga
Copyright Ó 1991 by Xerox Corporation. All rights reserved.
Last edited by Bier on December 4, 1986 4:27:18 pm PST
Pier, February 22, 1991 5:17 pm PST
The Gargoyle Tutorial
PCEDAR2.0 — FOR INTERNAL XEROX USE ONLY
The Gargoyle Tutorial - Revised for PCedar2.0 on SPARCstations
Eric Allan Bier and Ken Pier
© Copyright 1986, 1987, 1988, 1989, 1990, 1991 Xerox Corporation. All rights reserved.
Abstract: Gargoyle is an interactive 2D illustrator for creating color pictures. Gargoyle includes novel features to aid the user in precise geometric placement of objects in the scene. These features are called "snap-dragging" and "alignment objects." Refer to the Gargoyle manual (GargoyleDoc.tioga) for a complete description of the features and uses of Gargoyle.
Created by: Eric Bier and Ken Pier
Maintained by: GargoyleImplementors.PA
Keywords: graphics, illustrators, Interpress, interactive, tutorial, snap-dragging, alignment objects
XEROX  Xerox Corporation
   Palo Alto Research Center
   3333 Coyote Hill Road
   Palo Alto, California 94304

For Internal Xerox Use Only
Introduction
The Gargoyle Tutorial is a set of warm-up exercises for those interested in getting started with Gargoyle. See GargoyleDoc.tioga for a reference manual. The first part of the tutorial lists the sorts of button combinations that Gargoyle looks for. Descriptions in small print may be skipped on first reading. Armed with this, the reader can learn a good deal about Gargoyle just by pressing buttons and seeing what they do. The second part of the tutorial is a set of exercises intended to introduce the reader to enough operations that a simple picture can be produced.
You will want to have a running Gargoyle while you are reading this.
To run Gargoyle, simply type Gargoyle to a Cedar CommandTool, followed by carriage return:
% Gargoyle
A single, clean Gargoyle viewer should appear, iconic. It may be accompanied by a separate Gargoyle control panel. Open one or both icons by moving the cursor over the icons and clicking the middle mouse button.
Menus, Keyboard, and Mouse
Menus
[Artwork node; type 'Artwork on' to command tool]
The Gargoyle control panel looks something like the above. Many of the types of button used will be familiar to the Cedar user from other applications. However, it is worth noting some Gargoyle conventions.
[Regular Buttons] Simple buttons (Clear, Restore, Get, Store, Save) perform some action when the cursor is moved over them and any mouse button is pushed. Buttons with lines through them (guarded buttons) require confirmation and must be pressed twice in succession before the action occurs. Any mouse button may be used. Holding down Control or Shift^ are ignored.
[Pop-up Buttons] All of the buttons which are labeled in italic face (e.g. Caret, Transform, Stroke, Color ...) are Pop-up buttons. Hold down any mouse button over a Pop-up button to pop a menu of choices along with choice documentation and menu accelerators; accelerators are button/Control/Shift combinations which may be used instead of popping and selecting from a menu. Initially, menu accelerators are disabled and you must move the cursor over the pop-up button and then hold down a mouse button long enough to pop the menu. Try a few pop-up buttons. To leave the popped-up menu without performing an operation, simply drag the cursor outside of the menu before releasing the mouse button.
[Bordered Buttons] Bordered buttons come in two flavors:
Buttons that have a border, but don't have a colon (e.g. Gravity , Auto ), are toggle buttons. When they appear with white text on a black background, they are "on." With black text on a white background they are "off." Clicking them switches to the opposite mode. Try a few clicks on a few toggle buttons.
Buttons that have a border and a colon (e.g .ScreenStyle: , Slope: ) are labels. They usually affect the field to their right. ScreenStyle: and GravType: cycle through modes. Slope: , Angle: , Radius: , and LineDist: appear on the Value Line, the line immediately above the Feedback Line. Each of these value buttons moves the input focus to the immediately adjacent text viewer for typed input. Each of the corresponding ← buttons adds the currently selected Tioga value to the corresponding line of numbered buttons. Do not confuse bordered buttons with like named unbordered buttons on the alignment menus, described next.
[Alignment Menus] The four lines which begin with Slope:, Angle:, Radius:, and LineDist: (unbordered) are alignment menu lines. Each alignment menu consists of four text buttons followed by a variable number of numeric buttons. Clicking on a number (with any mouse button) turns it on, and it appears in bold face. Clicking a second time turns it off, returning it to a plain face. The Slope:, Angle:, Radius:, and LineDist: buttons turn off all of the numbered buttons on their respective lines. Each line has Get!, Add!, and Delete! buttons as well.
[Buttons with !] Buttons with exclamation points (Revive!) act immediately. Other actions are queued and are handled first-come first-served.
The bottommost line is called the Feedback Line, within which Gargoyle posts feedback and error messages to the user.
Keyboard and Mouse
When the cursor is in the lower part of the Gargoyle window, called the action area, then keyboard and mouse actions will invoke commands which modify the current picture. For a hint of what the various combinations do, find the Help pop-up button on the Gargoyle control panel. Move the cursor over the Help pop-up button, hold down any mouse button and wait for the menu to pop up. Invoke command "MouseActions" by continuing to hold the mouse button down and moving the cursor over the word MouseActions Release the mouse button. A Tioga viewer will appear at the top right column with a table of mouse/keyboard combinations and corresponding user actions. Gargoyle notices the following types of keyboard and mouse combinations:
[Plain Mouse Button] Clicking any of the three mouse buttons, while leaving all other mouse and keyboard buttons up. This type of action is used to select existing scene objects. As a side effect it often moves the caret (as Tioga selection does).
[Mouse Button With Shift] Press and hold either Shift^ key. Now Press and hold one of the mouse buttons. Move the mouse. Release the mouse button. Release the Shift^ key. This type of action is used to place the caret, add new line segments, and add Bezier splines. It is a rather complicated sequence of actions. However, pressing the buttons in some other order is never harmful, and occasionally useful (see Abort, and Repeated Actions below).
[Mouse Button With Control] Similar to the sequence with the Shift^ key. Press and hold the Control key. Control mouse actions are used to drag, rotate, and scale selected objects.
[Mouse Button With Control and Shift^] Press down Control and then Shift^ or Shift^ and then Control. Now Press and hold one of the mouse buttons. Move the mouse. When done, release the mouse button and then the Control and Shift^ keys (in either order). When the last button comes up, the operation is done. The Control-Shift^ combination is usually used to deselect objects.
[Mouse Button With META] Press and hold the SWAT key (on a SPARCstation, the SWAT key is key R15 in the right hand keypad) with your non-mousing hand. Now Press and hold the left mouse button. Move the mouse. Release the mouse button. Release the SWAT key. This type of action is used to perform selection operations on heterogeneous objects in the scene.
[Double Clicks] Clicking a button down, up, down in rapid succession can often be substituted for pushing it down once, but a different function will be invoked.
[Abort] During [Mouse Button With Shift^ and/or Control] actions, while the Shift^ and/or Control keys are still down, the action can be aborted by releasing the mouse button, and hitting the Delete key. The Shift^ and/or Control key must then be released before further actions can be performed.
[Repeat Shift^] If several [Mouse Button With Shift] operations are to be done in a row, the Shift^ key can be left down in between them. Occasionally, this even runs faster.
[Repeat Control] [Mouse Button With Control] and [Mouse Button With Control and Shift^] can be done repeatedly in a similar fashion.
[Repeat META] [Mouse Button With SWAT] can be done repeatedly in a similar fashion.
Keyboard Alone
[Plain Text] If the input focus is in the action area, then simply typing characters will enter text into the picture at the caret position. WARNING: Strings are allowed to begin with whitespace. It is EASY to get unintended strings consisting of one or more SPACE characters. The only way to see such strings is to select them. The Select menu operation UnSeeableObj will select blank strings so that you may delete them.
[Control Text] Holding down the control key and then hitting some other key on the keyboard (e.g. the letter A or the SPACEBAR) will often invoke a function; this way of invoking a function is called a keyboard accelerator for the function. Most of these functions are also available from Menus. Press the Help button, invoke Mouse Actions and open the resulting window full column to find out what these functions are.
[Look Text] Holding down the LOOK key (on a SPARCstation, the LOOK key is key R9 in the right hand keypad) with other keys can change the appearance of objects. Use the Help button in the control panel and open the resulting window full column to find out what LOOK functions are.
Undo
Gargoyle has a history/undo facility. To use one-level undo, hold down Shift^ while striking Esc. You will return to the scene as it was before the last scene modification operation. Undo of undo works; a second Shift^-Esc will take you back to the original scene. Only operations that actually affect scene objects are noticed by the history/undo mechanism. Other operations like setting/reading control panel values or changing the viewport are not undoable.
Summary
Well, that was long and boring, but the reader should now understand what sorts of operations Gargoyle does and does not listen for. Combinations of Control, Shift^, and mouse buttons clicked once or twice in succession are interesting. Holding down the letter A and clicking the mouse is not. Triple clicking is not. The Tab key is not. META (i.e. SWAT) with some mouse buttons is. Control and the SPACEBAR together are.
The Exercises
Let's take Gargoyle out for a spin. First lesson:
1. Adding a Line
a. How to place the caret. Hold down Shift^. Press and hold down the left mouse button. Move the mouse. Notice that an upside-down "V" shape, the caret, follows the cursor. Release the mouse button. Release the Shift^ key. This is the standard [A Mouse Button With Shift^] combination described above. As in GargoyleDoc.tioga, we will abbreviate this as ShiftLeftMouse. You have placed the caret in the action area.
b. How to add a line. Try ShiftMiddleMouse. As you are holding the mouse button down, a straight line segment "rubberbands" as the mouse moves. When the command is finished a new line segment has been added. Notice that a small black square appears at one end of the new segment. This end of the segment is selected. Step g. will explain how to drag selected objects. Notice that a small white square with a dot in it appears at the other end of the new segment. This marks an unselected joint of the new segment.
Try steps a. and b. a few more times. Perhaps you will get a picture which looks something like this:
[Artwork node; type 'Artwork on' to command tool]
Perhaps you noticed that the caret has a tendency to stick to the existing lines whenever you are placing or adding, and the caret has a special tendency to stick to the endpoints of the lines. This tendency is due to gravity. The lines and endpoints generate a "field" like gravity, and the moving caret is sensitive to gravity and thus attracted to the lines and endpoints. Try adding some new lines that end on the existing ones. Here's a version:
[Artwork node; type 'Artwork on' to command tool]
Now, if you like, get rid of the picture you have made by clicking twice over the Clear button.
c. Gravity. If you don't want the caret to snap to existing line segments, you can turn gravity off by clicking on the Gravity button. Remember that white text on black means "on", and black text on white means "off". You will find yourself turning gravity off when you want to draw short line segments; with gravity on, they collapse into points. Alternatively, you can reduce the gravity field, called its extent, by clicking in the box to the right of "GravExtent:". Clicking with the left mouse button makes gravity weaker, the right mouse button makes gravity stronger, and middle mouse button sets it to a default value (about 1/3 inch).
d. Trajectories. After performing step (a), ShiftLeftMouse, try step (b), ShiftMiddleMouse, several times in succession, moving the mouse some after each click. You will be drawing several line segments, each one beginning where the last one ended. Such a sequence of segments is called a trajectory in Gargoyle and in Interpress. Whenever you want to lift your "pencil" and start a new trajectory, use a ShiftLeftMouse to place the first point, and then ShiftMiddleMouse for the rest. Try it. This picture is all one trajectory. It was drawn with gravity off to allow short line segments:
[Artwork node; type 'Artwork on' to command tool]
e. Aborting an Addition. When you are in the middle of rubberbanding a new line segment, you can abort the addition of that segment to the scene, taking you back to the way things were before you began the addition. Without releasing the Shift^ key, release the middle mouse button and hit the Delete key. Now release the Shift^ key. The new line segment will disappear and all will be as before.
f. Continued Adding. One way to speed up picture drawing is to leave the Shift^ key depressed, instead of releasing it after each addition. You have probably done this already as a force of habit. Gargoyle notices that you are continuing your addition and tries to speed up redrawing the screen to make this go faster. Note that something funny is going on. You can Abort an operation anytime until you release the Shift^ key, but you aren't releasing it. Instead, Gargoyle decides that one line segment must be OK as soon as you start adding another one. Hence, hitting Delete will Abort the addition of the most recent segment. Once you have aborted, you must release the Shift^ key and press it again before you can add more line segments.
g. Repositioning. If you wish to reshape a trajectory after you have drawn it, you can reposition its segment endpoints, called joints, as follows: Without holding down the Shift^ or Control keys, LeftMouse over the joint you wish to move. A black square will appear to show that it is selected, and the caret will jump to that joint. Now try CtrlLeftMouse. The caret and joint will move together, following the cursor. When you stop moving, the joint will stay in its new place. If, while you are dragging the joint around, you decide that moving it was a mistake, you can take your hand from the mouse and hit Delete to abort, just as with adding.
h. Repositioning Everything. In step (g), you select a joint and drag it. In future lessons, you will find out how to select and drag a larger variety of objects. For now, try this. Hold down the Control key and hit the letter D. All the objects in your picture should sprout little black squares to show that they are selected. Now use ShiftLeftMouse to place the caret. Finally, use CtrlLeftMouse to make the caret track the cursor; while holding CtrlLeftMouse down, move the cursor around, moving all of the objects in the scene with it.
i. Extending Existing Trajectories. To add a segment to an existing trajectory, select the joint at the end of the trajectory that you wish to add to. The caret will jump to this joint. Now ShiftMiddleMouse as usual to add new segments to the existing trajectory. Note the difference between this and putting the caret on the end of the trajectory with ShiftLeftMouse, which allows you to begin a new trajectory that just happens to touch the old one.
j. Getting Help. Put the cursor on the Help button then hold any mouse button down, then select the Mouse Actions menu item and release the mouse button. A text viewer will appear in the right column, open to show a table of all of the mouse actions that Gargoyle understands. If you scroll this viewer, you will also get a table of the Control-Letter commands that Gargoyle understands, and finally a table of the LOOK-Letter commands that Gargoyle understands. Refer back to this viewer if you forget what does what.
You now have enough tools to make some interesting line drawings. Experiment. Here are some ideas:
A spider web.
A barren tree.
A scaly fish.
A dinosaur.
All of these suggestions are for shapes that can be drawn without drafting tools. They don't require that any lines be perfectly vertical or that any angles be exactly 60 degrees. The next exercises will involve more precise shapes.
2. Making a Starburst.
[Artwork node; type 'Artwork on' to command tool]
In this exercise, we learn how to use Gargoyle's equivalent of ruler and compass, to make a set of line segments which radiate from a common center. On the way, we learn how to drop and lift the Anchor. Hit the Clear menu button twice so we can start fresh.
a. Dropping the Anchor. Position the caret in the middle of the workspace (review lesson 1 if you don't remember how to do this). Find the HotSpots pop-up button on the control panel. Pop the menu and invoke the DropAnchor command. (Notice that (^a) appears on the DropAnchor line. This tells you that holding down Control and the letter A is another way to drop the Anchor; that is, Control-A is the keyboard accelerator for the DropAnchor menu command.) A small icon will appear at the caret position. We will use the Anchor in many ways. It will act as a center for rotation and scaling. Here we will use it to place helpful lines and circles, called alignment objects, which Gargoyle will generate at our request.
b. Activating Alignment Slope Lines. Find the control panel line that looks like this:
[Artwork node; type 'ArtworkInterpress on' to command tool]
Click on the number 60. It will change to bold face, and a line at 60 degrees to horizontal will appear going through the Anchor. The 60 degree slope line has been activated. Click on 60 again. It will change to plain face and the slope line will disappear. Now the 60 degree slope line has been deactivated. Try some other numbers. Try several at the same time.
c. Alignment Lines and Gravity. Make sure that Gravity and Alignments are turned on (make their respective buttons White on Black) and that the GravExtent is reasonably large (MiddleMouse over the little box next to the GravExtent: label will do). Turn off the button labelled Auto (we'll explain this below). Activate 0 degree slope lines. Now move the caret around the picture for a while (ShiftLeftMouse). Notice that the caret snaps to the slope line. Snap the caret to the slope line. Now add a segment and snap its other end to the same line. You should be able to make an unevenly dotted line:
[Artwork node; type 'Artwork on' to command tool]
Deactivate 0 degree slope lines to see your dotted line more clearly.
d. Activating Alignment Circles. Clear the viewer. Drop the anchor in the middle again. Now find the control panel line that looks something like this:
[Artwork node; type 'ArtworkInterpress on' to command tool]
Click on the number 1/2. It will change to bold face, and a circle of radius 1/2 inches will appear centered on the Anchor. Try turning it on and off. Try circles of different radii. Use several at once. Then go back to just 1/2 inch circles. Also, activate 0 degree (horizontal) slope lines, as in part c., above. You should see one circle and one line, both centered on the Anchor.
e. Alignment Circles and Gravity. Move the caret around the picture. Notice that the caret snaps to both the alignment circle and to the alignment line. Note also that the caret has a particular affinity for the points where the line intersects the circle. You should now know enough to draw a starburst with 1/2 inch circle of whitespace in the middle of it. (Hint: I used 0, 30, 60, 120, and 150 degree slope lines. To momentarily make all the alignment objects disappear from the scene, click on the Alignments button on the control panel. Click again to make them come back.)
f. Lifting the Anchor. Invoke the LiftAnchor command in the HotSpots menu (or type Control-Shift^-A). The anchor will disappear.
3. The Star of David
In this exercise, we learn how to close trajectories, how to fill them, how to select pieces, change line width, and change fill color. In the process, we learn one way to make equilateral triangles. If you would like to see the actions in this exercise as I performed them (albeit sped up a bit), you can "Tioga select" the name /CedarCommon/Gargoyle/StarOfDavid.script and use the Script pop-up button on the control panel to invoke the PlaybackScript function. Grow the Gargoyle viewer to the full column height before starting the playback. Wait until the script completes before you try to do anything else.
a. Setting Up. Clear the viewer. As in the last exercise, place the Anchor in the middle of the viewer. Activate 1 inch circles, and 30, 90, and 150 degree slope alignment lines. Make sure Gravity is on, Alignments are on, and Auto is off. Add the first two sides of an equilateral triangle, by placing the endpoints at the intersections of slope lines with the alignment circle (Hint: use ShiftLeftMouse, the "caret positioning" operation, to snap the caret to the first intersection point, then rubberband a new line segment to the second intersection point).
b. Closing a Trajectory. On the keyboard, hit Return. A straight line segment will be added to finish the triangle. The triangle is shaded gray, and it is selected. Here is one version of the triangle:
[Artwork node; type 'Artwork on' to command tool]
c. Again. Draw another triangle 180 degrees rotated from this one, by using the unused three intersection points. Notice that this new triangle partly obscures the earlier one.
d. Lifting the Anchor. Pop the HotSpots menu, then invoke the Lift Anchor entry (or type Control-Shift^-A). The Anchor will disappear, and so will all of the alignment lines that it was triggering.
e. Selecting Trajectories. Point the mouse at part of the trajectory that is underneath (the first one you drew). Click the middle mouse button twice in rapid succession. The whole triangle should highlight its joints. Now, try selecting the second trajectory. Select the first one again.
f. Changing the fill color. Find the Fill pop-up button. Invoke "none" in the menu by dragging the mouse over the word "none" and releasing the mouse button. This will make the selected triangle transparent. Now, select the other triangle and make it transparent as well.
g. Selecting Segments. Hold down the middle mouse button, and move the mouse around the picture. Pairs of joints will "light up" with black squares to show you what you are close to. When you release the button, one segment will be selected. It will display itself as selected by drawing itself with its end joints selected.
h. Changing the stroke width. You can change the thickness of a line segment. Select a segbment. Find the Stroke pop-up button and invoke its LOOK 1 entry. The number (1, in this case) will be the width of the selected segment in screen dots (1/72.0 of an inch).
i. Select Everything (using Control-D). Make all selected objects have stroke width 3 by holding down the LOOK (R9) key and typing the 3 key on the keyboard. Deselect everything afterwards by performing a select joint operation (LeftMouse) far from all objects.
j. Saving Your Picture in a File. In any text area (e.g. a CommandTool), type a file name. If you do not provide an extension, ".gargoyle" will be added for you. If you do not supply a full pathname, the working directory in which Gargoyle was invoked will be used. Select the file name. Click the control panel Store button twice. The files produced are human readable. You might want to open the file you have made and see what it looks like.
k. Reload. Click Clear twice to empty the viewer. Again select the filename from any text area. Click Get twice. Your picture should reappear.
4. Making Things Hot
In this exercise, we learn that the Anchor is not the only object which triggers alignment objects. Joints and segments can trigger as well, if we make them hot. We discover a second way to make equilateral triangles and contruct several of them.
For a preview of this exercise, Playback /CedarCommon/Gargoyle/MakingHot.script .
a. Setting Up. Clear the viewer. Drop the Anchor. Activate 0 degree slope lines. Construct a short horizontal line segment. Lift the Anchor. Activate 60 and 120 degree slope lines.
b. Make a Joint Hot. Select one of the joints of the horizontal line segment. In the HotSpots menu, invoke the MakeHot command (or type Control-S). 0, 60, and 120 degree slope alignment lines should appear passing through the hot joint. A large square appears around the joint to show that it is hot. Make the other joint hot. More lines appear.
c. Make a triangle. Use the alignment lines to add the second side of an equilateral triangle. Use the Close command (type Return) to add the last edge. Notice that all three joints are hot. Gargoyle extends hotness to objects that are added next to an existing hot joint, just as Tioga extends character looks.
[Artwork node; type 'Artwork on' to command tool]
The first two sides of the equilateral triangle are added using alignment lines.
d. Making Things Cold. Select one of the joints. From the HotSpots menu, invoke the MakeCold command (or type Control-Shift^-S). The alignment lines radiating from this joint should disappear. Now select the Make All Cold from HotSpots menu. All the alignment lines should disappear, and no joints should have large empty squares around them. Deactivate 0, 60, and 120 degree lines (you can do this quickly by clicking on the word Slope: at the beginning of the line).
e. Angles and Line Distances. As we know, joints can trigger two kinds of alignment objects—lines of known slope and circles of known radius. Segments also can trigger two different sorts of alignment lines—lines of known distance and lines of known angle. Look for the Gargoyle control panel line that looks something like:
[Artwork node; type 'Artwork on' to command tool]
Activate the 1/2 entry. Select the base segment of the triangle. Invoke Make Hot. Two lines appear, 1/2 inch above and 1/2 inch below the hot segment. Select the entire triangle. Invoke Make Hot. Four more lines appear, 1/2 each on either side of the remaining two segments.
f. Offset Shapes. It should now be easy to construct a bigger triangle, offset from the original by 1/2 inch. Add the first two edges and close it.
g. Changing Overlap Order. The new triangle completely obscures the old one. Let's move it below the other one. Select the big triangle, if it isn't already selected. Find the Overlap button and invoke the Back command. The big triangle should now be below the little triangle. Make All Cold.
The rest of the material in this exercise is advanced. First timers may wish to skip to the next exercise.
h. Making holes. Select the small triangle by performing DoubleLeftMouse with the cursor near it. Extend the selection to the large triangle by performing RightMouse near it. Notice that both shapes are now selected. The order of selection is important. Find the Edit button and invoke MakeHoles. You now have an outline made of two trajectories, one of which is a fence, and the other of which is a hole. The last selected outline is the fence.
i. Copying. Select the whole outline by DoubleLeftMouse near either of its trajectories. Now try CtrlDoubleLeftMouse. After, the first down, up, down and hold of the left mouse button, a copy of the outline should be tracking the cursor. Place it offset from the first outline to get a picture like this (shown smaller than actual size); you may have to temporarily turn gravity off to prevent the copy from snapping to the original edges:
[Artwork node; type 'Artwork on' to command tool]
5. 'G' is for Gargoyle
In this exercise, we learn that some objects can be made hot automatically by activating Garoyle's alignment object heuristics. We use these heuristics to make an italic block letter G.
For a preview of this exercise, Playback /CedarCommon/Gargoyle/TheG.script . The script stops after step g, to give you a chance to play with the picture, if you like.
a. Setting Up. Clear the viewer. Make sure that Gravity is on, the GravExtent is normal, Alignments are on, and turn on heuristics by turning on the Auto button. Activate 0, and 60 degree slope alignment lines.
b. Drawing with Heuristics. Place the caret near the lower left hand corner of the viewer. Hold down the Shift^ key, and repeatedly add new segments using the middle button. Notice that slope lines are appearing even though you haven't made anything hot.
Here is what is going on. Gargoyle has a heuristic that if you are adding segments to a trajectory, you will often want to align the new segment to the existing segments. Hence, all of the stationary joints and segments of that trajectory (but no other trajectory) are hot for the duration of the add operation (i.e. until the Shift^ key and the mouse button are released).
Try to make a block letter G:
[Artwork node; type 'Artwork on' to command tool]
You'll want to draw it larger than this one. Don't worry if it isn't perfect. We're going to touch it up.
c. Dragging with Heuristics. Perhaps we want to move segment 4 to the left at this point. Of course, we still want segment 5 to be horizontal. Select segment 4. Notice that the caret jumps to the nearest joint of the selected segment. If the caret did not jump to the topmost joint of segment 4, select segment 4 again, pointing closer to the top. Now, do a CtrlLeftMouse. Notice that while the mouse button is down, alignment lines appear to help us keep things lined up.
What is going on: Gargoyle has a heuristic that if you are dragging segments within a trajectory, you will often want to align the moving segments with the existing segments. Hence, all of the stationary joints and segments of that trajectory (but no other trajectory) are hot for the duration of the drag operation (i.e. until the Control key and the mouse button are released).
d. Selecting multiple segments. Select segment 1. Now, using RightMouse, click near segment 3. One of two things will happen. Either segments 1, 2, and 3 will be selected, or segments 1, 3 and everything except 2 will be selected. In the latter case, select segment 3 and extend the selection (with RightMouse) to segment 1. Now, segments 1, 2, and 3 should be selected. Look where the caret is. If the caret is not at the left end of segment 1, then use ShiftLeftMouse to put it there. Notice that the selection does not change. If it did, you probably did a plain LeftMouse instead of a ShiftLeftMouse. Reselect the desired three segments and try again. ShiftLeftMouse is another way to get the caret where you want it, before performing a drag operation.
e. More Dragging with Heuristics. Now use CtrlLeftMouse to move the whole upper part of the G up and down. Notice that you have the freedom to move it anywhere you want, but the alignment lines make it easy to keep the left edge of the G at 60 degrees if that is desired.
f. Copying Trajectories. Let's give the G a drop-shadow. Select the whole G (recall DoubleLeftMouse). Look where the caret is. When we copy the G, that point of the copy will jump to the cursor. Now, CtrlDoubleLeftMouse. Drag the new G a little up and to the left of the old G. At this point, you may wish that gravity were turned off, since the new G has an annoying tendency to snap to the old G. You can toggle gravity on the fly, by hitting the space bar (this doesn't try to enter a text string because you are holding down the Control key). Notice that the Gravity button in the control panel toggles. Put the G where you like it and release the mouse button and Control key.
g. Fill Colors again. Select the bottommost trajectory. Use the Fill pop-up, and invoke "black." Save this picture with the Store command—we will use it in a later exercise. Don't forget to Tioga select a file name. Your picture should look like this:
[Artwork node; type 'Artwork on' to command tool]
h. Deleting Things. In Gargoyle, you can delete anything you can select. Gargoyle will try hard to delete what is selected, and nothing else. Select the bottommost segment of the black G (recall MiddleMouse). Hit the Delete key. You will be left with an open trajectory, having deleted the selected segment. That G will cease to be black, because open trajectories cannot be filled. Select the upper left hand joint of the gray G. Hit Delete. The G will cease to be filled with gray, but there will be no other noticable change. That G is now open. Its two ends are at the joint that you just deleted. Both ends are selected. To see the open trajectory, select the "joint" in the upper left hand corner using LeftMouse with the cursor over the long left edge of the open G, and drag it. A gap should open up in the G. Try selecting segments 1, 2, and 3 as you did in part d. Delete them all at once. Select the whole bottom G. Delete it. Use Control-D to select everything that remains. Delete that too. You should now have a blank viewer for the next exercise.
For information on how to put the G back together after you have deleted parts of it, see the section below on Splitting and Welding.
6. Boxes, Circles, and Polygons
In this exercise, we discover that lots of common shapes are built in, and learn what slices are.
All of the shapes we have made so far have been made from trajectories. Each trajectory takes up one layer or slice of our 2 1/2 dimensional pictorial sandwich. Fine point: An outline is a slice consisting of several trajectories, all but one of which are holes. The outline is a slice. Its trajectories are not. Trajectories are very flexible. However, certain shapes, such as rectangles and circles are used frequently enough that it is worth making special slices that are always rectangular, or circular (or at least elliptical) and are constrained to stay so.
a.  Boxes. Place the caret. Try ShiftDoubleRightMouse. As you move the mouse, a rectangle rubberbands. If instead of a rectangle you see a thin line, you did ShiftRightMouse instead of ShiftDoubleRightMouse. Let go of the mouse while still holding Shift, hit the Delete key to abort this action, let go of Shift, and try again.
b. Reshaping Boxes. Select one joint of a box. Drag it (recall CtrlLeftMouse). Notice how its motion differs from a four-sided trajectory. Select one segment of a box. Drag it. Again, notice the effect of the constraints that preserve its rectangular shape.
c. Rotating Things. Place the caret on one corner of your box. Drop the Anchor. Select the whole box. Place the caret on a different corner of the box. Try CtrlMiddleMouse. The rectangle should rotate so as to keep the Anchor, the caret, and the second box corner collinear. Abort the rotation. The box should be back upright again. Release all keys. Start the rotate again. This time, complete the rotation leave the box at an odd angle.
d. Reshaping Rotated Boxes. Repeat step (b) for the rotated box. Does it do what you expect?
e. Deleting Parts of Boxes. Select one segment of the box. Hit Delete. The whole box will disappear. A box is an all-or-nothing kind of guy.
f. Circles. Place the caret where you would like the center of a circle to go. Find the Shapes pop-up, and invoke Circle. A circle of radius 1 inch should appear centered on the caret.
g. Selecting and Dragging Circles. Select the whole circle using DoubleLeftMouse. DoubleLeftMouse always selects a whole slice, and each circle is a slice. Drag the circle around.
h. Selecting Circle Joints. Select just the center point of the circle. Drag. This is the same as having the whole circle selected. Now select one of the four outer joints. Drag. The circle changes size so that the selected joint is as far from the center of the circle as is the cursor.
i. Rotating Circles. Place the Anchor at the center of the circle. Select the whole circle. Rotate (CtrlMiddleMouse). While the circle shape doesn't look at all different rotated, it is sometimes useful to rotate the circle in order to rotate its joints, when aligning the circle with other objects.
j. Regular Polygons. Place the caret. Find the Shapes pop-up again. Invoke Pentagon. A pentagon should appear. It is the right size to be inscribed in a 1 inch circle. The pentagon is a simple trajectory. You can change its shape, delete parts of it and so forth. Make some of the other polygons if you like.
7. Dragging, Rotating, and Scaling
In this exercise, we snap some regular polygons together in interesting configurations. Clear the viewer and get ready to go.
For a preview, Playback /CedarCommon/Gargoyle/SquareAndHex. script.
a. Setting Up. Place the caret. Using the Shapes pop-up, add a Hexagon. Place the caret somewhere else. Similarly, add a Square. This Square is a simple trajectory, not a Box slice.
b. Dragging. Select the whole square near its lower left corner. Drag it (recall CtrlLeftMouse) until its lower left square snaps onto the rightmost joint of the hexagon. You should have (a slightly larger version of):
[Artwork node; type 'Artwork on' to command tool]
c. Rotating. The caret should be at the point where the square touches the hexagon. Drop the Anchor there. Move the caret, snapping it to point A. The square is still selected. Rotate it (CtrlMiddleMouse). Snap the caret onto the upper right edge of the hexagon (anywhere on that edge will do). During the rotation, the Anchor, point A, and the caret remain collinear. Hence, the left edge of the square and the right edge of the hexagon are now collinear:
[Artwork node; type 'Artwork on' to command tool]
d. Scaling. Snap the caret onto point A again. Start Scale with CtrlRightMouse. During scaling, the square will remain a square. It will be scaled by the ratio of the current caret-Anchor distance to the caret-Anchor distance when the scaling operation began. Snap the caret onto the upper right point of the hexagon to get:
[Artwork node; type 'Artwork on' to command tool]
e. One more time. Copy the square (select the square if necessary and use CtrlDoubleLeftMouse) and drag the copy to another side of the hexagon.
f. Rotating Parts Of Things. Clear the viewer. Place the caret in the center. Add a square. Drop the Anchor. Select the top segment of the square. Rotate. Can you use this rotation to make a (rather perverse) right triangle?
g. Scaling Parts Of Things. Repeat experiment (f), using Scale instead of Rotate. Try turning on 45 and 135 degree slope lines, and turn off heuristics (remember the Auto button) to understand what is going on.
8. The Magic Pie Wedge
In this pie, we make an exercise wedge and change its size. Turn heuristics off.
For a preview, Playback /CedarCommon/Gargoyle/Wedge.script
a. Measuring Segments. Clear the viewer. Place the caret in the middle. Add an equilateral triangle from the Shapes pop-up. Select one of its segments. Find the control panel alignment menu that looks something like:
[Artwork node; type 'ArtworkInterpress on' to command tool]
Click Get!. The length of the selected segment will be added to the Radius menu as a decimal number. Circles of this radius will be activated. Select the top vertex and make it hot. A circle should appear which passes through the lower two joints.
b. Making Arcs. Select the bottom segment. Find the Curves pop-up and invoke Arc. An extra point will appear in the bottom segment. Select this point. Drag it down and snap it onto the circle. You should now have a pie wedge.
c. Stretch Arcs. Select one of the end joints of the arc. Drag it around on the circle. The arc should change size. Can you think of a way to make a pie with a 60 degree wedge missing? Does this give you ideas for reinventing old video-games?
9. More About Curves
Gargoyle provides several different segment primitives, which are helpful in drawing smooth curves. Like arcs, these shapes can be created by selecting a segment, and choosing the proper command from the Curves pop-up. Here are some examples of the curve types discussed in this section:
[Artwork node; type 'Artwork on' to command tool]
a. Creating Conics. Select one or more straight line segments, then make a Tioga selection of a real number between 0.0 and 1.0 (use 0.7) and invoke the Conic command from the Curves pop-up. Each of the selected segments will be turned into a degenerate parabola, with a control point half way between the two joints (it will still look like a line segment). Grab the control point, move it around and the conic will interactively change shape to conform to the new control point position. Try a few other conics with different real numbers; we refer to the real number as the pointiness of the curve. Start with new straight lines each time you create a conic. Try conics with extremes of pointiness 0.0 and 1.0. Do the extreme curves do what you expect?
b. Building Beziers. The Bezier primitive is somewhat more flexible than the conics class, and can be used to model a wider variety of curves. Select a segment and turn it into a Bezier, using the appropriate command in the Curves pop-up. The segment will immediately turn into a smooth curve, with two control points. These two control points are not constrained to lie on the curve, but are used to determine the Bezier's tangent at the joints. The tangent vector at the joint is in the same direction as the vector from a joint to its nearest control point. In the following excercise, we'll use what we've learned about alignment lines and Beziers in order to piece together three Beziers in a tangent continuous manner.
For a preview, clear the gargoyle viewer, and Playback /CedarCommon/Gargoyle/Bezier.script .
1. Initially make a triangle out of straight segments, select all of them, and invoke the Bezier command from the Curves pop-up. All three of the segments will become Beziers. Turn heuristics off.
2. A trajectory of Beziers will be tangent continuous if each joint and its adjacent control points are collinear. Alignment lines can be used to construct tangent continuous Bezier trajectories. Create an alignment line between any joint and the neighboring control point which is outside the triangle, by selecting the joint and making it hot (Control-S), then snapping the caret to the exterior control point and click the Add! command of the Slope: control panel entry. Select the other neighboring control point and snap it (use CtrlLeftMouse) to lie on the alignment line. The two Beziers which connect to the hot joint are now tangent continuous.
3. Click on the Slope: control panel entry -- this will clear all slope alignment lines. Make the hot joint cold, and perform the same steps for the other two joints. When you are done, the entire trajectory will be smooth at the joints, even though it is formed by several different Beziers.
c. Shaping Splines.  Natural Splines are easier to use than Beziers, because the control points always lie on the curve. Make a multi-segment trajectory, select it, and turn it into a single natural spline by selecting the Natural Spline command in the Curves pop-up. Experiment with selecting and moving the joints and control points. Natural Splines can have any number of control points, and can be used to represent quite a wide variety of shapes. The following sketch of Mike Doonesbury is composed almost entirely of Natural Splines:
[Artwork node; type 'ArtworkInterpress on' to command tool]
To make a cyclic spline, that is, a closed spline which has tangent continuity across its entire path, first create a trajectory of straight segments. Close this trajectory by typing Return. Select this trajectory, and invoke the Natural Spline command from the Curves pop-up. The selected trajectory will be changed into a cyclic spline.
10. Boxes and Pointers
By using the SWAT (R15) key, you can select any combination of things on different slices and at different selection levels. Box and pointer diagrams almost become easy. Thanks to Richard Burton for suggesting this sort of heterogeneous selection. Selection using the SWAT key is called META selection.
a. Fun with boxes. Place the caret somewhere. Use ShiftDoubleRightMouse to make a box. Make a second box somewhere else. Make a third. Select the lower right joint of the first box. Try SwatLeftMouse on the lower right joint of the second box. Two joints should now be selected. Select the lower right joint of the third box in the same way. Drag. All three joints move at once. SWAT is called META in the help viewer and Gargoyle documentation so it will not be confused with the deliberate SWATTING of the Cedar system for debugging purposes.
b. Using META means to select the new object at the new selection level without deselecting anything. SwatMiddleMouse extends the selection to another segment. SwatRightMouse is equivalent to RightMouse. Delete two of the boxes. Select the remaining box. Place the caret at its upper left corner. Try CtrlDoubleLeftMouse. A copy of the box will appear and drag with the cursor. Snap the copy to the lower left corner of the original. Use MiddleMouse and SwatMiddleMouse to META select the rightmost segment of each box. Drag. This is handy for changing the size of tables.
c. Clear the screen again. Place the caret. Find the Shapes pop-up and choose Circle to make a circle. Use the Shapes pop-up again to add a box (not a square). Drop the anchor. If the shapes are filled, select them both and invoke the "none" command in the Fill pop-up. Add four line segments between the joints of the circle and corresponding joints of the box. Select the circle. With SwatLeftMouse, select four joints—the ends of the line segments which are touching the circle. To make certain you select each segment end instead of redundantly selecting a circle control point, use SwatLeftMouse and slide the cursor along each line segment, moving toward the circle, until it snaps to the line segment end on the circle. Double check via the feedback line, which should confirm that you are extending the selection to an end joint on a one segment open trajectory. After four end joint selections, Drag. The segments should rubberband as the circle moves. Type Shift^-Esc to undo the drag. Rotating the circle and line joints also has its charms. Try selecting the square and the four joints which touch it; use the same sliding technique to avoid redundantly selecting a square corner. Scale the box around its center.
[Artwork node; type 'Artwork on' to command tool]
11. Textual Perversity in Chicago
For a sample of Gargoyle's text capabilities, Playback /CedarCommon/Gargoyle/TypesOfText.script . This script is not a preview of this exercise.
Gargoyle has textual objects and rudimentary text entry and editing. Gargoyle can also display anything (text, graphics, ...) formatted by Tioga. Tioga formatted data is displayed inside a Box slice. When the Box is resized, Tioga reformats its data to fit the new Box dimensions. Formatted data cannot be edited in place, but it can be moved quickly between the Gargoyle viewer and a Tioga viewer for editing operations.
11.1 Gargoyle's own text.
Let's try Gargoyle's own text capabilities. Position the Gargoyle caret where you like in an open area. Type normally on the keyboard. The usual text string will appear. BackSpace and BackWord (Control-W) and carriage return (Return) will work while typing. Type what you like and try BackSpace/BackWord/Return once or twice. Notice that Return means something different while entering text (new line) than it does when entering line segments (Close).
Do any mouse click in the Gargoyle action area to terminate string input. Don't try terminating with Esc; Esc has other meanings to Gargoyle. Reposition the caret, and type another string. Try selecting and dragging text strings like any other object (use DoubleLeftMouse for selection) and see what happens. The selection feedback box is the font bounding box for the string. A text object has seven "segments" and twelve "joints" associated with it. The following picture shows the numbered joints and the named and numbered segments:
[Artwork node; type 'ArtworkInterpress on' to command tool]
Text Points as shown
Text Edges: 0 => left, 1=> top, 2=> right, 3=> bottom, 4 => baseline, 5 => horizontal centerline, 6 => vertical centerline
Select just one of your strings and hit Delete. Bye-bye string. Add a few more text strings if you wish.
Click on ScreenStyle: in the control panel until the word "AlternateFonts" appears. Note what happens to the appearance of your text string. Select a string and note that the selection feedback is based on the specified font, not on the (usually larger) alternate font. Click on ScreenStyle: in the control panel some more until the label "SpecifiedFonts" appears. Note what happens to the appearance of your text strings.
Position the caret again, then make a Tioga text selection (usually without line end characters). Use the Text pop-up button and invoke AddText. Notice what happens to your picture. Select your new string and type BackSpace. You may now edit the string by either typing to add to the string end, backing up as if you had just entered all the characters in the string, or typing Return to start a new string.
Find a convenient text viewer and type a font name, face, and size, like "Gacha 12" or "Helvetica-BI 18". Note the use of the dash in "Helvetica-BI". Select one or more Gargoyle strings and then Tioga select the font name, face, and size. Use the Fonts pop-up button to invoke SetPressFont. Note what happens to the appearance of your text strings. More information about Fonts is available via the Help pop-up button.
Finally, try selecting text strings and rotating or scaling them (using CtrlMiddle for rotating and CtrlRight for scaling; the cursor and the anchor are important) and see what happens. You'll like it; it is a little slow for interaction, but it is amazing that it works at all. You can have advanced fun with text by using the uneven scaling operations ScaleX and ScaleY, available via the Transform pop-up, or the interactive Skew operation.
Once you set a font and transformation that you like, you can make that the default font and transformation for type-in by selecting a Gargoyle string with the appearance you like and invoking MakeDefaultFont via the Fonts pop-up. If you want to know what the current default font and transformation is, invoke ShowDefaultFont in the same menu.
11.2 Tioga formatting for Gargoyle
Clear the Gargoyle viewer and draw a box about half the size of the viewer. Split the Tioga viewer you are now reading and scroll the new split viewer to the top of this document. Select the box in the Gargoyle viewer, then Tioga select from the very top of this document through the heading "Introduction." Use the Gargoyle Text pop-up button to invoke FillBoxesFromSelection. Be sure both Gargoyle and Tioga selections haven't changed while you poked around. Notice how the box gets filled. Select one corner of the box and drag it; text disappears until you complete the drag operation. Notice how the box refills. Try dragging one edge. You may not be able to make the box big enough to show all the text. Select the box and use the Text button again to invoke EditTiogaFill. A Tioga viewer labelled "TiogaFromGargoyle" will appear with an editable version of the fill. Try editing as usual, then make sure the box is still selected, select the Tioga text, and do TextFillFromSelection again. The edited text should appear in the box.
If you want to see mixed text and graphics inside the box, select the box, select all of section 12(a) of this document, and invoke FillBoxesFromSelection.
12. Splitting and Welding
a. Load the G you made in section 5, "'G' is for Gargoyle", using the Get command, and delete the bottom G. If that file isn't handy, then make a new G. Make sure heuristics are on.
[Artwork node; type 'Artwork on' to command tool]
b. Copying Pieces. Select segments 1 thru 7 (review section 5 if you don't remember how). Now copy the selected segments (CtrlDoubleLeftMouse). Drag the copy out of the way. We will return to it later.
c. Splitting off Pieces. Select the joint at the bottom of segment 1 on the original G. Delete it. The G is now open at that joint. It no longer appears filled. Select the joint at the bottom of segment 7. Delete. You have broken the G into two pieces. Select the piece that includes segment 4 (point at segment 4 and DoubleLeftMouse). Drag this piece to the side. We will return to it later.
d. Making the G into a C. Turn on 0 degree and 60 degree slope lines. Select the right joint of segment 14. Stretch it to the right until it touches the 60 degree alignment line triggered by the right joint of segment 8. Hit Return to close the C.
e. Getting the G back. Delete the segment that was added when you hit Return. Find one of the old G pieces that you placed off to the side. Select it and place the caret on the bottom joint of segment 7. Drag the piece back to its place (the right joint of segment 8). Select both of the pieces that you just moved back together. Find the Edit pop-up and invoke Weld. Notice that you can now select both pieces with a single selection command (e.g. DoubleLeftMouse). They are one trajectory again.
f. Closing the G again. Now move the right joint of segment 14 to touch the bottom joint of segment 1. Select the G. Invoke Weld again. The G will close. Return would have worked as well.
13. Tricks, Dirty Tricks and Statistics
One of Gargoyle's shortcomings is that it does not compute the intersections of most curve types with alignment objects, nor the intersections of most curved scene objects with each other. This may be remedied in future. In the meanwhile, here are some ways to get around the shortcomings.
For a preview, Playback /CedarCommon/Gargoyle/LeaningF.script .
a. Leaning the F against the wall. Using 0 and 90 degree alignment lines with heuristics on, draw a block letter F; make it a closed trajectory by typing Return for the final line. Place the anchor on the lower left point of the F. An inch or so to the right of the F, draw a vertical line, call it the Wall. The object is to rotate the F around the anchor until it touches the Wall. We will grab the F by its upper right corner (that is, we will place the caret on its upper right corner) and rotate that. Snap the caret to the lower left point of the F, then snap the caret to the upper right corner. The value in the Radius: viewer near the bottom of the control panel is the distance between these two points. Click Add! on the radius alignment line. A circle should appear showing the trajectory that the upper right corner will take when we rotate the F. Gargoyle will calculate the intersection point between the circle and the wall. We are ready to rotate. Select the entire trajectory forming the F. Snap the caret to the upper right corner of the F (don't disturb the existing selection). Rotate it to the circle-wall intersection point.
[Artwork node; type 'Artwork on' to command tool]
b. The Largest Square in a Hexagon. Clear the viewer. Place the caret. Add a hexgon and a square at the same caret position. Drop the Anchor. Change the fill color of both shapes to "none". Scale up the hexagon until it is much larger than then square. The largest square which can fit in the hexagon can be constructed by scaling up the square until it just touches the hexagon. How can we do this?
Begin by turning on 45 degree slope lines (you may also want heuristics off). We want to drag the upper right corner of the square to the intersection of this 45 degree line with the hexagon. Select the entire square (remember DoubleLeftMouse). Snap the caret to the upper right corner of the square and scale (CtrlRightMouse) the square, moving the caret along the alignment line. Gargoyle will automatically calculate the intersection point of the hexagon edge and the 45 degree alignment line as you approach that point, then snap the caret to it. You should have:
[Artwork node; type 'Artwork on' to command tool]
Currently, Gargoyle calculates intersection points between straight segments and alignment objects; it will eventually calculate intersection points for all types of segments and alignment objects.
c. Using Scaling for Congruency. Make a V shaped trajectory with 2 line segments. Now, say you like the slope of both line segments but you wish they were the same length. You need to make one the same length as the other. You could: measure the segment you like, add this radius to the radius menu, measure the slope of the other segment, add this slope to the slope menu, make the common joint hot, and drag the endpoint of the segment to be changed. This takes a while.
Instead: Put the anchor on the common joint. Select the endpoint of the segment to be changed. Scale to the endpoint of the stationary segment. Voila!
14. Midpoints and Angle Lines
While Radius Circles, Slope Lines, and Distance Lines are the most popular, Midpoints and Angle Lines do come in handy upon occasion. In this exercise, we construct a pentagon, and inscribe another pentagon inside of it.
a. Setting Up. Make sure heuristics are on (remember Auto), Alignments are on, Gravity is on. Turn on 1 inch circles.
b. A new kind of angle. To make a pentagon, we will want lines at 72 degrees from each segment. Unfortunately, the Angle menu does not provide 72 degrees. Click on the Angle: button near the bottom of the control panel (not the alignment menu label). Type 72 into the neighboring viewer . Now click Add! on the Angle: alignment menu label. The value 72 should appear in bold.
c. The first edge. Draw an edge, roughly from from left to right, and snap it to the 1 inch circle. The 1 inch circle appears because heuristics are on.
d. The other edges. Begin to add another edge. An angle line appears 72 degrees counterclockwise from the direction the previous line was going in. It's like turtle geometry where you might tell the turtle LEFT 72. Snap the second line to the intersection of this angle line with the 1 inch circle. Add a third edge and a fourth. The Heuristics will make things rather cluttered. Just remember that you are trying to turn left by 72 degrees each time and go 1 inch forward. Close the pentagon.
e. Using Midpoints. Turn off Auto. Turn on midpoints (use the MidPts button). Notice that all the segment midpoints of the pentagon now attract the caret. There is no graphical feedback, but the feedback line will tell you when you have snapped to a midpoint. Snap the caret to a midpoint. Draw a line to an adjacent one. You might want to increase the gravity extent to make it easier to snap to midpoints. Finish an inscribed pentagon. You will now feel an irrestible urge to draw yet a third pentagon. Who am I to stop you?
[Artwork node; type 'ArtworkInterpress on' to command tool]
15. A Few More Things
Measurements
There is more to know about Gargoyle than can be learned from the dozen exercises above. We have barely mentioned the last line of the interface:
[Artwork node; type 'Artwork on' to command tool]
Gargoyle is constantly taking measurements of caret motion. Whenever you finish an operation which moves the caret, Gargoyle compares the new caret position to the old one, and computes the slope between those two points and the distance (Radius) between them. It also keeps track of the angle made by the last three caret points, and the distance from a line through the third and second most recent caret positions to the most recent caret position. Using the Add! command on each of the four aligment object menus, these measured values can be added to the appropriate menus.
Furthermore, if you wish to add a particular number to the menus (e.g. 3 inch radius circles), you can type that number in the Radius viewer as though it were a measurement, and then click Add! in the Radius alignment menu.
Finally, the little arrows provide yet another way to add numeric values to the alignment menus. Each arrow will take a numeric value from the current Tioga selection and add it to it's corresponding menu. For example, select the number at the end of this paragraph and click on each of the four arrows in turn. Notice that the value is added to each corresponding alignment menu in turn. Here's a value: 1.2345
Gravity Type
Usually, you will wish to place the caret on the intersection point of two alignment lines, or on the joint of a trajectory. Sometimes, however, you wish to position the caret on an alignment line or a segment. The default gravity, PreferPoints, may make this difficult by snapping your caret to nearby joints intersection points and joints. Pressing GravType: will change to PreferLines gravity. PreferLines pulls you toward the nearest gravity active object, without giving any special treatment to points.
Deleting Alignment Types
The Delete! button on each of the four aligment object menus will remove from the menu all active (selected) alignments. There is no undelete for this operation, so be careful. You can get an individual alignment button back using Add! as described above under Measurements. You can get all of the standard alignments back by clicking Standard Alignments in the HotSpots menu.
The Caret Pop-up
Caret operations ivolving the caret position and orientation and the anchor position and orientation are avaialble in the Caret menu.
The Transform Pop-up
See GargoyleDoc.tioga for descriptions of the translation, rotation, scaling, and multi-point transform commands.
The Overlap Pop-up
We have used the Back command. The Front command moves an object to the front overlapping layer. ForwardOne and BackOne move an object forward or backward one step in the layer ordering. It may be necessary to hit them repeatedly to achieve a desired effect. See the documentation for a description of the other overlap commands.
The Groups Pop-up
Gargoyle has two mechanisms by which objects can be composed into larger objects. The first, called clusters, allows any collection of objects to be hierarchically assembled into a unit called a cluster. Clusters can then be selected (top level) and operated on as a unit. No names are explicitly attached to clusters. Clusters can be easily made and unmade. Cluster feedback appears, in the form of boxes bounding the clusters, when any part of a cluster is selected. It is necessary to walk the selection up and down a cluster hierarchy in order to select intermediate levels in a cluster.
The second mechanism is called groups. A group is simply a name that can be assosciated with any object, and any object can belong to any or all groups. By specifiying the name, all objects in the named group can be selected simultaneously, and then operated on as a unit.
The Debug Pop-up
For the most part, the debugging pop-up is of interest only to implementors. Those interested in understanding how gravity works might create an interesting scene and then invoke TestGravity to see where 1000 random mouse positions would snap.
The Typescript Button
If feedback messages are flashing by too fast, invoke Typescript. Many feedback messages are sent to both the typescript and the feedback line. You may destroy the typescript viewer at any time. However, when there is no typescript viewer, no feedback messages are retained for later review.
The Edit Pop-up
See GargoyleDoc.tioga for descriptions of these additional editing commands involving adding and deleting joints and control points, setting rendering rules and modifying the orientation of trajectories (which interacts with the rendering rules).
The Select Pop-up
The Coincident entry in the Select pop-up selects all line segments of zero length in the scene. This can be useful for discovering what went wrong. This operation is often followed by Delete. Then the user may wish to use Weld (in the Edit pop-up) to put broken trajectories back together again. The UnSeeableSegs/UnSeeableObj commands selects things that can never be seen, either because they are degenerate or have zero line widths or a stroke/fill color of None. This, however, is often intentional.
The Stroke Pop-up
Gargoyle can render the geometry that you create in a variety of styles. The Stroke pop-up allows you to specify the stroke style of the segments making up an open object or the boundary of a closed object. Stroke style parameters include stroke width, dash pattern, type of joins between strokes (e.g. round or mitered), type of line ends (e.g. round or square). Read about the Stroke Menu in GargoyleDoc.
Color and Fill
The Gargoyle viewer can be moved onto the color display and rendered in full color. There are several tools available for sophisticated coloring of Gargoyle objects. Read about the Fill Pop-up and the Color Pop-up in GargoyleDoc.
The Scaling Unit
The values in the Radius and LineDist menus are initially in inches. If you select a segment and click FromSegment via the Units pop-up, the length of the selected segment becomes the new "unit" value, replacing "inches". Other choices for the unit value are available in the Units pop-up. This is a useful trick if you have used a whole lot of alignment circles to make an object, and then decide to scale it.
Interpress Masters
Select a filename ( default extension will be ".ip") and click ToIP in the IP pop-up to make an Interpress master of your Gargoyle scene. No control points or alignment objects will appear in it.
Making Session Scripts
See GargoyleDoc.tioga for an explanation of session logging.
Conversion From Griffin
There is no direct path from Griffin to Gargoyle yet. However, you can make your Griffin file into into Interpress Master. Select the Interpress Master name, and click MergeIPEditable in the Interpress menu. Gargoyle will do its best to change the Interpress Master into Gargoyle shapes. The Griffin -> Press -> Interpress -> Gargoyle is not recommended.
16. Some Puzzles
You now know a great deal about how to use Gargoyle to make precise and/or whimsical illustrations. Try out your new expertise on these pictures:
[Artwork node; type 'ArtworkInterpress on' to command tool]
The baseline is horizontal. All three triangles are similar. The right two triangles are congruent. The lines are width = 1.0.
[Artwork node; type 'ArtworkInterpress on' to command tool]
For an extra challenge, make all stroke widths the same, and make the bottom pane the same height as the top pane.
This puzzle is pretty challenging. My solution took me about 20 minutes. You can see it (in about 3 minutes) with Playback /CedarCommon/Gargoyle/Window.script . Hint: You may wish to add some extra segments to use as guides. You may also wish to type some values into the Radius: and LineDist: slots and then click Add! (on the Radius and LineDistance menu lines). I could use some material for talks and my dissertation.
[Artwork node; type 'ArtworkInterpress on' to command tool]
Here Gargoyle pretends to know about 3D. I used 0, 30, and 90 degree slope lines. This picture would be much harder if the cylinder were on the top or right side of the box, since this would require ellipses.
[Artwork node; type 'ArtworkInterpress on' to command tool]
This one was inspired by the Boxes and Pointers exercise. To me, it looks like four arms each grabbing the wrist of the arm in front. My solution involved rotating the four arms and circle as a unit, rather than building it up piece-meal.
16. Constructing Tangents to Two Circles
Here is a way to construct the tangent to two circles. To make it easier, but without loss of generality, we'll start with circles whose centers fall on a horizontal line. The first construction shows the outer tangent; the second construction shows the inner tangent, but the instructions for the constructions are identical. See if you can do this using midpoints and alignment circles to help.
[Artwork node; type 'Artwork on' to command tool]
Construct line segment AB through the centers of the two circles. Choose a convenient angle  and construct two line segments AC and BD at angle  to line AB at points A and B, intersecting the circles at C and D. Extend line segment AB as needed, and construct line CD; call the intersection of AB (extended as needed) and CD (extended as needed) point E. Bisect line segment AE to determine point F. Construct a circle of radius FA with center at F. The intersection of that circle with circle A is the tangent point G. Point E also lies on the tangent. Construct line segment GE (extended as needed) which is tangent to both circles.
[Artwork node; type 'Artwork on' to command tool]
17. When Trouble Occurs
If Gargoyle pops up an ERROR window, send a message to GargoyleImplementors:PARC:Xerox.
Chances are very small that you will lose any work if you proceed as follows:
1) Abort the ERROR window. Hit the Revive! button. All should be well. If ERROR windows continue to appear, try step 2.
2) Abort all ERROR windows. Hit the Revive! button with the right mouse button. This will attempt to revive without refreshing the screen. Save your file. Delete the Gargoyle viewer. Type Gargoyle to the CommandTool to get a new Gargoyle viewer. Load your file and proceed. If hitting Revive! consistently pops up more error windows, you may be in trouble. Try step 3.
3) Hold down both Shift^ keys and SWAT (R15) simultaneously. The cursor should change to a square, and Gargoyle (really the Viewers package) should try to save your file. This is called an emergency save.
If all else fails, seek out an implementor (Eric Bier or Ken Pier).