A Computational Environment for Learning Basic Shape Grammars
A Computational Environment for Learning Basic Shape Grammars Wing-Kwong Wong National Yunlin University of Science & Technology Institute of information Engineering, Taiwan
[email protected] Chin-Tang Cho National Yunlin University of Science & Technology Institute of information Engineering, Taiwan
[email protected]
Abstract: In this paper, we propose a computational environment for design students to learn basic shape grammars. This system is implemented with SVG, which runs on the Web and is platformindependent. Learners can input shapes of 2D or 3D and two grammar rules at most. The application generates 2D and 3D designs with the grammar rules interactively in real time on the Web. Keywords: computer-assisted learning, design education, shape grammar, computational design, SVG.
1. Introduction In the early 1970s, George Stiny and James Gips introduced the shape grammar (Stiny & Gips, 1972). Shape grammars are similar to phrase structure grammars in linguistics, which were introduced by Chomsky. Shape grammar succeeds to the viewpoints of tradition architectural esthetics and integrates formal analysis with aesthetics theory. Its method stresses the analytic properties of axis, symmetry, ratio, etc (Liou & Vakalo, 1991). Stiny and Gips (1972) pointed out that: “Generative specifications of painting and sculpture have wide implications in aesthetic theory, a theory that regards the art object as a coherent, structured whole. In this context, aesthetics proceeds by the analysis of that whole into its determinate parts toward a definition of the relationship of part to part and part to whole in terms of “unified variety”, “order” and “complexity”, “a series of planned harmonies”, “an internal organizing logic”, “the play of hidden rules”, etc. The relationship between the wealth of visual information presented in an art object and the parsimony of structural and material information required to determine that object seems central to this aesthetics. … We believe that painting and sculpture that have a high visual complexity which does not totally obscure an underlying specificational simplicity make for good art objects. The use of the words “beautiful” and “elegant” to describe computer programs, mathematical theorems, or physical laws is in the spirit of this aesthetics-parsimonious specification supporting complex phenomena.” Shape grammar is a design method based on form computation. A designer can logically analyse the formal properties and generating mechanism of a design. The designer can use a shape grammar to analyse the design of another designer and to generate all kinds of creative designs. This design theory and method provide a theoretical framework of generative grammar. A generative grammar regards design as a problem-solving process, and generalizes human thinking as rational thinking
287
International Conference on Computers in Education 2004 with logical inferences. The generative mechanism can rapidly produce alternative designs so that a designer can evaluate them and choose those that fit aesthetics or other criteria. Shape grammars have been used in various fields such as painting sculpture, architecture, design education, engineering design, and product design (Gips, 1999). People who develop or use a shape grammar face only two choices: either simulate the shape grammar by hand or use a program on a digital computer. For teaching purposes, computer implementations may not be as effective as hand application of grammars. Hand applications of rules require careful thinking about how rules work. This results in a better understanding of grammar. Computer implementations of grammars can encourage mindless defining and testing of rules. On the other hand, there are overwhelmingly strong reasons for having computer implementations, which are good demonstration tools for showing novices the range and power of shape grammars. They can allow students and designers who do not wish to deal with the technicalities of grammars, to develop or use shape grammars with success (Knight, 2000). Some computer implementations of shape grammars are specially built for particular objects, e.g. coffee maker grammar (Agarwal and Cagan 1998) and do not work for the design of other objects. Some computer implementations, for example, Gedit (Tapia 1996) and 3D Shaper (Wang 1999), were experimented for class learning, but they had a number of drawbacks, including the lack of real time response, interactivity, and friendly interface. Moreover, these systems use too many rules, which lead to a huge number of possible designs and learners might find it difficult to trace each step. For his Master’s thesis, McGill (2001) developed Shaper2D as a tool to help design students to learn shape grammar. He conducted three experiments to study in what ways students would find Shaper2D helpful as a learning tool. In the first and second experiments, after the students attended an introductory lecture on shape grammar, they first did a shape grammar exercise by hand and then another exercise with Shaper2D. Overall, the students claimed that it was important to learn shape grammars by using Shaper2D before hand computation in order to understand the related concepts fully. The third experiment aimed to investigate whether Shaper2D can be used as a practical design tool in addition to its use as a pedagogical tool. Many students were happy with the fast response of Shaper2D because they could explore a lot of possible designs, especially at the beginning of the design process. However, there are some drawbacks in using Shaper2D. First, Shaper2D could not display the site map on which the building design should actually be located. Second, Shaper2D could not trace derivation and could not show the derivation process. If Shaper2D could provide the function of tracing the derivation process, the learners would understand how basic shape grammar derives the design step by step. Then they might learn the reasoning method of basic shape grammar without going through the slow process of hand application of grammar rules. In any case, Shaper2D is used as a learning tool at MIT. MIT also uses another tool called 3D Shaper, which is not accessible to the public and is reported to have more drawbacks than Shaper2D (Website: http://www.mit.edu/~4.184/). Our system is constructed based on some general ideas of Shaper2D and aims to overcome some of its drawbacks and extend to 3D designs. In this system, a learner can work with 2D or 3D shapes and experiment rules with different spatial relation to explore many interesting designs interactively in real time on the Web. The system is implemented with SVG (Scalable Vector Graphics), which is XMLbased graphics. It is a platform for 2D graphics standard proposed by W3C (the World Wide Web Consortium). Key features include shapes, text and embedded raster graphics, with many different painting styles. It supports scripting languages such as JavaScript. Because SVG is XML-based, SVG graphics can easily be generated on Web servers "on the fly” with standard XML tools.
288
A Computational Environment for Learning Basic Shape Grammars
2. Shape Grammars There are different types of shape grammars, including basic grammars, nondeterministic basic grammars, sequential grammars, additive grammars, deterministic grammars, and unrestricted grammars (Knight, 1999). The first three types are generally used for teaching and classroom projects. The last three types are generalizations of the first three types. Our system is restricted to work with basic grammars. A basic shape grammar imposes restrictions on both rule format and rule ordering. For rule format, each rule generates a new labeled shape from an old one. Moreover, all rules are ordered and each rule must apply one similarity transformation to the labeled shape newly added by the previous rule application. In general, the development of a basic grammar follows four steps: • Shape: A shape is built with the basic geometric objects - point, line, face, or cube. • Spatial Relations: A spatial relation between shapes can be specified by their distance apart, angle of rotation and scaling factor. • Shape Rules: Each rule specifies how to transform a given shape to produce a new, similar shape according to their spatial relation. • Design: A design originating from an initial shape consists of a number of shapes, each of which is deduced with a grammar rule from a shape produced earlier. These steps are generally followed in the given temporal order, but the user has full control over each step and can make adjustment in each step any time she wants. The fundamental unit of a basic shape grammar is a shape (Figure 1a). The system provides two shapes (rectangle A and square B) and their spatial relation is denoted as A + B (Figure 1b). A shape rule specifies the original shape (A) on the left hand side and the spatial relation A + B on the right hand side. In order to allow the reflection transformation in a basic shape grammar, we need to add a label to each shape object (Figure 1c). The spatial relation between the labels of two shapes specifies the spatial relation between the two shapes unambiguously. These rules determine the geometric orientation of the newly generated shape objects. A rule can apply when the shape on the rule’s left hand side is similar (not necessarily congruent) to a newly generated shape. Two objects are similar if one can be obtained from the other by a series of translations, rotations, scaling, and reflections. Operation 1 applies rule 1 to the initial rectangle to add a square to the lower right end of the rectangle. Operation 2 applies rule 2 to the square to produce the second rectangle. After seven operations, the final design results. Some steps of the derivation process are show in Figure 1d. Spatial relation 1
Shape rule 1
Shape A Spatial relation2
Shape B
(a) Shapes
Rule 1
Operation 1
Shape rule 2
(b) Spatial relation
(c) Shape rules
Rule 1
Rule 2
Operation 2
Operation 3
Operation 7
(d) Design
Figure 1 Basic shape grammar
3. System Description and Demonstration The interface of our design system consists of three panels: two rule panels and one design panel, (Figure 2). A rule panel contains shapes, spatial relation and rules of a basic grammar. If the user inputs one rule, then only one rule panel is used. Otherwise, two panels will be used. 289
International Conference on Computers in Education 2004
Figure 2 User interface
3.1 Rule Panel Functions are provided in this panel in order to set the following: dimension, number of rules, active shapes, shape choice, scaling, translation, rotation and the location of label in a shape. First of all, the user decides if he wants to design in two or three dimensions (Figure 3). If 2D is selected, either shape S1 or shape S2 can be controlled. If 3D is selected, shapes S1 and S2 could be controlled individually or as a group. The user can choose to work with one rule or two rules. If the user works with only one rule, say A A + B, then A and B must be geometrically similar shapes for recursive applications of the rule. If two rules are used, say A A + B and C C + D, then the geometrically similarity of shapes B and C and that of shapes D and A are necessary for recursive applications of both rules. Shapes that become active will turn red while others will turn purple. Rectangle, square and triangle are shapes to be chosen to use in each rule in 2D. The user can scale the size of the active shape with a slider. Translation and rotation can be set with two sliders. The system will automatically hide or show the control widgets according to the user’s selected options. When the learner uses sliders to adjust shape relation, the system will show the adjustment value, the distance and the angles between the two shapes.
(a) 2D
(b)3D Figure 3. Design in 2D or 3D
The user can set the location of the label of a shape in the rule panel. The label of a shape can be located at any corner of the shape. Figure 4 shows the designs resulting from two different locations of the label of the shape B.
290
A Computational Environment for Learning Basic Shape Grammars
Rule
Design
Figure 4 Designs resulting from different label locations of B
3.2 Design Panel After the user sets up the rule(s) of a grammar, the system is ready to display the resulting design in the design panel. Functions are provided in this panel in order to do the following tasks: choose the number of iterations, trace a design, load background (site map) and scale the design. Moreover, the resulting design can be displayed without labels, if the user finds the labels distracting. The system also provides a trace function. During tracing, the designer can click a button to execute the next rule application and add one more shape to the design (Figure 5). Figure 6 shows a design on a background site map, which provides constraints the designer need to work with. The tools of zooming in and out, which is provided by SVG, can show both micro and macro views of the final design. Other functions include rotation and translation of the objects with orthogonal projection.
Figure 5 Tracing a design
Figure 6 Design on a site map
4. Conclusions We have presented a computer-assisted environment for learners of basic shape grammars. In this environment, a learner can work with 2D or 3D shapes and experiment rules with different spatial relations to explore many interesting designs interactively in real time on the Web. This learning environment adopts the general ideas of McGill’s Shaper2D and provides a number of additional features. First, it works with 3D designs. Second, it allows the user to manipulate and view the final design with transformations of scaling, translation and rotation with orthogonal projection. Third, it allows learners to trace the design derivation process. Showing the derivation step by step is a very useful function for learners to comprehend the reasoning mechanism of basic shape grammar. Using SVG is an important strategic decision since its powerful built-in features facilitate the implementation of the learning environment, when compared to tools such as Java, which was used to implement Shaper2D.
Acknowledgement This project is supported by the Nation Science Council (NSC 93-2520-224-001) and NSC’s National Science and Technology and Program for E-learning (NSC 93-2524-S-224-001). 291
International Conference on Computers in Education 2004
Reference List Agarwal, M. & Cagan, J. 1998, ”A blend of different tastes: the language of coffeemakers”, Environment and Planning B: Planning and Design, vol. 25, p. 205 – 226. Gips, J. 1999, "Computer Implementation of Shape Grammars", invited paper, Workshop on Shape Computation, MIT. KevLinDev, http://www.kevlindev.com/index.htm Knight, T. W. 1999, “Shape grammar: six types”, Environment and Planning B: Planning and Design, vol.26, p.15-31. Knight, T. W. 1999, “Application in architectural design, and education and practice”, Report for the NSF/MIT Workshop on Shape Computation. Knight, T. W. 2000, “Shape grammars in education and practice: history and prospects”, on line paper, http://www.mit.edu/~tknight/IJDC/ March, L. & Stiny, G. 1985, “Spatial systems in architecture and design: some history and logic”, Environment and Planning B: Planning and Design, vol. 12, p.31-35. McGill, M. C. 2001, ”A Visual Approach for Exploring Computational Design”, S. M. Arch. S., Department of Architecture, Massachusetts Institute of Technology, Cambridge, Ma, USA. MIT/Miyagi Remote Collaborative Workshop: Computational Design for Housing, http://www.mit.edu/~4.184/ Stiny, G. 1980, “Introduction to shape grammars”, Environment and Planning B: Planning and Design, vol.7, p. 343-351. Stiny, G. & Gips, J. 1972, “Shape Grammars and the Generative Specification of Painting and Sculpture”, The Best Computer Papers of 1971, p.125-135 Tapia, M. 1999, “A Visual Implementation of a Shape Grammar System”, Environment and Planning B: Planning and Design, vol. 26, p.59-73.
292
