The Gargoyle Tutorial Eric A. Bier Filed on: GargoyleTutorial.tioga 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. 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. The CommandTool commands: bringover -p [Cedar]Top>Gargoyle.df Gargoyle should get you rolling. Menus, Keyboard, and Mouse << [Artwork node; type 'ArtworkInterpress on' to command tool] >> Menus As of this writing, the Gargoyle control panel looks as shown 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] All of the buttons in the first and second line (e.g. Scale, Rotate, Fit, ..., Clear, Reset, Get ...) perform some action when the cursor is moved over them and any mouse button is pushed. Buttons with lines through them must be pressed twice before the action occurs. Any mouse button may be used. Holding down CTRL or SHIFT are ignored. [Pop Up Menus] All of the buttons which are labeled in bold face (e.g. Hierarchy, Transform, ...), will open a pop-up menu when any mouse button is clicked over them. Clicking a second time over an entry of the menu will invoke the named command. Any mouse button may be used. If you open a pop-up menu with the right mouse button, the pop-up menu stays open until the user clicks outside of the menu and the user can do multiple clicks over menu items while the menu remains open. However, due to viewer-locking problems, no screen refresh occurs until the pop-up menu is closed. [Toggle Buttons] Buttons that have a box around them, but don't have a colon (e.g. ShowColors, Gravity, ...), are on-off modes. 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 other mode. [Numbered Buttons] The numbers on the lines which begin with Slope:, Angle:, Radius:, and LineDistance are individual buttons. Clicking on them (with any mouse button) turns them on, and they appear in bold face. Clicking a second time, turns them off, returning them to a plain face. [Buttons with Colons] Buttons with colons (e.g. ScreenStyle:, GravType:, Slope:, Angle:, Radius:, and LineDistance:) usually affect the field to their right. ScreenType and GravType, cycle through modes. Slope:, Angle:, Radius:, and LineDistance: turn off all of the numbered buttons on their lines. [Buttons with !] Buttons with exclamation points act immediately. Other actions are queued and are handled first-come first-served. 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 one-word hint of what the various combinations do, hit the Help! button on the Gargoyle control panel. Scroll the window that pops up for more information. There are these types of keyboard and mouse combinations which Gargoyle notices: [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 rectangles. 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 CTRL] Similar to the sequence with the SHIFT key. CTRL mouse actions are used to translate, rotate, and scale selected objects. [Mouse Button With CTRL and SHIFT] Press down CTRL and then SHIFT or SHIFT and then CTRL. Now Press and hold one of the mouse buttons. Move the mouse. When done, release the mouse button and then the CTRL and SHIFT keys (in either order). When the last button comes up, the operation is done. The CTRL-SHIFT combination is usually used to deselect objects. For now, CTRL-SHIFT Right adds circles. [Mouse Button With META] Press and hold the SWAT key 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 CTRL] actions, while the SHIFT and/or CTRL keys are still down, the action can be aborted by releasing the mouse button, and hitting the DEL key. The SHIFT and/or CTRL 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 CTRL] [Mouse Button With CTRL] and [Mouse Button With CTRL 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. One warning: Strings are not allowed to begin with whitespace. Leading spaces will be ignored. [CTRL 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. Most of these functions are also available from Menus. Press the Help key and open the resulting window full column to find out what these functions are. [Look Text] Holding down the LOOK key and the numbers 0, 1, 2, 3, or 4 will change the stroke width of the selected objects. 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 CTRL, 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. CTRL 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 translate selected objects. Try steps a. and b. a few more times. Perhaps you will get a picture which looks like this: << [Artwork node; type 'ArtworkInterpress 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. Try adding some new lines that end on the existing ones. Here's my version: << [Artwork node; type 'ArtworkInterpress 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 how far gravity reaches, its extent, by clicking in the box to the right of "GravExtent:". The left button makes gravity stronger, right weaker, and middle 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 'ArtworkInterpress 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, 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 DEL 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 DEL 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 CTRL 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, 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 DEL 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 CTRL 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, taking 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. 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. Find the Help! button and click over it. 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 CTRL-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 to be perfectly vertical or that any angles be exactly 60 degrees. The next exercises will involve more precise shapes. 2. Making a Starburst. 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 menu on the control panel (it's just above GravExtent). Click the DropAnchor command. (Notice that (^a) appears on the DropAnchor line. Holding down CTRL and the letter A is another way to drop the Anchor.) A small icon will appear. We will use the Anchor in many ways below. It will act as a center for rotation and scaling. Here we will use it to place helpful lines and circles, called alignment objects. b. Activating Alignment 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 alignment line has been activated. Click on 60 again. It will change to plain face and the alignment line will disappear. Now the 60 degree alignment line has been deactivated. Try some other numbers. Try several at the same time. c. Alignment Lines and Gravity. Make sure that Gravity is turned on. Turn off the button labelled Heuristics (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 alignment line. Snap the caret to the alignment 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 'ArtworkInterpress 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 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) alignment lines. 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 alignment lines. To momentarily make the alignment lines disappear, click on the "Alignments" button on the control panel. Click again to make them come back.) << [Artwork node; type 'ArtworkInterpress on' to command tool] >> 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 select the name /Cedar/CedarChest6.1/Gargoyle/StarOfDavid.script and click the Playback button on the control panel. Hold down SHIFT-SWAT with the cursor in the Gargoyle action area to stop the script. Otherwise, wait until it is done before you try to do anything else; while the script is playing the Cedar input focus is repeatedly taken by Gargoyle. a. Setting Up. As in the last exercise, place the Anchor in the middle of the viewer. Activate 1 inch circles, and 30, 90, and 150 degree slopes. Make sure Gravity is on, Alignments are on, and Heuristics are off. Add the first two sides of an equilateral triangle, by placing the endpoints at the intersections of slope lines with the alignment circle. b. Closing a Trajectory. Hit RETURN (or CTRL-C). A straight line segment will be added to finish the triangle. The triangle is shaded gray. << [Artwork node; type 'ArtworkInterpress 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. In the HotSpots menu, click on the Lift Anchor entry (or type CTRL-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 left mouse button twice in rapid succession. The whole triangle should darken. Notice that its outline seems to jump on top. Selected objects like to show you all of their parts, even at the risk of confusing you about who is on top of whom. Now, try selecting the second trajectory. Select the first one again. f. Changing the fill color. Find the Fill Menu and select "none". This will make the selected triangle transparent. Now, select the other triangle and make it transparent too. 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 at twice its normal stroke width. h. Changing the stroke width. You can change the thickness of a line segment. Find the LineWidth menu and click on one of its entries. The number you choose will be the width of the selected segment in screen dots (1/72.0 of an inch). i. Select Everything (using CTRL-D). Make all selected objects have stroke width 2. 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 Store button on Gargoyle 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 to empty the viewer. Again select the filename from any text area. Click Get. Your picture should reappear. 4. Making Things Hot In this exercise, we learn that the Anchor is not the only object which trigger 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 /Cedar/CedarChest6.1/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 Make Hot command (or type CTRL-S). 0, 60, and 120 degree lines should appear centered on 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 (RETURN) command 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 'ArtworkInterpress 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 Make Cold command (or type CTRL-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 objectslines of known slope and circles of known radius. Segments also can trigger two different sorts of alignment lineslines of known distance and lines of known angle. Look for the Gargoyle control panel line: << [Artwork node; type 'ArtworkInterpress 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 Menu and invoke the Bottom command. The big triangle should now be below the little triangle. Don't forget to deselect it so you can see that it has moved to the bottom. 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 large triangle by performing DoubleLeftMouse near it. Extend the selection to the small triangle by performing RightMouse near it. Notice that both shapes are now selected. The order of selection is important. Find the Hierarchy Menu and invoke AddHoles. You now have an outline made of two trajectories, one of which is a fence, and the other of which is a hole. The first 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 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): << [Artwork node; type 'ArtworkInterpress 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 Heuristics. We use these heuristics to make an italic block letter G. For a preview of this exercise, Playback /Cedar/CedarChest6.1/Gargoyle/TheG.script. The script stops at 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, Alignments are on, and Heuristics are on. Activate 0, and 60 degree 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 (e.g. until the SHIFT key comes up). Try to make a block letter G: << [Artwork node; type 'ArtworkInterpress 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 (e.g. until the CTRL key comes up). 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. This 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 LeftDoubleMouse). 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 CTRL key). Notice that the Gravity button in the menu toggles. Put the G where you like it and release the mouse button and CTRL key. g. Fill Colors again. Select the bottommost trajectory. Use the fill menu, and select black. Save this picture with the Store commandwe will use it in a later exercise. Your picture should look like this: << [Artwork node; type 'ArtworkInterpress 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. Hit the DEL 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 Del. 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. To see this, select the "joint" in the upper left hand control 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 CTRL-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 ShiftRightMouse . As you move the mouse, a rectangle rubberbands. 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 DEL. 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 Menu, and select Circle. A 1 inch radius circle 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 select joint is as far from the center of the circle as the caret. i. Rotating Circles. Place the Anchor at the center of the circle. Select the whole circle. Rotate (CtrlMiddleMouse). While the printed circle doesn't look at all different rotated, it is sometimes useful to rotate the circles joints, when aligning the circle with other objects. j. Regular Polygons. Place the caret. Find the Shapes menu again. Select Pentagon. A pentagon should appear. It is the right size to be circumscribed in a 1 inch circle. The Pentagon is a normal 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 [Cedar]Gargoyle>SquareAndHex.script. a. Setting Up. Place the caret. Using the Shapes menu, add a hexagon. Place the caret somewhere else. Similarly, add a square. 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 'ArtworkInterpress 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 to point A. The square is still selected. Rotate it (CtrlMiddleMouse). Snap the caret onto the upper right edge of the hexagon. 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 'ArtworkInterpress on' to command tool] >> d. Scaling. Place the caret on point A again. Scale it 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 when the scaling operation began. Click the caret onto the upper right point of the hexagon to get: << [Artwork node; type 'ArtworkInterpress on' to command tool] >> e. One more time. Copy the square (select the square 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 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 [Cedar]Gargoyle>Wedge.script a. Measuring Segments. Place the caret in the middle. Add an equilateral triangle from the Shapes Menu. Select one of its segments. Find the line: << [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 vertext 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 Menu and select Arc. An extra point will appear in the bottom segment. Select this point. Drag it down 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 menu. Here are some examples of the curve types discussed in this section: << [Artwork node; type 'ArtworkInterpress on' to command tool] >> a. Creating Conics. Select one or more segments, and invoke the Conic command from the Curves menu. 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 segment). Grab the control point, move it around and the conic will interactively change shape to conform to the new control point position. 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 menu. 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 [Cedar]Gargoyle>Bezier.script 1. Initially make a triangle out of straight segments, select all of them, and choose the Bezier command from the Curves menu. 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 make the job easier. Create an alignment line between a joint and one of its neighboring control points, by selecting a joint and making it hot (Control-S), positioning the caret over one of the adjacent control points, and selecting the Add! command under the Slope control panel entry. Select the other neighboring control point and translate it over to lie on the alignment line. The two Beziers which connect to the hot joint are now tangent continuous. 3. Select 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 Spline command in the Curves menu. Experiment with moving the control points and joints. 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 choosing the Close command from the Hierarchy menu (or by typing the ^C accelerator). Select this trajectory, and invoke the Spline command from the Curves menu. The selected trajectory will be changed into a cyclic spline. 10. Boxes and Pointers By using the SWAT key, you can select any combination of things at the same time. Box and pointer diagrams almost become easy. Thanks to Richard Burton for suggesting this sort of heterogeneous selection. a. Fun with boxes. Place the caret somewhere. Use ShiftRightMouse to make a box. Make a second box somewhere else. Make a third. Select the lower right joint of the first box. Try SwatLeftMouse (SWAT is the lowest blank key) 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. b. Using SWAT means to select the new object 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 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 menu and choose Circle to make a circle. Use the Shapes menu again to add a box (not a square). Drop the anchor. Add four segments between the joints of the circle and the corresponding joints of the box. Select the circle. Use SwatLeftMouse to select four jointsthe ends of the segments which are touching the circle (there won't be any feedback while you do this). Drag. The segments should rubberband as the circle moves. Rotating the circle also has its charms. Try selecting the square and the four joints which touch it. Scale the box around its center. << [Artwork node; type 'ArtworkInterpress on' to command tool] >> 11. Textual Perversity in Chicago For a sample of Gargoyle's text capabilities, Playback [Cedar]Gargoyle>TypesOfText.script. This script is not a preview of this exercise. Gargoyle has textual objects and rudimentary text entry and editing. Position the Gargoyle caret where you like in an open area. Type normally on the keyboard. The usual text string will appear, except that a string cannot be started with whitespace. BS will work while typing. Type what you like and try BS once or twice. Do any mouse click in the Gargoyle action area to terminate string input. Don't try terminating with CR or ESC; these keys have 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. Select just one of your strings and hit DEL. Bye-Bye string. Add a few more text strings if you wish. Click on the ScreenStyle: menu in the control panel until the word "ScreenFonts" appears. Note what happens to the appearance of your text string. Position the caret again, then make a Tioga text selection (without line end characters). Open the Text pop-up menu and click AddText. Notice what happens to your picture. Select your new string and type BS. You may now edit the string by either typing to add to the end or backspacing as if you had just entered the characters. Find a convenient text viewer and type a font designator like Helvetica18BI, for example. Select one or more Gargoyle strings and then Tioga select the font designator. Open the Text pop-up menu and click FontNameFromSelection. Note what happens to the appearance of your text strings. Click on the ScreenStyle: menu in the control panel until the word "PrintFonts" appears. Note what happens to the appearance of your text strings. 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 in the Transform menu. 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 'ArtworkInterpress 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. 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 Hierarchy menu and select Weld. Notice that you can now select them 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. Click Weld again. The G will close. Had you used RETURN, a zero length segment would have been added between segment 14 and 1. This will be fixed someday. 13. Dirty Tricks and Making Do One of Gargoyle's shortcomings is that it does not compute the intersections of alignment objects with scene objects, nor the intersections of scene objects with each other. This feature will be added sometime in September. In the meanwhile, here are some ways to get around the shortcoming. For a preview, Playback [Cedar]Gargoyle>LeaningF.script a. Leaning the F against the wall. Using 0 and 90 degree alignment lines, draw a block letter F; make it a closed trajectory by typing CR for the final line. Place the anchor on the lower right point of the F. An inch or so to the right of the F, draw a long 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. Place the caret on the anchor. Place the caret on the upper right corner. The value in the RadiusValue: slot is the distance between these two points. Click Add! on the Radius line. A circle should appear showing the trajectory that the upper right corner will take when we rotate the F. Make the Wall hot. Turn off 0 degree alignment lines, but leave 90 degree lines on. Gargoyle will calculate the intersection point between the circle and the 90 degree line that is collinear with the wall. We are ready to rotate. Select the entire trajectory forming the F. Place the caret on the upper right corner of the F. Rotate it to the circle-wall intersection point. << [Artwork node; type 'ArtworkInterpress 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 alignment lines. We want to drag the upper right corner of the square to the intersection of this 45 degree line with the hexagon. Unfortunately, Gargoyle doesn't compute this intersection point for us. We can trick it, however, by adding an alignment line collinear with the edge of the Hexagon. Make the hexagon's edge hot. Active LineDistance lines at distance 0. This makes a line collinear with the hexagons edge. Now, place the caret on the upper right corner of the square and scale (CtrlRightMouse) to the intersection point. You should have (shown larger than actual size to emphasize alignment lines): << [Artwork node; type 'ArtworkInterpress on' to command tool] >> 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, 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. Type 72 in the AngleValue: slot. Now click Add! on the Angle: line. 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 heuristics. Turn on Midpoints. Notice that all the segment midpoints of the pentagon now attract the caret. Place the caret on one. Draw a line to an adjacent one. 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 haven't mentioned the last line of the interface: << [Artwork node; type 'ArtworkInterpress 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 RadiusValue: slot as though it were a measurement, and then click Add!. 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, PointsPrefered, may make this difficult by snapping your caret to nearby joints intersection points and joints. Pressing GravType: will change to StrictDistance gravity. StrictDistance 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. The Hierarchy Menu See the documentation for descriptions of Undelete, Union Combine, Weld, and ReplaceSegment. The Transform Menu See the documentation for descriptions of the rotation, scaling, and translation commands. The Overlap Menu We have used the Bottom command. The Top command moves an object to the front overlapping layer. UpOne and DownOne 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. The Debug Menu For the most part, the debugging menu 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. Hit Abort! if this is tiresome. If error messages are flashing by too fast, select the Typescript entry. All MessageWindow messages will henceforth be sent to a typescript, which will appear in the right column. You might consider moving it directly above your Gargoyle viewer and shrinking it to a reasonable small size. The Select Menu The degenerate entry in the select menu 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 DEL. Then the user may wish to use Weld (in the Hierarchy Menu) to put broken trajectories back together again. Color The Gargoyle viewer can be moved onto the color display. Unfortunately, it won't show any colors, unless you turn on the ShowColors mode. When you move the viewer back to the black and white display, switch ShowColors off. Only fill colors can be changed currently. Read about the Fill Menu in GargoyleDoc. The Scaling Unit The values in the Radius and LineDistance menus are initially in inches. If you select a segment and click ScaleFromSegment, the length of the selected segment becomes the new unit. ResetScale puts things back to inches. 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 ToIP. Select a filename and click ToIP to make an interpress master of your artwork. 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 FromIP in Gargoyle. 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. << [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 [Cedar]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 RadiusValue: and LineDistanceValue: slots and then click Add! (on the Radius and LineDistance menu lines). If you come up with a solution, and have a free moment, put your solution in a session script file, and mail it to Bier.pa. 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]  Insert caption here >> 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 'ArtworkInterpress on' to command tool] >> Construct line segment AB through the centers of the two circles. Choose a convenient angle and BD at angle 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 'ArtworkInterpress on' to command tool] >> 17. When Trouble Occurs If Gargoyle pops up an ERROR window, send a message to GargoyleImplementors^.pa. 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 pop up, try step 2. 2) Abort all ERROR windows. Hit the Revive! button. Save your file. Delete the Gargoyle viewer. Type Gargoyle to the command tool 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 hit SWAT (the lowest blank key). The cursor should change to a square, and Gargoyle should try to save your file. If all else fails, seek out an implementor (Bier, Pier, Stone).