This technote outlines several approaches for generating 2D graphical user interface widgets which have a rough, sketch-like quality, and introduces an algorithm for drawing widgets using fun 'wiggly' lines that have a pleasing, informal look.
Sketching, pen interfaces, EtchaPad, informal interfaces.
Researchers and developers are discovering the need and importance of sketch-like representations in the creative process (e.g. [1][6]). In addition, pen-based input is becoming more common, with the arrival of commercial products such as the Apple's Newton*. As a consequence, the sketch content in computer applications is increasing. Unfortunately, pen and sketch based applications almost always present the user's hand-drawn, rough-looking sketches in a rectangular window within a traditional WIMP interfaces (see [2] for an exception). Microsoft's Windows for Pen Computing* is perhaps the epitome of this trend - the rough, pen-generated graphics look very out of place on the 3D-bevelled, functional-looking Windows desktop. This leads to two problems. First, there is a visual jar between the two competing looks: the freehand lines and the computer-generated graphics. Second, the 'look' of the computer-generated interface does not reflect the 'feel' of the pen input. Pen input is fluid, dynamic, personal and informal, but the computer-generated graphics look linear, static, and formal.
Adopting a more informal aesthetic in computer interfaces may reduce or remove these difficulties. In the EtchaPad project [3], we are developing tools for building user interfaces (and data visualizations) which have an irregular, informal appearance. This paper describes the techniques we have tried, and documents the algorithm we are currently using.
We wanted a method that was quick to compute, worked well on small screens, and required little or no tuning and tweaking by the developer. The method should also have an identifiable aesthetic, so that non-designers can create interesting and useful interfaces with no special training. and so that all interfaces created using the toolkit have a consistent look.
One strategy, as seen in applications like Kai's Power Tools* (from MetaTools Inc.), is to hand-create all of the interface elements, either using an electronic painting program, or by scanning an image drawn on traditional media. The resulting look can be highly application specific. It can be informal, rich, sparse, or formal. However, this approach is time consuming, difficult for developers who don't have access to artists, hard to maintain and modify, and also doesn't scale up to large or dynamic interfaces.
A second strategy is to create a software renderer which draws things with an informal look. There are a number of rendering techniques that could be considered. We have tried three. ([1] describes a more sophisticated set of tools). One technique we tried involved having the computer render lines and shapes multiple times, using transparency together with a jittering algorithm to make a graphic look as if it has been sketched roughly and then overdrawn more accurately. This approach has been used in 3D graphics to create visually compelling sketches (e.g. [4]). However, on small 2D displays we found that drawing extra line segments tends to produce visual clutter which is distracting if the components are small. Rendering a component several times is also expensive.
Another technique is to add pseudo-random distortions to line segments, to give them a jagged look. We found this approach too random and jagged - it was hard to tune. The technique we adopted uses a texturing algorithm to distort the lines. We use Perlin's stochastic noise function [see 5 for an implementation] to draw widgets with a non- repetitive hand drawn appearance. Perlin noise is used extensively in 3D graphics to create procedural textures for marble, smoke, fire and wood. It is cheap to compute, and easy to tune. When combined with a script-style font, the result is a very informal interface aesthetic [see Figure 1].
Figure 1: Rectilinear (left) and Informal (right)
Our algorithm introduces extra vertices into lines, rectangles and polygonal shapes, and then distorts the coordinates of those vertices. The number of added vertices must be chosen carefully - too many, and the rendering takes too long, particularly if the number of components is high or during animations and direct manipulations. Too few and the lines become jagged (as seen in the roughest line on the right in Figure 1).
We tried a number of different algorithms, including various levels of Perlin noise, and Perlin noise at multiple frequencies. Using noise at several different octaves (or noise upon noise) yields extremely pleasing results, but requires too many samples per line for good results. In the current implementation, each graphical line segment can have four noise parameters: Pos, N, Cycles and Scale. Pos determines what part of the noise curve is sampled for that object. N indicates how many additional vertices are added to the line segment to introduce noise. Cycles determines how long a segment of the noise curve is sampled for the line. Scale indicates the amplitude of noise added to the line. The drawing algorithm is straightforward. For each line segment, we output coordinates as follows (all variables are floats):
proc DrawRoughLine(x1, y1, x2, y2, pos, n, cycles, scale)
lx = x2 - x1
ly = y2 - y1
l = lx * lx + ly * ly
// Compute a vector perpendicular to (x1,y1)->(x2,y2).
// scale this to produce a small vector.
wx = -ly * scale
wy = lx * scale
vertex(x1, x2)
for i from 1 to n do
t = i/n
// Compute vertex, adding noise in the (wx,wy) vector
x = lerp(t, x1, x2) + noise(pos) * wx
y = lerp(t, y1, y2) + noise(pos) * wy
pos += (cycles/n)
vertex(x, y)
end
vertex(x2, y2)
end
Values of 1 for Cycles, 1/10 for Scale, and 10 for Steps produces surprisingly informal appearance, with reasonable performance cost. Note that each new component should be given a unique value for Pos (e.g. increase Pos by some number every time a new object is created).
In our algorithm, the amount of noise added to the line is proportional to the line length. This makes both short and long lines look reasonable. One addition to the algorithm is to clamp the maximum amount of noise that can be added to long lines, so that long lines are not excessively noisy. An additional efficiency improvement would be to modulate the number of samples by the thickness or length of the line, so small thin lines are cheap.
Users and programs can easily tune these parameters (in particular, the Scale parameter) to specify how informal the interface appears. In fact, it is straightforward to dynamically change these values, to produce animated interfaces which flicker and wiggle like a hand-drawn cartoon. Changing Pos by small amounts each frame causes the button to slowly pulse from one appearance to another. Using large values of Scale can be used to create 'excited' buttons, which might be used to indicate the level of activity of a button. A Scale of 0 produces straight lines.
The same algorithm can be used to generate irregular backdrops. We have created a non-repetitive, zoomable grid using this approach.
This paper presents an easy-to-use algorithm for roughening up computer generated graphics to create an interesting, wiggly appearance. Widgets drawn using this algorithm are shown in Figure 1.
We have not yet evaluated the impact that roughening up computer-generated graphics and widgets has on users. In our informal trials, some users like the wiggly widgets, whereas others prefer a more functional look. Its not clear whether reducing the gap between the look of freehand graphics and the look of interface components helps users, or whether it is a distraction. User testing and empirical studies are needed to resolve these questions.
I would like to thank Ken Perlin, Ben Bederson, Jim Hollan, Allison Druin, Athomas Goldberg, Troy Downing, and the members of the MRL/CAT for their help and encouragment. This work was supported in part by ARPA grant N660011-94-C-6039 to the University of New Mexico.
See InformalLineGenerator.java for sample code that implements the informal line drawing algorithm in Java.
1. Jutta Schumann, Thomas Strothotte, Stefan Laser, Assessing the Effect of Non-Photorealistic Rendered Images in CAD, in Proceedings of ACM CHI '96.
2. Kramer, A., Translucent Patches - Dissolving Windows, in Proceedings of ACM UIST '94.
3. Jonathan Meyer, EtchaPad - Sketch based disposable interfaces, in Proceedings Companion of ACM CHI '96, short paper category.
4. Robert C. Zeleznik, Kenneth P. Herndon, John F. Hughes, SKETCH: An Interface for Sketching 3D Scenes, Proceedings of ACM SIGGRAPH '96.
5. Kenneth Perlin, An Image Synthesizer, Computer Graphics, Vol. 19 no. 3, 1985.
6. James Landay, Brad Meyers, Interactive Sketching for the Early Stages of User Interface Design, ACM CHI '95.
* All trademarks and copyrights of Microsoft (www.microsoft.com), Apple (www.apple.com) and MetaTools (www.metatools.com) are recognized.