Shape Technology


A white paper discussing the unique drawing technology used in SmartSketch and FutureSplash Animator.

Jonathan Gay, Vice President Engineering for FutureWave Software

HISTORY OF COMPUTER DRAWING

Drawing on personal computers has evolved a long way since I first tried to use a joystick on an Apple II to draw simple diagrams. There have been many important hardware advances such as faster processors, high resolution bitmap displays, mouse and pen input devices, and laser printers.

Just as the hardware has improved, drawing software has also improved. Users of early applications such as MacDraw would be amazed by what can be done today with full featured applications such as Corel Draw or Intellidraw.

Despite this rapid progress, it is still easier and more convenient to make a quick sketch on a piece of paper that to try and harness the power of the computer for simple drawing tasks.

Additional hardware improvements such as widespread pen input devices for desktop computers, pen-enabled tablet computers and electronic whiteboards promise to be a few of the next steps in hardware.

This paper attempts to describe a similar step in the evolution of drawing software so that, someday, we can reach the point where I won't need the pencil and piece of paper next to my computer.

First Generation - MacDraw

The first generation of personal computer drawing applications is illustrated by the original version of MacDraw. Its basic primitives were simple shapes such as lines, rectangles, circles, and arcs. It provided a very limited way to draw freeform shapes with its polygon tool. Its capabilities were largely inspired by what could be drawn easily with QuickDraw. It was good at editing drawings that were made up of simple shapes but was inadequate at editing freeform shapes.

Second Generation - Abobe Illustrator/Corel Draw

The second generation of drawing packages was built upon the bezier curve technology made popular by the PostScript printer language. Adobe Illustrator is the classic example of this type of package. Because of the resolution and flexibility offered by the bezier curve, these packages were much better at drawing freeform shapes and outputting them on high resolution output devices. Unfortunately, they forced the user to deal with the bezier curves on much the same level as the PostScript printers did by moving, adding, and deleting control points.

In order to become proficient with these applications, a user must learn the difference between a control point and an anchor point. They also must learn how to split and join a curve and how to add and delete control points. These operations typically involve awkward and specialized actions such as holding down modifier keys, selecting the proper points and choosing a menu command etc.

These applications have gradually evolved to make this process easier. Freehand named itself after its capability to trace an outline and have it automatically converted to a bezier curve. The latest innovation which is present is to provide shape combination operations such as add, subtract and intersect. This provides a higher level method to edit bezier curves in certain circumstances but the user must still understand how to work with bezier curves for most of their editing because this functionality is simply laid on top of the original user model made popular by Adobe Illustrator.

Third Generation - SmartSketch & FutureSplash Animator

Given the ability to work with curves on a higher level made possible by faster processors and improved curve technology, it is now possible to hide much of the complexity of working with curves and provide a simpler and more flexible user model for editing curves. This new user model removes many of the limitations of the path based model used by the PostScript drawing applications.

Users tend to take many of these limitations for granted but the only real motivation for their existence is the history of the PostScript graphics model. For example, why must a closed path have the same line style around its complete perimeter? Why can't a vertex be shared by more than two lines? Why does it take so many steps to perform a simple operation such as erasing a portion of a line? Why can't a single line define two edges of a fill? Experienced computer drawing users have learned ways to work around all of these limitations but they should not have to do so. The computer should easily support these types of operations.

By defining a richer curve model that removes these limitations, we enable higher level operations that have been impossible using the current curve technology. For example, users were not able to erase part of a shape or able to easily remove a section from a shape and able to just as easily put the section back in place.e.

THE NEW MODEL

The FutureSplash Animator graphics model is effectively a super set of the existing PostScript graphics model so users can enjoy all of its benefits without sacrificing compatibility with existing software, artwork and output devices. It is still based on bezier curves, but instead of using the low level path data structure used by PostScript which consists of simple linear lists of points, it is based on a graph data structure where each curve segment can have its own line style and every enclosed area can have its own fill style.

The user model for editing shapes is very simple and maps very well onto the visual representation of a drawing. The user thinks of their drawing as being made up of lines and of filled areas. Lines can be straight or curved and they are connected by corners. Corners occur anywhere that the curve is not smooth such as the corner of a rectangle or anywhere that more than two lines intersect.

The most significant thing about this new model is that anywhere lines touch or cross, they are automatically connected and if a new line is drawn directly on top of an old line, the new line replaces the old line instead of simply being drawn on top of it. Also, instead of showing the user the bezier curve handles, the application transparently deals with managing the curve segments and lets the user edit them simply by grabbing a corner or a line anywhere and dragging it.

Another way that the shape technology reduces the complexity for the user is that the structure of a drawing is independent of how the user created it. In a traditional drawing application the results obtained by drawing a rectangle by arranging three lines drawn with the line tool is very different than drawing a rectangle with the path or polygon tool. The shape formed by lines drawn with the rectangle tool can be filled with a color and reshaped without being pulled apart while the lines drawn with the line tool cannot be filled and will not stay connected if they are reshaped. This type of behavior can make it very difficult to edit a drawing that was created by someone else because you need to know what techniques that person used to organize their drawing.

With FutureSplash Animator you can just look at a drawing and where the lines look like they are touching, then they are connected. If they look like they enclose an area, then that area can be closed with a fill. Note that FutureSplash Animator does support grouping so that structure can be added to a drawing when it is appropriate but it does not force this on the user.

The Pen

Although FutureSplash Animator works with a mouse just as well as traditional drawing programs, its advantages become even more apparent when using a pen as an input device.

There are several reasons for this. The most important reason for this is that since drawing with a mouse is an inherently limited experience, they are used to working with the structural limitations imposed by a mouse. But once they start using a pen for drawing, they expect the experience to be much more like drawing on paper where there are no limitations about what areas can be filled and how many lines can connect to a vertex. Also when drawing with a pen, operations such as drawing a rectangle with four separate strokes instead of one continuous stroke need to be very fluid. It is also very common to want to extend a line or to connect two existing lines without first selecting a point or having to choose a join command. Another common mode of interaction on paper is to erase part of a line that and then to redraw it. These types of interactions are very natural with FutureSplash Animator but are impossible with a traditional drawing application.

Copyright ©1996 FutureWave Software, Inc.
Comments and questions:
webmaster@futurewave.com