of Hypertext and Graphical User Interfaces

MIT Lincoln Laboratory was one of the institutes that was supported for their research work on interactive computer graphics. Ivan Sutherland presented 1963 in his Ph.D. thesis Sketchpad: A Man-Machine Graphical Communication System [Sutherland 63a] a working program to interactively edit vector based illustrations with a light pen directly on screen. Also the concept of a window was first used in Sketchpad (cf. 3.1.2).The user can zoom into a drawing area and all graphical elements are clipped against the edges of the screen. Sutherland’s ground breaking work is the starting signal to develop interactive user interfaces with graphical aspects for the decades to come.

3.1.2 Sketchpad

in Vision and Reality of Hypertext and Graphical User Interfaces

Lincoln Laboratory at MIT had one of the first transistorized computers, a TX-2 with 69,632 words of core memory to 36 bits each. One of the projects for this machine was Sketchpad by Ivan Sutherland in the early 1960s. Sketchpad is the first program to interactively create line drawings of striking complexity on a computer screen.The subtitle for Fig. 3.1 in Medien – Kunst – Geschichte by Hans-Peter Schwarz on page 61 reads «Ivan Sutherland, Sketchpad-Programm, 1962». Compared to Alan Kay’s article on The Early History of Smalltalk [Kay 96, p. 515, Fig. 11.3], it is more likely that it is Timothy Johnson, instead of Ivan Sutherland, who is using Sketchpad III.


Clearly not me.
Ivan Sutherland, 12 Dec 2006

Fig. 3.1. Ivan Sutherland’s Sketchpad console, 1962. Sketchpad is operated with a light pen and a command button box (under left hand). The four black knobs below the screen control position and scale of the picture.

The console to operate the Sketchpad system is shown in Fig. 3.1. The central device is a 7 by 7 inch scope with a 1024 by 1024 raster. A light pen is attached to directly point to the screen. The position is tracked whilst the light pen is moving. A termination flick event is created when the pen is abruptly moved away from screen. The second hand is used to press command buttons. A box holds about 40 buttons that correspond to operations like DRAW, MOVE and DELETE. Sutherland explains how to draw a line with Sketchpad [Sutherland 63a, p. 2],

If we point the light pen at the display system and press a button called “draw,” the computer will construct a straight line segment which stretches like a rubber band from the initial to the present location of the pen […] A sudden flick of the pen terminates drawing […].

In order to draw a circle [Ibid.]

[…] we place the light pen where the center is to be and press the button “circle center,” leaving behind a center point. Now, choosing a point on the circle (which fixes the radius) we press the button “draw” again, this time getting a circle arc, whose angular length only is controlled by the light pen position […]

Pressing a button labeled “Stop” has the same effect as a termination flick of the light pen. The current position is taken as final and the drawing of the line or circle is completed.

Other command buttons are used to apply constraints to the drawing. “Horv” for example constrains a line to be horizontal or vertical. Other constraints can be more complex. Constraint P for example defines the relation between four points: «Line from first to second would be parallel or perpendicular to line from third to fourth» [Ibid., p. 74]. Many of such constraints can be applied to a drawing. If the user moves one point the algorithms of Sketchpad try to adapt the lines according to the conditions.

Once a picture is stored on magnetic tape of the TX-2 it can be used as a master graphic for new instances. One master graphic might be a bolt that is used at many places, in different angles in a building plan. If the image of the bolt is modified, all instances change as well. This is the earliest application of object-oriented concepts for a computer graphics editor. It is clear right now, that Sketchpad can be taken as the ancestor of CAD application programs par excellence.

Sketchpad does not display any user interface controls like menus and scrollbars. The presence of the console indicates that all such elements are still external to the screen. The box with the buttons holds the commands. A bank of toggle switches to the left is used to turn functions on or off.

Sketchpad is also capable of zooming and scrolling the picture. In other words the actual drawing area could be much larger than the screen. The screen behaves as a window into this area, which can be moved and zoomed with the four black knobs just above the table. If the picture becomes too large to fit onto the screen an algorithm calculates the clipping with the edges of the screen. Sketchpad III by Timothy Johnson is an extension of Sketchpad for the construction of 3-dimensional objects [Sutherland 63b, p. 344]. Johnson uses Sutherland’s clipping algorithm to tile the screen into four independent quadrants. Fig. 3.1 shows the ancestors of windows for graphical user interfaces.

 For a free PDF version of Vision and Reality of Hypertext and Graphical User Interfaces (122 pages), send an e-mail to:   I’ll usually respond within 12 hours. [privacy policy]

Incoming Links

à propos