a visual implementation of a shape grammar system

A visual implementation of a shape grammar system†

M. Tapia

N51-346, Massachusetts Institute of Technology, 77 Massachusetts Avenue

Cambridge, MA 02139; email: [email protected]

Abstract. Shape grammars specify a mechanism for performing recursive shape

computations. A general paradigm is established for a computer implementation

supporting this computation in the algebras of points and lines in 2-d (U0 2 and U1 2).

The guiding principles and the actual implementation are described.

Introduction

The long history of shape grammars has been documented in this journal (Stiny 1994) and

elsewhere (for a bibliography of work in shape grammars see http://www.ben2.ucla.edu/

~lmarch/shape/refs.html. Shape grammars naturally lend themselves to computer

implementations: the computer handles the book keeping tasks (the representation and

computation of shapes, rules and grammars and the presentation of correct design

alternatives) while the designer specifies, explores, develops design languages, and selects

alternatives. Surprisingly little effort has been directed to computer implementations, in

spite of their theoretical appeal. This is most probably the result of several factors: the

relative complexity of the underlying algorithms, despite the elegance and simplicity of the

underlying mechanism; the general lack of awareness of this technique within the computer

science community; and, in particular, the difficulty of developing an integrated system.

† This paper is a prepublication edition of the paper that appeared in Environment andPlanning B: Planning and Design, 1999, volume 26, pages 59 – 73.

–2–

“A visual implementation of a shape grammar system”

Computational work has concentrated on developing shape algorithms and on

demonstrating the feasibility of an implementation. Very little effort has been devoted to the

interface itself or to viewing a shape grammar system as a whole. Three computer

implementations validate this contention: Krishnamurti (1980, 1981), Flemming (1987a,b)

and Chase (1989).

Before discussing the shape grammar paradigm and its concrete manifestation in the

implementation, a purposefully simple shape grammar demonstrates the underlying issues,

without limiting the formalism.

A simple shape grammar

I:

R

This simple shape grammar

generates designs on an orthogonal

grid. The initial shape is a square (I).

The rule (R) specifies a possible

shape replacement operation, joining

two shapes: a pattern, a square, and

its replacement, the same square

with the addition of a translated copy arranged. A rule applies to a shape U whenever a

similarity transformation makes the pattern part of U (e.g. any square), allowing the

transformed pattern to be replaced by the replacement shape suitably transformed.

Applying the rule to the initial shape yields a shape containing three squares,

two the same size as the initial shape and one half the size, emerging from the

two.

–3–


Applying the rule to the smallest square yields squares of three sizes: two the

size as the initial square, two half that size, and one a quarter.

Because the grammar generates shapes containing lines either orthogonal or

parallel to existing lines in the initial shape, every transformation making the

pattern part of a shape is a composition of 90° rotations, reflections along the x

or y axis, proportional scalings, and translations.

A new paradigm for a shape grammar system

The process of developing and using a shape grammar can be divided into several logical

phases.

1. Creating and modifying the shape grammar. The designer creates the rules and initial

shape, and verifies or changes the spatial and logical constraints.

2. Compiling the grammar. While converting the grammar into internal form, the system

checks that each rule always applies in only a finite number of ways.

3. Exploring the language of designs defined by the grammar. The designer explores the

language of designs, generating designs, imposing additional constraints, halting the

generation process, backtracking to a previous design, or saving the current state. The

designer may interpret the resulting designs in a curvilinear world and use them as the

basis for a design.

While this process corresponds to visual programming, the paper addresses only some of

the issues of the specification of the visual program and concentrates on the compilation

and directed execution of the visual program.

Restricting the shape grammar

Shapes in this shape grammar have their direct analogy in drawing: composing lines of a

single thickness on a sheet of paper: the surface of the paper confines shapes to a fixed,

bounded area; the thickness of the lines, the manual dexterity of the designer and her

visual acuity limit the number of lines the designer can draw in any given area before they

–4–


fuse into a blob or shrink until a line becomes a point. To avoid these problems, accept a

range of scales for patterns and their replacements. The designer might force squares to be

at least 1 unit wide and at most 16 units wide, and only to replace squares at least 2 units

wide.

These restrictions prevent the emergence of extremely

large or small squares. Additional restrictions can

further narrow the designs: the resulting shape must fit

within a square (16 x 16 units), transformations must

be compositions of integer translations multiples of 90°

rotations, reflections along grid lines, and integer

proportional scalings

R:

I:

A marker indicates

the correspondence of

the pattern (square)

and its replacement

shape in the rule.

Grid lines depict the

actual size of the

initial shape (I) a

square of size 4 x 4

and the minimal size of the pattern and replacement. Placing a limiting rectangle around

the initial shape restricts the way the rule can be applied. The designer can enable a

limiting rectangle and change its size during design development, restricting rule

application to the current area of interest. .

–5–


The designer's view of a shape grammar system

Consider a design scenario with: the designer specifying the grammar, the system

displaying it, and the designer exploring the resulting language. To create a language of

designs, she proceeds through a sequence of actions, first creating and modifying the

grammar, compiling it, and finally exploring the language.

There are several differences between the description below and the actual implementation.

First, while the description separates activities into actions which appear to be sequential,

the designer can freely move between the phases. A consequence is that full backtracking

requires a complete reversion to a previous state of the grammar. Second, compilation is

implicitly, rather than explicitly invoked. Each rule is compiled when required, to show the

effect of a rule on a particular shape. Third, the designer uses a separate program to create

the shapes in a shape computation, exporting them in PICT form on the Macintosh. In the

drawing program, the designer uses the line tool to draw lines and the oval tool to draw

labels, with the fill pattern distinguishing between labels. Fourth, shapes are converted to

their maximal line representation whenever they are imported into the shape grammar

program or are the result of a shape computation within that program.

Creating and modifying the grammar

After sketching the grammar, the designer defines the grammar, selecting options

corresponding to any underlying grid: a square grid, parallelogram grid, or an irregular grid.

With the square grid enabled, whenever she draws a line, the endpoints attach (snap) to

grid points to create a horizontal or vertical line.

The designer can now create the elements of the grammar: the current or initial shape (I)

and the finite set of rules (R), joining two shapes together. She draws the constituent

shapes using a drawing tool in which shapes are represented by their longest (maximal)

lines. While she may use any number of lines to create the pattern (e.g. a square); the

system always represents the shape by its maximal lines (e.g. four maximal lines). Every

–6–


time she adds (or erases) parts of lines the system calculates the new, maximal line

representation.

To create the initial shape, the designer points to the initial shape window, the system

displays the relative coordinate positions of the endpoints of the lines and their lengths. She

creates four maximal lines, adjusting them until they form a 4 x 4 unit square, using

structured database queries and modifying the shape constraints: the relative proportions

of the shape, and the relationship between intersection points and lines.

To create the rule, the designer specifies the pattern and replacement shapes. For the

pattern, she copies the initial shape into the pattern window; for its replacement, she copies

the pattern into the replacement window and positions another copy so that the upper left

corner of the square appears in the middle of the initial square. To confirm the correct

position, she queries (and possibly changes) the coordinates of the bounding box and the

individual intersection points (while maintaining the underlying constraints).

When the rule is complete, the designer can display both sides of the rule as one shape by

using three colors: the line segments retained by the rule ( ), the line segments added

( ), and the line segments erased ( ) She can also create a rule in a single window

using these two line types: one for the pattern and one for its replacement

The rule retains the line segments of the original (upper) square

while adding the lines in the lower square. If the designer

decides to add a rule which interchanges the roles of the pattern

and replacement shapes, the system can still represent the new

rule using two colors

–7–


The new rule retains the line segments of the upper square

while erasing the lines corresponding to the lower square.

Representing a rule in this way as a single shape corresponds to

the way rules are actually stored: the pattern, the lines added,

and the lines erased

Other types of operations can also be envisioned: examine the pattern or replacement, clone

a rule, change a rule, interchange the pattern and replacement shapes, or select elements

from an existing library of rules or shapes to create a new grammar. An extension would

allow translated, rotated, scaled, or reflected shapes to be added to form new shapes.

The implementation allows the designer either to draw the two shapes of a rule either as

one, using line patterns to distinguish between the pattern and its replacement or to draw

them separately.

While this discussion has introduced the concept of the initial shape, the implementation

extends this concept to the current shape, allowing the designer to re specify the current

shape at any stage. Some grammars effectively define more than one initial shape, by

defining sets of rules that only apply at the beginning of the computation, replacing the

initial shape by one of several The approach adopted by the implementation has several

benefits: first, it allows a designer to define families of languages that differ only in the

initial shape; second, it allows the designer to use the result of a shape computation in one

grammar as the initial shape in another; and, third, it allows the designer to continue a

shape grammar computation after it has been interrupted.

Compiling a rule

After entering a rule, the system compiles the rule whenever the designer animates it (asks

to see how the rule applies to the pattern) or asks to apply a rule. During compilation the

system translating rules into a form suitable for computation. The system encodes

–8–


geometric information, using symmetry and orthogonal restrictions to reduce the search

space during rule application.

Shapes define implicit labels, called registration points. In this grammar, a registration point

coincides with the intersection of two non-collinear lines or their extension, corresponds to

the intersection of a pair of orthogonal lines, coinciding with no, one or two lines. A

registration point may also coincide with the perpendicular projection of an explicit label

onto a line or its extension

R:

Registration points appear as solid

dots(•): the pattern contains four and the

replacement contains 16.

p

p'

t'

t

A rule applies to a shape U whenever there

is a similarity transformation that makes

the pattern part of that shape. A rule

apples in a finite number of ways whenever

there are two distinct registration points in

the pattern (p and p'). The points define a

vector (pp').

Similarly a pair of distinct registration points (t and t') in the shape U define another vector

(tt'). Obviously, there is a Euclidean transformation which transforms one vector (pp') into

the other (tt'). It suffices to consider four transformations –– one transforms the respective

points p and p’ into t’ and t, the second to the mirror reflection about the line tt’, the third

to the reflection about the perpendicular bisector and the fourth to a reflection about both

lines.

–9–


During compilation, the system uses the

symmetry of the pattern and replacement to

determine the distinct shapes that result

from applying the rule to the pattern. In this

case, four distinct shapes result. The

system can pick a pair registration points

corresponding to two vertices lying along a

side of the square (four ways) or forming a

diagonal (2 ways).

When a transformation that maps the pattern into

part of the shape U, symmetry guarantees that the

reflection of the transformation along the

perpendicular bisector will also be part of the

shape.

Applying the rule in all ways to the square is equivalent to reflecting the result of one rule

application to form the four shapes.

Exploring the grammar

As soon as the designer specifies the current shape and at least one rule, the designer can

initiate a shape computation. The designer decides to restrict the generation of the form to a

specific area. She draws a rectangle about the area of interest (in this case a square four

times the size the initial shape, with the same center).

–10–


The system then presents the designer with several options:

1. Terminate the process and either accept or reject the resulting design

2. Let the system generate a design n levels down the tree.

3. Resize or remove the boundaries of the area of interest.

4. Restrict the area of rule application.

The designer chooses the second option, asking the system to apply the rule arbitrarily

three times, each time yielding a distinct shape. The system arbitrarily calculates two

distinct intermediate shapes which are not displayed. Both of the intermediate shapes

contain squares of two different sizes:

–11–


The system then applies the rule to one of the two smaller squares in the middle of the

shape and displays the resulting shape, containing three different sizes of squares.

By specifying the number of steps, the designer can now

backtrack to one of the three intermediate shapes. If

she wants to develop the central area, she chooses the

fourth option, restricting rule application by drawing a

box around the central square and confining all rule

applications and their results be to that box.

The system responds by highlighting the square. The

designer now asks the system to apply the rule three more

times. The system applies the rule once to one of the two

larger squares within and at the bottom of the shaded

square to yield the following shape. The system applies

the rule once to the square in the middle of shaded region

to yield the following shape.

Adding grid lines demonstrates that the rule no longer

applies to the shape. The system warns the designer

that it can apply the rule only two and not three times

to generate a distinct shape.

–12–


The designer removes the highlighting from

the central square, displays the result,

accepts the design, and projects it into

another space, resulting in the following

design motif with a parallelogram grid. Other

kinds of projections can be imagined,

including the non-linear projections

discussed in D'Arcy Thompson’s Growth and

Form. This interpretative step corresponds to

the final step of another graphical

production system — L-systems (Lindemayer

1968), which realizes the string representation of the object (the word) as a geometric

shape. While the underlying computations in a shape grammar employ maximal straight

lines, in the final realization, a design may contain curvilinear forms (Knight 1980).

The designer can continue this process, collecting designs of interest by computing the

results in the orthogonal world and then projecting them into some other space or using

them as the inspiration for actual designs or other grammars.

Emerging issues

Each phase raises its own issues of representation ( internal and external),computation,

presentation and selection. The territory of each phase is sufficiently rich to serve as the

topic of a separate research. For example, consider drawing labeled shapes. This provides

the opportunity to explore structured drawing tools and “database” queries of spatial

–13–


relationships simple shape illustrates the database issues. Consider the ubiquitous square.

The four maximal lines in a square encapsulate a variety of spatial relationships: each line

is the same length, each line is parallel to one other perpendicular to two others and each

maximal line contains two intersections. Even this simple figure contains a rich variety of

relationships between the constituent elements –– the maximal lines themselves and the

intersections.

Guiding principles

Several principles guided the development of the shape grammar implementation. These

principles all supported the idea that, in shape grammars, the drawing is the computation.

Thus the system must focus on drawing: allowing the designer to specify a rule using a

drawing (rather than in textual form like most systems), displaying the alternatives in

drawings, allowing the designer to combine two shapes easily to form a possible shape

replacement operation. The interface should be graphical and simple, with tools to support

true direct manipulation of the objects, allowing the designer to focus on the task at hand

rather than dividing her attention between spatially distinct menus and the objects of

interest, and to tradeoff screen real estate for detail.

Different windows support different activities. The main grammar window contains a

horizontal scrolling region containing the rules: a single shape when the rule erases the

whole shape and otherwise it contains two shapes, and a working rule area for examining

or modifying an existing rule or constructing a new one. The alternatives window shows the

various ways a particular rule applies to the pattern The current shape contains the shape

corresponding to the current state of the computation. During rule application it also

contains a count of the distinct shapes resulting from applying the rule and a view of one

shape, with the changed regions highlighted with tools for scrolling through alternatives.

The possibilities window displays all possible shapes resulting from applying the rule. Other

windows allow the designer to examine a single shape in more detail.

–14–


Many interfaces distract the user by forcing her to divide her attention either spatially (e.g.

going to a menubar to select a particular menu or pressing a command key shortcut) or

temporally (e.g. by presenting large dialog boxes). The implementation supports marking

menus using a technique described in Tapia and Kurtenbach (1995). The designer can

either make a mark on the drawing, using the radial direction to specify the choice, or can

wait until a radial menu appears with the choices arranged like spokes on a wheel. This

particular presentation method allows the designer to maintain the current context,

supporting focused attention, and to act directly on the object.

The implementation

A sample session indicates how the implementation addresses the twin themes of

presentation and selection.

–15–


Retrieving a grammar defined in the file “abcd”, the system creates the grammar window

“abcd” corresponding to the file and two other windows: “Current shape” showing the

current shape and “Possibilities…” showing the shapes resulting from applying a rule. The

designer has selected the first rule in the grammar window, from the rule strip containing

four rules: the first is the original rule, the second reverses the rule, the fourth erases a

square, and the third erases a more complex shape. The designer clones the selected rule,

transferring it to the work area, and then asks the system to show the shapes that result

from applying the rule to the pattern, animating the rule (Baecker and Small 1990;

Baecker, Small and Mander 1991).

The system displays the four resulting shapes. The designer can increase or decrease the

size of the panes, trading space for detail.

–16–


To make a new rule, the designer switches the pattern and replacement shapes and

removes the square. The new rule removes two squares arranged in the configuration.

–17–


The designer adds the new rule to the rule area, to the end of the list.

–18–


–19–


The designer selects the new rule and makes the pattern the current shape.

–20–


The designer selects the first rule and asks the system to apply it to the current shape.

–21–


The system determines the twelve transformations..

The system displays the possibilities in two forms: as an array of possibilities

(“Possibilities…”) and one at a time in the “Current shape” window. Colored lines indicate

the portions of the shape added or deleted. although patterns or line widths could easily be

used. The designer can move through the images in the one-at-a-time display, forwards,

backwards, to the start and to the end. She can also delete shapes.

–22–


The designer can decrease the size of the panels in the array of possibilities to display more

at a time with less detail.

–23–


If the designer removes one of the possibilities, the system adjusts the display in the

“Possibilities…” window.

–24–


The designer increases the scale of the “current shape” to examine the possibility in greater

detail. She can examine other shapes as well –– the pattern and replacements in a specific

rule or a single pane in the “Possibilities…” window.

Future research

There are several areas for future research: the development of specialized drawing tools to

support shape grammars which applies to other structured drawing environments , the

development of more complex constraints on rule application directly under the control of

the designer, and more effective tools for the visual display of the possibly large set of

alternatives. Each of these areas is sufficiently rich. For example, consider the development

of drawing tools for developing shape grammars. The drawing tool must allow the designer

to determine a spatial relation between objects: between a registration point and a maximal

line or between two maximal lines.

–25–


p

L

For a line and point arranged in this way, such a system might determine that the point p

is separated from the line L by a distance 1/2 the length of L and the projection of p onto L

divides L into two equal parts.

L1

L2

For two lines arranged in this way, the system might determine that the two lines L1 and L2

are parallel and of equal length and the projection of the left point of L1 divides the line L2

into two equal parts. Solving this problem requires finding an appropriate vocabulary to

express spatial relations as well as a method for extending it to allow the designer to

express the relations in her own way.

Consider adding a constraint manager integrated with such a database tool. This would

enable the designer to enforce constraints, maintaining database consistency while

positioning the elements in a drawing. One could imagine that changing the position of the

point in the figure might cause another line to move in tandem with it, or to increase in size

to maintain the relationship with it. The designer would need to be able to specify the effect

of moving one element on the other.

Conclusion

The visual implementation of a shape grammar system demonstrates some of the features

of shape grammars and the problems inherent in the specification, presentation, and

selection of design alternatives. For details of the implementation, including the issues of

representation and computation, presentation and selection see Tapia 1996.

–26–


Acknowledgments: This paper is a distillation and a reflection on the dissertation

produced under the supervision of Bill Buxton of Alias|Wavefront and the University of

Toronto who supported the designer-centered focus. George Stiny and Terry Knight

encouraged the application of techniques from Computer Science to the larger issues of

shape grammars.

References

Baecker R and Small I , 1990, “Animation at the interface”, in The Art of Human-Computer

Interface Design, Laurel B , ed, Addison Wesley, Reading, Massachusetts, 251-267

Baecker R , Small I, and Mander R, 1991, “Bringing icons to life”, Proceedings of the CHI ‘91

Conference on Human Factors in Computing, ACM, New York, New York ,1-6

Chase SC, 1989, “Shapes and shape grammars: from mathematical theory to computer

implementation”, Environment and Planning B: Planning and Design 16:215-242

Flemming U, 1987a, “The role of shape grammars in the analysis and creation of designs”

in Kalay Y E (ed) Computability of Designs (New York: John Wiley & Sons) 245-272

Flemming U, 1987b, “More than the sum of parts: the grammar of Queen Anne Houses”,

Environment and Planning B: Planning and Design 14:323-350

Knight TW, 1980, “The generation of Hepplewhite-style chair-back designs”, Environment

and Planning B: Planning and Design 7:227-238

Krishnamurti R, 1980, “The arithmetic of shapes”, Environment and Planning B: Planning

and Design 7:463-484

Krishnamurti R, 1981, “The construction of shapes”, Environment and Planning B: Planning

and Design 8:5-40

Lindenmayer A, 1968, “Mathematical models for cellular interactions in development I and

II”, Journal of Theoretical Biology 18:280-299, 300-315

Stiny G, 1994, ”Shape rules: closure, continuity and emergensce”, Environment and

Planning B: Planning and Design</I> <B>21, s49-s78

Tapia M, 1996 From Shape To Style,Shape Grammars:Iissues in representation and

computation, Ph.D. Dissertation, Department of Computer Science, University of

Toronto, Toronto, Canada

Tapia M and Kurtenbach G, 1995, “Some Design Refinements and Principles on the

Appearance and Behavior of Marking Menus”, Proceedings of the ACM Symposium on

User Interface Software and Techniques, Pittsburgh, PA, 189–195

–27–


Thompson A W, 1942 On Growth and Form. [a revision of the 1917 edition], Cambridge

University Press, Cambridge, England

a visual implementation of a shape grammar system

Documents