VideoPlanning.tioga
-- Last Edited by Ken Pier, January 16, 1987 1:49:12 pm PST
Bier, December 16, 1986 10:02:37 pm PST
CHI+GI Video Tape Goals
1. Approximately 12-15 minutes in length. Hope we can squeeze it all in.
2. Purpose: demonstration of Gargoyle principles, user interface, capabilities/usage, and output.
3. Shot in a single location at a workstation with good video production basics. No talking heads.
4. Communicates principles of use and operation quickly and clearly. Not too detailed.
5. Follows advice from Jan Walker on exposition style (as possible):
Exposition style. Boils down to "focus".
- always say what you are going to do before doing it
- tell viewer where to look and what to look for
- draw attention to significant events if several things happen
- make the point once effectively; avoid theme & variations that drag
Working Title
"Snap-Dragging and the Gargoyle Illustration System"
Rough Outline
Broken into four sections:
1. Mention Cedar and CSL. (Wide shot of Cedar work station and Ken narrating, like opening of CaminoReal tape). Talk about Gargoyle: basic principles (2.5D editor, gravity, alignment objects, snap-dragging) and simple demo a la Bier/Pier SIGGraph demo. Probably stolen from SIGGraph demo tape (perhaps intact, perhaps renarrated). 5-6 minutes.
Persistent Alignments
Equilateral Triangle the Hard Way
Equilateral Triangle with Heuristics
Offset Curves
Angle Lines
Translation, rotation, and scaling: The Square and the Hexagon
Rotation: Pointing the Arrow (from the paper)
Translation with Alignment Lines: Left-Aligned Boxes
The Big G: Using Heuristics Again
Rotation with Alignment Lines: The Leaning G
Scaling with Alignment Lines: The Largest Square in a Hexagon
Summary and conclusion
The Star of David.
Offset curve from a hexagon
Perform all of the transformations on a Square.
The words "Snap-Dragging" being scaled, and six-point transformed.
THE END
2. Construction of a non-trivial picture using alignment objects and curves. Emphasize the features in GG not shown in Section 1: curves, split and weld, holes, style parameters, text, slices. Picture to be drawn by Steve Wallgren or Maureen while narration points out use of features. Suggestion for picture: cartoon character or curvy Gargoyle hacker. 3-4 minutes.
If there is time, move to color display and add colors. Cheat and put the ColorTool on the LF display but focus the camera on the color display and don't explain how the colors are being selected.
3. User interface demo. New section written by Ken. Emphasize "experimental" nature of varied types of activators in the interface. Shows guarded buttons, popup menus, two-state buttons (explain about "modes"), graphics buttons, alignment menus, feedback line. Explains "TIP table" actions without actually showing user doing them. 3-4 minutes.
4. Closing: voice over in summary with montage of interesting GG pictures. 1 minute.
Personnel
I'm willing to do the scripting and narrating; I'd like some consultation/critique along the way from Eric and Maureen. I'm also willing to share the narration like we did in the SIGGraph tape if anyone wants to do that.
Schedule
Say, script completed by 1 December, shooting during the first two weeks of December, post-production in the middle of January. Tape due in Rick Beach's hand 30 January. Baby due approximately same day.
Timing Estimate
OBSOLETE
Titles: 0.25 min
Scene1: 0.90 min
Scene2: 5.50 min
Scene3: 0.30 min
Scene4: 4.00 min
Scene5: 0.30 min
Scene6: 0.60 min
Scene7: 3.40 min
Scene8: 0.50 min
TheEnd: 0.25 min
OBSOLETE
Total: 16.00 min
Set Up:
/Cedar/Cedar6.0/Heads/TerminalFace.SetFieldRate[normalAlto, normalLF, lfBall60hz, lfPhillips60hz]
LF: a few icons. Gargoyle open in right column with narrow left column of background. This to assure underscanning doesn't screw us up. Interesting GG picture in viewer.
Version of Gargyle with bangs removed from alignment menus.
BiScrollersImpl.CreateScale modified with BreakTool to do viewerInfo.name ← "Zoom"
Titles:
Xerox (logo type)
Palo Alto Research Center, Computer Science Laboratory
"Snap-Dragging and the Gargoyle Illustration System"
Eric Bier, Ken Pier, Maureen Stone
Scene 1: Ken with Cedar workstation.
"Hello. I'm Ken Pier. On my left is a high-performance workstation running Cedar. Cedar is an integrated programming environment developed at the Computer Science Lab of the Xerox Palo Alto Research Center. Cedar is used for experimental systems research in many areas of computer science, including graphics and user interfaces. We are going to look at Gargoyle, an interactive two dimensional illustration system implemented in Cedar. Gargoyle uses a new technique called snap-dragging for easily creating geometrically precise drawings. Gargoyle also has features which allow the user to control the appearance of an illustration. Although Gargoyle shares some features with both CAD systems and painting systems, it is intended for creation and editing of graphic-arts-quality illustrations."
Let's look at a short introduction to Gargoyle and learn about snap-dragging.
CONSIDER EXCERPTING THE TAPE TO SAVE TIME HERE.
Scene 2: Snap-Dragging
ROLL SIGGRAPH TAPE thru summary, but without titles. Begin at "Part 1" slide. New audio for snap-dragging sequence. Do not show THE END. Six minutes max.
New Audio:
Gargoyle can render any shape described in the Xerox Interpress page description language. Shapes include affine transformations of spline curves, text strings, and sampled images. Here, as a text string is skewed, its characters are scan-converted on the fly.
Scene 3: Steve with Cedar workstation, working on drawing
"Now let's watch Steve Wallgren, a graphic artist, at work with Gargoyle. He'll make use of some more interesting features of the illustrator, including curve editing and appearance control. We'll cheat a little and show you the finished picture first."
Scene 4: Building the PARC Christmas Party Poster
WhiteXmasPreView.IP
[Scene: Show a still shot in color of the Christmas poster. Zoom in on the poem.]
"Steve's idea for a poster advertising the PARC Christmas Party is a computer terminal with a keyboard, a mouse, and a screen with a Christmas tree scene on it, accompanied by a familiar-sounding poem."
KeyboardRow.gargoyle
[Scene: KeyboardRow.gargoyle. First row of keyboard constructed]
"Steve constructs the illustration in several steps. He begins by designing the top row of keyboard keys. A copy of the top row is dragged into place to form a second, offset row of keys. The ends are adjusted flush. The third and fourth rows are constructed similarly." FullKeyboard.gargoyle
AfterSkewing.gargoyle
[Scene: Black and White. Finished skewed keyboard.]
"Next, Steve skews the keyboard to give a three-dimensional effect. By copying and modifying the skewed keys, Steve draws a small keypad. Here he aligns the top of the keypad with the top of the existing keyboard using slope alignment lines. After completing all the keypads, Steve adds vertical front faces to achieve a three-dimensional effect." DepthAdded.gargoyle
XeroxLogo.gargoyle
[Scene: Black and White. Zoomed in on the logo rectangle.]
"Steve finishes the keyboard by adding the Xerox logo to it. He types the word 'XEROX' in the current Gargoyle font, opens a text viewer with a list of fonts, and selects the Xerox logo font. He drags the logo into place and skews it interactively, snapping the caret to the background parallelogram. Finally, the text is scaled about its center to the desired size."
KeyboardColor.gargoyle
[Scene: Color Monitor. Keyboard and Terminal face. Zoom out to see the color change in context.]
"Using similar techniques, Steve creates a terminal screen and a mouse and begins to color the poster. To color the terminal, Steve selects it and then interactively mixes a color, watching how the color fits in with other parts of the picture. The mixing is done with a set of color sliders, not shown."
MouseCord.gargoyle
[Scene: Zoomed in on the area between the terminal and the mouse.]
"The mouse should be connected to the terminal with a cord. Steve roughs in the cord as a polygon. Next, he fits an interpolating spline curve to the polygon vertices and makes adjustments to the shape of the spline by moving its control points. When Steve needs finer control, he splices in a control point by placing the caret on the spline and invoking the AddControlPoint command. Now, the new control point can be adjusted as well. Finally, he snaps the end of the mouse cord to the base of the terminal and adjusts its width."
SampledImage.gargoyle
[Scene: The whole Christmas picture with the sampled image below the terminal screen]
"Rather than leaving the screen blank, Steve decides to fill it with a raster image of a Christmas tree. This image was made with one of the Cedar 3D modeling systems. Steve stretches the raster image to the desired angle, then drags it into place and scales it to fill the terminal screen."
WhiteXmasPreView.IP
[Scene: The complete Christmas picture]
"Steve completes the poster with shadow shapes, shading, and the text of the poem"
Scene 5: Ken with Cedar workstation
"Let's have a look at the user interface that Steve was using. It seems a little overwhelming at first, but it is organized according to some simple rules. Gargoyle has rich functionality and a large number of user operations. Several user interface techniques are used to organize those operations effectively.
Scene 6: Gargoyle User Interface
Camera: set to cover entire Viewer.
"A Gargoyle window consists of an upper portion called the Control Panel (Action: mouse indicates CP) and a lower portion called the Action Area (Action: mouse indicates AA). Camera: zoom in to cover AA. Mouse and keyboard events directed at the action area may cause new graphical objects to be created (Action: mouse quickly creates new object or two), existing graphical objects to be selected (Action: mouse quickly selects new object or two), or selected graphical objects to be transformed with an interactive transformation such as dragging, rotating, or scaling (Action: mouse quickly drags). Any action may be aborted by the user before it completes (Action: drop anchor, mouse quickly rotates, then aborts).
CUT: AA gets an interesting SMALL collection of objects with some closed shapes.
Scene 7: Gargoyle User Interface continued.
7.1 POP UP MENUS
Camera: set to cover entire AA.
"Gargoyle uses a postfix style of operand/operation specification. Graphical objects which are to be modified are first selected (Action: mouse quickly selects new object or two), then an operation is chosen. Camera: pan up to CP; zoom in to cover left half of CP. Operations are organized into groups, and each group appears (Action: zoom over menus) as a pop-up menu. The user pops up the menu and clicks over the desired operation to invoke it (Action: pop Fill and select Black).
Camera CUT: to AA where operation is seen. Setting a color to Black would be good here.
7.2 POP UP BUTTONS
Camera: pan to cover top line of control panel.
"Gargoyle uses a set of self-documenting buttons called pop-up buttons (Action: mouse indicates Zoom, Rotate, Edge; maybe use mag). Pop-up buttons can be used in two ways. When the user clicks the mouse while holding down some combination of keys, nothing pops up and a particular operation is performed. (Action: mouse quickly over a few buttons). However, when the user holds down a mouse button, a menu appears. (Action: mouse over Edge). As the user moves the mouse to choose an operation, documentation is displayed (Action: move around over Edge). When the mouse button is released, the chosen operation is performed. The menu also indicates the key combinations that can be used to quickly invoke the operation next time."
7.3 GRAPHICS BUTTONS
Camera: pan/zoom out to cover CP.
"Another style of button used by Gargoyle is the graphics button. A graphics button displays a picture instead of text to indicate the value it represents (Action; magnifier over gravExtent button, then off). Here the extent of the gravity field is controlled in discrete steps by clicking mouse buttons over the GravExtent graphics button. A picture of the caret in the button moves left as the gravity extent increases and right as it decreases.
7.4 GLOBAL GUARDED BUTTONS
NOTE: may be cut in final tape to save time.
Camera: pan to cover guarded buttons.
(Action: Mag over buttons.) "Operations which have large irreversible effects on the Gargoyle scene are controlled by guarded buttons. Guarded buttons have a line struck through them and require the user to confirm the desired action by clicking twice. (Action: click twice slowly over guarded button).
7.5 MODE DISPLAYS
Camera: pan/zoom out to cover CP.
"Although we have not found it possible to create a completely "modeless" editor, all "modes" are displayed at all times. Camera: pan/zoom in to cover multi-state buttons. For instance, a button with a black border is used to indicate a binary mode. (Action: magnifier over buttons if needed). (Action: magnifier off if needed). The user toggles between on and off by clicking the button (Action: toggle some buttons).
7.6 ALIGNMENT MENUS
Camera: pan/zoom out or cut to cover CP, then pan/zoom in to cover alignment menus.
"Recall that there are four types of alignment objects (Action: magnifier over alignment menus names). Each alignment type is managed by a menu of numerical values (Action: pan skinny magnifier over alignment menus, then off). Active values are displayed in boldface; inactive values in plain face (Action: activate and deactivate one or two values). In fact, the alignment menus are formatted for Gargoyle by the Cedar text editor just like a paragraph of text in a document. When an alignment value is added to or deleted from a menu, (Action: click Add, pause, click Delete) reformatting occurs automatically.
7.7 FEEDBACK LINE
Camera: pan/zoom or cut to cover CP, then pan/zoom to cover feedback line and possibly objects near the top of the viewer for demo of Selection.
Action: interactive operations causing meaningful feedback. Get, caretPos, select, ...
"Textual feedback provides additional information on the current state of an interactive operation. For example, during an interactive selection, textual feedback describes the selection as the mouse moves over Gargoyle objects.
Scene 8: Summary
Action: Interesting pictures montage. Cheat and use videotape cuts every few seconds on color display. Final shot of GGCirclesImpl.mesa.
"Gargoyle is a work in progress. Neither it nor its user interface is in final form. Future experiments will include hierarchies of graphical objects, more elaborate appearance control, graphical searching and substituting, and perhaps freehand input.
"Gargoyle in it's current form is in daily use by the Cedar community. Users acquire a working knowledge of Gargoyle within a few hours and take a few days to master its intricacies. The Gargoyle illustrations shown here include Celtic Knotworks, a Christmas Party invitation, a constructed letter, musical symbols, illustrations of geometric algorithms, whimsical , a box-and-pointer diagram, and several technical illustrations. In fact, Gargoyle is used to include diagrams as comments in its own code.
Order to Splice Together the Montage of Pictures. 4-5 seconds per picture.
Celtic Study 1 (Andrew Glassner)
Christmas 86 (Steve Wallgren)
The Letter A (Eric Bier)
Musical Scale (Doug Wyatt)
Bezier Subdivision (Frank Crow)
Hacker House (Eric Bier and Maureen Stone)
Snapping "Snap-Dragging" (Maureen Stone)
Box and Pointer (Eric Bier)
The Penrose Tiling (Doug Wyatt)
Digital Darkroom (Steve Wallgren)
Pencil and Paintbrush (Steve Wallgren)
Scrolled Gargoyle code module
THE END (from SigGraph86 tape). No audio.