- Email: [email protected]
User-interface of a tool for learning geometry
Pergamon
0360-1315(94)00055-7
USER-INTERFACE
Computers Educ. Vol. 24, No. I, pp. 59-66. 1995 Copyright © 1995 Elsevier Science Ltd Printed in Great Britain. All rights reserved 036(}-1315/95 $9.50 + 0.00
OF A TOOL FOR LEARNING GEOMETRY
KAZUYOSHI HIDAKA Tokyo Research Laboratory, IBM Japan, Ltd, 1623-14, Shimotsuruma, Yamoto-shi, Kanagawa-ken 242, Japan [Fax. 81 462 73 7413]
(Received 25 October 1993; accepted 14 October 1994) Abstract--This paper proposes new techniques for researchers and developers of drawing systems, especially software for learning and teaching geometry. The techniques allow them to draw geometric figures precisely by using geometric constraints, and to change constrained figures directly. Complicated figures can be easily manipulated by using an interactive, direct, and highly-graphical approach that is realized by a combination of control points and constraint buttons and by graphical tools such as a constrained marker, an electronic protractor, and an electronic divider. The techniques had been implemented as graphical user-interfaces of a micro-world for learning geometry (named GeoBlock). We observed how GeoBlock was used in classrooms and were convinced that students and teachers in junior and senior high schools could draw constrained figures easily by using it.
1. INTRODUCTION Easy to use interfaces must be provided to allow novice users such as students and teachers in junior and senior high-schools to draw and change geometric figures with complex conditions. The facility to draw and change lines of such geometric figures precisely is a goal of our research and development work. A wide variety of programs are available for drawing figures on computers. However, they are not suitable for use in schools, especially in the study of geometry, because they do not allow the user to manipulate geometric structures directly. We need techniques for directly defining geometric relations (constraints) among points and lines, drawing lines and points precisely on the basis of such relations, and changing figures while preserving these geometric relations, simply by graphical and direct manipulation with a mouse. For example, we want to provide an easy to use interface for a user who wants to draw a line that is inclined at an angle of 30° to an exisitng line on the display, whose inclination relative to the horizontal is not known to the user. It is also possible to draw such a line in constraint-based systems or interactive illustration systems. In contraint systems, however, these geometric relations can only be defined by using !text input, which is a difficult and non-graphical way, and conditions for constraints cannot be changed interactively and graphically. In interactive illustration systems, one-time precise positioning may be done, but the inability to redraw figures while preserving geometric conditions requires users to do additional work. Since the work of Sutherland [1] much research has been done on direct manipulation of figures and and geometric constraints; examples include ThingLab [2,3] and Juno [4]. Systems based on variational geometry [5,6] and rule-based systems [7,8] have been developed for the design land modification of mechanical parts. Pointing devices and bit-map displays are commonly usedi for the user interfaces of these systems, but there is no general consensus on what constitutes a good interface for direct manipulation of geometric figures under geometric constraints in these w~rks. In interactive illustration systems using computers, such as MacDraw, points and lines are precisely drawn on rectangular grids. However, a user cannot draw lines with specified geometric parameters. For example, much work is needed just to draw a segment inclined at 30° to the horizontal line. That technique was enhanced by using flexible grids made with lay lines in the work of Bier and Stone [9]. The enhancement is known as the "snap-dragging" technique. Snap-dragging allows precise drawing of lines that can be drawn with ruler and compass. A relocated graphic object can also be aligned with an existing line. 59
60
Kazuyoshi Hidaka
(a)
(b)
Line B Base line '\
Electronic protractor / ~ " (E.P.)
Line B ,o
Line A Base ~
n
~
~
The base line of E.P. is parallel to line A after line A is clicked.
The base line of E.P. is parallel to the display's horizontal line.
(d)
(c) ~~¢ ~:~;,~,~\ " ~ Line
jf~,,
i
B
," ~T
•
Col strained marker (C.M.)
A
If line A is changed, line B is automatically changed so that it is parallel to line A.
The length of line B can be changed by dragging the C.M., preserving line B's inclination to line A.
Fig. 1. Screen showing use of the electronic protractor (E.P.) and constrained marker (C.M.).
However, snap-dragging requires a user to define gravity-active alignment lines and points of intersection of these lines as grid-points, before one draws a line. The user must find the specific values of the slope and length to set a lay line unaided. For example, to construct a line B parallel to a line A, the user must (1) measure the slope of line A (let us say 53.1°), (2) add this value to the menu for alignment and (3) activate alignment line for this inclination. We have developed a tool for learning geometry called GeoBlock, which runs on personal computers [10,11]. In GeoBlock, to construct the same figure, the user first pushes the button icon on the display for setting the inclination. The system then shows an electronic protractor on the display to define the inclination to the display's horizontal line [Fig. l(a)]. Next, the user clicks line A. The system then automatically changes and redraws the electronic protractor to define the inclination to line A [Fig. l(b)]. By using this electronic protractor, the user sets the exact inclination of line B to that of line A, even if the inclination of A (53.1 °) is unknown. The possible inclinations include parallel (0 or 180°) and perpendicular (90 or -90°), any discrete values such like 10, 15, 30, or 45 ° (the user can change the value by changing the gradations of the electronic protractor), and the values defined by other existing lines such as "two-thirds the value of angle EFG". In any case, the user can construct the parallel line B interactively with highly visual support on the display without operations inessential to the current work. Moreover, whereas the constraints are forgotten as soon as figures have been drawn in snapdragging, they are preserved in GeoBlock. In this example, if the inclination of line A is changed, line B can be automatically redrawn so that B is parallel to A again [Fig. l(c)]. Furthermore, the length of B has not been designated, so the user can easily change the length of B by simply dragging the end-point of B, preserving the inclination of B to A. This operation
61
User interface of a tool for learning geometry Geoblock
Mainmenu
Vahacli3tareaLSTU~90"OO°LuvsLTUV ~.90.00 °9000° ~
~.
~
~
/ ~ /
/
n
Drawingarea
T /'~/\V /
Unit bar
' b a: "5,
Screen of Geoblock showing constraint buttons
1-Release,2-1ink,3-intersection,4-tangent,5-slope 6-dividingpoint, 7-online,8-perpendicular,9-angle, 1O-length. Fig, 2
on a constrained object can be done by using a "constrained marker", which moves along line B following the mouse pointer [Fig. l(d)]. We emphasize that the graphical and direct definition or change of constrained graphics objects distinguishes GeoBlock from other systems. In other systems, relations among objects are always defined either by text or commands or by graphical operations. In the latter case, this is done indirectly through display coordinates. In snap-dragging, the inclinations of the lines A and B are defined separately relative to the display's horizontal line, whereas GeoBlock's techniques enable a user to define the inclination of line B to line A directly. 2. G E O B L O C K D R A W I N G PROCESS GeoBlock provides a geometric micro-world in which students become familiar with geometric concepts, assimilate theorems, and acquire the ability to reason geometrically through direct manipulation and observation of geometric figures. It is a system that enables a user to construct, change, and observe geometric figures directly and interactively under geometric constraints. In GeoBlock, it is possible to draw a line that has a specified length or inclination and to select as its start or end point a point dividing another segment in any ratio, a point of intersection of a segment and a segment, a segment and a circle, or a circle and a circle, or a vertex of a triangle or other polygon. There are easy ways of drawing a tangent to a circle, a perpendicular from a point to a line, a perpendicular bisector, a parallel line, and a line dividing an angle in any ratio, such as a bisector or trisector.
2.1. Overview of methods for drawingfigures Figure 2 shows the initial screen of GeoBlock. In GeoBIock, a figure is called "a block", because it can include or be included in other figures. All operations are done with the mouse. After selecting a primitive-block icon, the user can draw a corresponding primitive block (pOint, segment, triangle, polygon, or circle) in the "Drawing Area" by designating its control points. When a segment is being drawn, the starting and ending points are control points. All control points are labeled with alphabetic characters.
62
Kazuyoshi Hidaka
(a)
(b)
Movable m
Not selected Ending point
Selected
Selected /
Selected c P partner
Unmovable l~Not
selected
Partner
Segment
Selected Starting point Selected C.P. partner Representation of the control point (C.P.) on the display.
If the ending point is selected, the starting point is designated as the selected C,P. partner,
Fig. 3. Control points on the display.
While defining the control points of each figure (block), the user can set various geometric constraints to the control point that is currently selected, simply by clicking the constraint button. When a control point with some geometric constraints is selected, the corresponding constraint button is highlighted. The positions of all control points are calculated immediately when a control point or block is relocated or the geometric constraints of a control point are changed. The process of reforming all blocks while preserving geometric constraints is displayed continuously in animation.
2.2. Representation of control points Figure 3(a) shows the markers of control points. Constraints are set to the selected control points. A "movable control point" can be dragged with a mouse while preserving constraints, whereas an "unmovable one" cannot. Some control points depend on others for definition of their geometric constraints. For example, to set inclination constraints to a control puint, the starting point of the segment whose inclination is to be defined must be designated. For smooth setting of constraints, such a control point (starting point) is automatically selected and represented as a selected control point partner [Fig. 3(b)].
2.3. Setting ratio, length, and inclination constraints Figure 4(a) shows how to draw the segment DE whose inclination to segment BC is the same as the value of angle ABC, whose length is 1/2 AB; and which starts from the midpoint of segment BC (D is the midpoint of segment BC). As a result, the point E is located exactly on the midpoint of segment AC. Triangle ABC has been previously drawn on the display freely, and all the length and inclination values of segments, e.g. the length of AB, and the angle ABC are unknown to the user. The same figure can be obtained by the simple approach of connecting the midpoints of segments BC and CA. In learning geometry or illustrating complicated figures, users need to be able to draw figures in various ways. Here, we take the more complicated approach in order to explain the drawing functions in detail.
User interface of a tool for learning geometry (a)
(b)
A
63
A
D is dragged exactly on BC. The constraint button can be clicked to set the ratio of BD:DC.
D is located at the midpoint of BC. DE is half the length of AB, and is parallel to AB.
(d)
(c) I :Up
¥ :Down
A
Electronic divider \
PI E
Control panel Control panel for setting the ratio of the dividing point.
B Electronic divider enables a user to make DE half the length of AB.
Fig. 4. Setting ratio a n d length constraints.
First, the user clicks the icon for drawing a segment and clicks again on the drawing area. The starting point of a new segment (labeled "D") then appears. This point D is a control point, and moves freely on the display when it is dragged with the mouse. After locating this point D on the segment BC and clicking the constraint button for "dividing point" [Fig. 4(b)], the user displays the control panel for changing the ratio [Fig. 4(c)]. By pushing buttons on the control panel, the user can change the ratio or the interior/exterior mode. The point D can be located exactly at whatever discrete position on BC the user wishes to set, such as at a point dividing BC in the ratio 1/2, 2/3, or 3/5. After setting the point D, one more mouse-click on the display causes the end point of a segment to appear with the label E, and segment DE is then drawn. Here, the length of segment DE is set as 112 the length of the reference segment AB. When the constraint button for length is clicked, an electronic divider and its control panel appear on the display [Fig. 4(d)]. The divider is parallel to the segment selected to be drawn (DE), and its starting point is located on the starting point of this segment (D), to set the length constraints using segment AB as a reference unit, the user must click AB. The electronic divider has large graduations (P1, P2 .... ) and small graduations (pl, p2 .... ). The distance between adjacent large graduations (P1-P2) is the same as the length of segment AB, because the user has selected AB as the reference segment. The distance between a small graduation (such as p l) and an adjacent large graduation (P1) is half the length of segment AB. The user can select any position for a large or small graduation by dragging the constrained marker cursor of the electronic divider. By selecting the position of the graduation as pl, P1, p2, or P2, the user can set the length of DE as 0.5, 1, 1.5, or 2 times the length of the reference segment AB, respectively. By pushing the "up" or "down" button, the user can change the ratio and the positions of;the small graduations. In this way, the user can set the length of the segment as any number of times the length of the reference segment, without a measure the length of the reference segment. By using the electronic protractor described in Section 1, the user sets the inclination of DE to BC. In this case, the user enters the key-word "ABC" in the panel, to set the value of angle ABC. CAt 24:1-E
64
Kazuyoshi Hidaka
(a)
A point of intersection can be designated by clicking the constraint button for intersection after locating the selected C.P. on the target intersection point.
(b)
Making a line tangent to a circle. A circle also can be made to touch a segment.
Ce
(c)
Making a line perpendicular to a segment.
Fig. 5. S e t t i n g i n t e r s e c t i o n , t a n g e n t , a n d p e r p e n d i c u l a r c o n s t r a i n t s .
2.4. Intersections, tangents, and perpendiculars After locating the selected control point on a point of intersection of (1) a segment and a segment, (2) a segment and a circle, or (3) a circle and a circle, the user can define it as a point of intersection [Fig. 5(a)]. If the selected control point is an end point of a segment and is located on a circle, clicking the "tangent" button makes this segment a tangent to the circle. The tangent passes through the starting point of the segment [Fig. 5(b)]. When the end point of a segment is located on another segment, clicking the "perpendicular" button makes the first segment perpendicular to the second one [Fig. 5(c)]. In all cases, the constraints are set to the selected control point (the ending point of the segment) and the starting point is used as the selected control point partner. 3. M A N I P U L A T I O N OF C O N S T R A I N E D F I G U R E S
3.1. Control point types Control points are classified into ten types according to the geometric constraints to be set. These are: (1) A point defined by the absolute values of coordinates. (2) A point located exactly on an existing point (such as a vertex). (3) An intersection of two lines. (4) An intersection of a line and a circle. (5) An intersection of two circles. (6) A point that is located on a segment and divides it in a certain ratio. (7) A point that is located on a circle and divides this circle in a certain ratio. (8) A point that is located on a line crossing another line at point P at a specific crossing angle, and that is at a certain distance from E (9) A point that is located on a line and is used as the starting point of another line perpendicular to the first. (10) A point at which a tangent touches a circle.
User interfaceof a tool for learninggeometry
65
Table 1. Controlpoint table Control Point ID
Type
Label
x-y value
PI P2 P3 P4
I 1 1 6
A B C D
(xpl ,ypl ) (xp2,yp2)
P5
8
E
(xp5,yp5)
(xp3,),p3) (xp4,yp4)
Items
OBJ 1 RAT1 OBJ2 P4 ANGI LEN1
Table 2. Lengthtable Length ID
Type
Value
Items
LENI
GEN.
lengthl
P2, P3, RAT2
i~ENk
ABs.
lenk
3.2. Representation and calculation of geometric data Table 1 shows control points of figures in Fig. 4(a). In this table, OBJ1 or OBJ2 means segment AB or BC respectively, RAT1 is 0.5, ANG1 is defined as angle ABC, and LEN1 is defined as length of AB. For example, P5 is a control point of type 8, labeled "E", located on the line that crosses OBJ2 (segment BC) at point P4 (a control point "D") at inclination of ANG1 (the angle value of ABe3). From point P4, the distance of P5 is LEN1 defined in the length table (Table 2). There are ldwo types of length in the length table: an absolute one (ABS) and a generative one (GEN). The absolute type has the absolute value of the length, and the generative one is composed of two control points and one ratio identification number. By using this table, the length of LEN1 is produced by multiplying the distance between P2 and P3 by the value of RAT2(0.5). The angle values are registered in the angle-value table in the same manner. When the location of PI, P2, or P3 is changed, the system calculates the new values of the X-Y coordinates of P4 and P5 and re-draws the blocks PI-P2-P3 (triangle ABC) and P4-P5 (segment DE). The generative-type geometric values enable the system to represent the geometric constraints among objects and calculate positions of all constrained control points.
3.3. Highly visual operations Constraints can be set to the control points not only when figures are initially drawn but also after the figures have been completely drawn. The parameter values in geometrical data that define constraints can be changed graphically. For example, the length of a segment with only inclination constraints can be changed, the inclination of a segment with only length constraints can be changed, and the location of a star~ing point of a segment with on-the-line constraints can be changed (Fig. 6). These operations are performed by simply dragging the constrained marker. Lines and points can be relocated or erased on condition that the operation does not contravene the geometric constraints. The system checks the object relations every time the user manipulates geometric objects, and does not allow manipulations that contravene the current geometric constraints. For example, in Fig. 4(a), triangle ABC cannot be erased because it is used in the data that constrain segment DE. If these constraints are released, triangle ABC can be erased by clicking it and then clicking the menu item for erasing objects.
66
Kazuyoshi Hidaka / / /
J
:;S
| I
Inclination constraints
Length constraints
On-the-line constraints
A movable control point can be moved while preserving constraints by mouse-dragging.
Fig. 6
4. C O N C L U S I O N S
We have developed an easy method for drawing lines and points precisely by using geometric constraints and for changing constrained geometric figures. Complicated figures can be easily manipulated by using an interactive, direct, and highly-graphical approach that is realized by a combination of control points and constraint buttons and by graphical tools such as a constrained marker, an electronic protractor, and an electronic divider. We observed how it was used in classrooms [12,13] and were convinced that novice users (students and teachers in junior and senior high schools) could draw constrained figures easily by using GeoBlock. These techniques were developed for novice users of software for learning geometry. We believe, however, that the problems solved by this system are very general, and that our approach can be adopted in CAD systems or interactive illustration systems. Acknowledgements--We wish to thank Fumiyuki Terada (Waseda University), Muneaki Sasaki (Takehaya junior high school), Takeshi Ise, Katsuki Suzuki (Hakodate-Kita junior high school), Hideo Sawamori, Toshiyuki Inoue (Shimonaga junior high school), Masahiro Udo, Toshiyuki Sanuki, Yasutomo Nakayama, and Masanori Akaishi (IBM Japan), for useful discussions during the development of the system.
REFERENCES 1. Sutherland I. E., Sketchpad: a man-machine graphical communication system. Lincoln Laboratory Technical Report No. 296, Massachusetts Insitute of Technology (1963). 2. Borning A., The programming language aspects of ThingLab, constraint-oriented simulation laboratory. ACM Trans. Programm. Lang. Syst. 3, 353-387 (1981). 3. Borning A., Graphically defining new building blocks in ThingLab. Human-Computer Interaction, Vol. 2, pp. 269-295. Erlbaum, N.J. (1986). 4. Nelson G., Juno: a constraint-based graphics system. SIGGRAPH Computer Graph. 19, 235-243 (1985). 5. Light R. A., Symbolic dimensioning in computer-aided design. M.S. thesis, Massachusetts Institute of Technology (1980). 6. Lin V. C., Gossard D. C. and Light R. A., Variational geometry in computer-aided design. Computer Graph. 15, 171 177 (1981). 7. Arbab F. and Wing J. M., Geometric reasoning: a new paradigm for processing geometric information. Design Theory for CAD. International Federation for Information Processing (1987). 8. Inui M. and Kimura K, Geometric constraint solving for constructing geometric models. Proceedings of Graphics and CAD Symposium, pp. 181-190. Information Processing Society of Japan (1988). 9. Bier E. A. and Stone M. C., Snap dragging. SIGGRAPH Computer Graph. 20, 233-240 (1986). 10. Hidaka K., A tool for learning geometry. J. Sci. Educ. Jap. 14, No. 2 (1990). 11. Hidaka K., Development of GeoBlock: a micro-world for learning and teaching geometry. Lecture Notes in Computer Science. No. 602, pp. 294-306. Springer, New York (1992). 12. Sasaki M., A practical use of a computer in mathematics education. Tokyo Gakugei J. Math. Educ. 3, 87 97 (1991). 13. Ise T., Application softwares in classrooms., Research Report No. 3, pp. 19-25. Information and Research Center for Educational Software (1991).
0360-1315(94)00055-7
USER-INTERFACE
Computers Educ. Vol. 24, No. I, pp. 59-66. 1995 Copyright © 1995 Elsevier Science Ltd Printed in Great Britain. All rights reserved 036(}-1315/95 $9.50 + 0.00
OF A TOOL FOR LEARNING GEOMETRY
KAZUYOSHI HIDAKA Tokyo Research Laboratory, IBM Japan, Ltd, 1623-14, Shimotsuruma, Yamoto-shi, Kanagawa-ken 242, Japan [Fax. 81 462 73 7413]
(Received 25 October 1993; accepted 14 October 1994) Abstract--This paper proposes new techniques for researchers and developers of drawing systems, especially software for learning and teaching geometry. The techniques allow them to draw geometric figures precisely by using geometric constraints, and to change constrained figures directly. Complicated figures can be easily manipulated by using an interactive, direct, and highly-graphical approach that is realized by a combination of control points and constraint buttons and by graphical tools such as a constrained marker, an electronic protractor, and an electronic divider. The techniques had been implemented as graphical user-interfaces of a micro-world for learning geometry (named GeoBlock). We observed how GeoBlock was used in classrooms and were convinced that students and teachers in junior and senior high schools could draw constrained figures easily by using it.
1. INTRODUCTION Easy to use interfaces must be provided to allow novice users such as students and teachers in junior and senior high-schools to draw and change geometric figures with complex conditions. The facility to draw and change lines of such geometric figures precisely is a goal of our research and development work. A wide variety of programs are available for drawing figures on computers. However, they are not suitable for use in schools, especially in the study of geometry, because they do not allow the user to manipulate geometric structures directly. We need techniques for directly defining geometric relations (constraints) among points and lines, drawing lines and points precisely on the basis of such relations, and changing figures while preserving these geometric relations, simply by graphical and direct manipulation with a mouse. For example, we want to provide an easy to use interface for a user who wants to draw a line that is inclined at an angle of 30° to an exisitng line on the display, whose inclination relative to the horizontal is not known to the user. It is also possible to draw such a line in constraint-based systems or interactive illustration systems. In contraint systems, however, these geometric relations can only be defined by using !text input, which is a difficult and non-graphical way, and conditions for constraints cannot be changed interactively and graphically. In interactive illustration systems, one-time precise positioning may be done, but the inability to redraw figures while preserving geometric conditions requires users to do additional work. Since the work of Sutherland [1] much research has been done on direct manipulation of figures and and geometric constraints; examples include ThingLab [2,3] and Juno [4]. Systems based on variational geometry [5,6] and rule-based systems [7,8] have been developed for the design land modification of mechanical parts. Pointing devices and bit-map displays are commonly usedi for the user interfaces of these systems, but there is no general consensus on what constitutes a good interface for direct manipulation of geometric figures under geometric constraints in these w~rks. In interactive illustration systems using computers, such as MacDraw, points and lines are precisely drawn on rectangular grids. However, a user cannot draw lines with specified geometric parameters. For example, much work is needed just to draw a segment inclined at 30° to the horizontal line. That technique was enhanced by using flexible grids made with lay lines in the work of Bier and Stone [9]. The enhancement is known as the "snap-dragging" technique. Snap-dragging allows precise drawing of lines that can be drawn with ruler and compass. A relocated graphic object can also be aligned with an existing line. 59
60
Kazuyoshi Hidaka
(a)
(b)
Line B Base line '\
Electronic protractor / ~ " (E.P.)
Line B ,o
Line A Base ~
n
~
~
The base line of E.P. is parallel to line A after line A is clicked.
The base line of E.P. is parallel to the display's horizontal line.
(d)
(c) ~~¢ ~:~;,~,~\ " ~ Line
jf~,,
i
B
," ~T
•
Col strained marker (C.M.)
A
If line A is changed, line B is automatically changed so that it is parallel to line A.
The length of line B can be changed by dragging the C.M., preserving line B's inclination to line A.
Fig. 1. Screen showing use of the electronic protractor (E.P.) and constrained marker (C.M.).
However, snap-dragging requires a user to define gravity-active alignment lines and points of intersection of these lines as grid-points, before one draws a line. The user must find the specific values of the slope and length to set a lay line unaided. For example, to construct a line B parallel to a line A, the user must (1) measure the slope of line A (let us say 53.1°), (2) add this value to the menu for alignment and (3) activate alignment line for this inclination. We have developed a tool for learning geometry called GeoBlock, which runs on personal computers [10,11]. In GeoBlock, to construct the same figure, the user first pushes the button icon on the display for setting the inclination. The system then shows an electronic protractor on the display to define the inclination to the display's horizontal line [Fig. l(a)]. Next, the user clicks line A. The system then automatically changes and redraws the electronic protractor to define the inclination to line A [Fig. l(b)]. By using this electronic protractor, the user sets the exact inclination of line B to that of line A, even if the inclination of A (53.1 °) is unknown. The possible inclinations include parallel (0 or 180°) and perpendicular (90 or -90°), any discrete values such like 10, 15, 30, or 45 ° (the user can change the value by changing the gradations of the electronic protractor), and the values defined by other existing lines such as "two-thirds the value of angle EFG". In any case, the user can construct the parallel line B interactively with highly visual support on the display without operations inessential to the current work. Moreover, whereas the constraints are forgotten as soon as figures have been drawn in snapdragging, they are preserved in GeoBlock. In this example, if the inclination of line A is changed, line B can be automatically redrawn so that B is parallel to A again [Fig. l(c)]. Furthermore, the length of B has not been designated, so the user can easily change the length of B by simply dragging the end-point of B, preserving the inclination of B to A. This operation
61
User interface of a tool for learning geometry Geoblock
Mainmenu
Vahacli3tareaLSTU~90"OO°LuvsLTUV ~.90.00 °9000° ~
~.
~
~
/ ~ /
/
n
Drawingarea
T /'~/\V /
Unit bar
' b a: "5,
Screen of Geoblock showing constraint buttons
1-Release,2-1ink,3-intersection,4-tangent,5-slope 6-dividingpoint, 7-online,8-perpendicular,9-angle, 1O-length. Fig, 2
on a constrained object can be done by using a "constrained marker", which moves along line B following the mouse pointer [Fig. l(d)]. We emphasize that the graphical and direct definition or change of constrained graphics objects distinguishes GeoBlock from other systems. In other systems, relations among objects are always defined either by text or commands or by graphical operations. In the latter case, this is done indirectly through display coordinates. In snap-dragging, the inclinations of the lines A and B are defined separately relative to the display's horizontal line, whereas GeoBlock's techniques enable a user to define the inclination of line B to line A directly. 2. G E O B L O C K D R A W I N G PROCESS GeoBlock provides a geometric micro-world in which students become familiar with geometric concepts, assimilate theorems, and acquire the ability to reason geometrically through direct manipulation and observation of geometric figures. It is a system that enables a user to construct, change, and observe geometric figures directly and interactively under geometric constraints. In GeoBlock, it is possible to draw a line that has a specified length or inclination and to select as its start or end point a point dividing another segment in any ratio, a point of intersection of a segment and a segment, a segment and a circle, or a circle and a circle, or a vertex of a triangle or other polygon. There are easy ways of drawing a tangent to a circle, a perpendicular from a point to a line, a perpendicular bisector, a parallel line, and a line dividing an angle in any ratio, such as a bisector or trisector.
2.1. Overview of methods for drawingfigures Figure 2 shows the initial screen of GeoBlock. In GeoBIock, a figure is called "a block", because it can include or be included in other figures. All operations are done with the mouse. After selecting a primitive-block icon, the user can draw a corresponding primitive block (pOint, segment, triangle, polygon, or circle) in the "Drawing Area" by designating its control points. When a segment is being drawn, the starting and ending points are control points. All control points are labeled with alphabetic characters.
62
Kazuyoshi Hidaka
(a)
(b)
Movable m
Not selected Ending point
Selected
Selected /
Selected c P partner
Unmovable l~Not
selected
Partner
Segment
Selected Starting point Selected C.P. partner Representation of the control point (C.P.) on the display.
If the ending point is selected, the starting point is designated as the selected C,P. partner,
Fig. 3. Control points on the display.
While defining the control points of each figure (block), the user can set various geometric constraints to the control point that is currently selected, simply by clicking the constraint button. When a control point with some geometric constraints is selected, the corresponding constraint button is highlighted. The positions of all control points are calculated immediately when a control point or block is relocated or the geometric constraints of a control point are changed. The process of reforming all blocks while preserving geometric constraints is displayed continuously in animation.
2.2. Representation of control points Figure 3(a) shows the markers of control points. Constraints are set to the selected control points. A "movable control point" can be dragged with a mouse while preserving constraints, whereas an "unmovable one" cannot. Some control points depend on others for definition of their geometric constraints. For example, to set inclination constraints to a control puint, the starting point of the segment whose inclination is to be defined must be designated. For smooth setting of constraints, such a control point (starting point) is automatically selected and represented as a selected control point partner [Fig. 3(b)].
2.3. Setting ratio, length, and inclination constraints Figure 4(a) shows how to draw the segment DE whose inclination to segment BC is the same as the value of angle ABC, whose length is 1/2 AB; and which starts from the midpoint of segment BC (D is the midpoint of segment BC). As a result, the point E is located exactly on the midpoint of segment AC. Triangle ABC has been previously drawn on the display freely, and all the length and inclination values of segments, e.g. the length of AB, and the angle ABC are unknown to the user. The same figure can be obtained by the simple approach of connecting the midpoints of segments BC and CA. In learning geometry or illustrating complicated figures, users need to be able to draw figures in various ways. Here, we take the more complicated approach in order to explain the drawing functions in detail.
User interface of a tool for learning geometry (a)
(b)
A
63
A
D is dragged exactly on BC. The constraint button can be clicked to set the ratio of BD:DC.
D is located at the midpoint of BC. DE is half the length of AB, and is parallel to AB.
(d)
(c) I :Up
¥ :Down
A
Electronic divider \
PI E
Control panel Control panel for setting the ratio of the dividing point.
B Electronic divider enables a user to make DE half the length of AB.
Fig. 4. Setting ratio a n d length constraints.
First, the user clicks the icon for drawing a segment and clicks again on the drawing area. The starting point of a new segment (labeled "D") then appears. This point D is a control point, and moves freely on the display when it is dragged with the mouse. After locating this point D on the segment BC and clicking the constraint button for "dividing point" [Fig. 4(b)], the user displays the control panel for changing the ratio [Fig. 4(c)]. By pushing buttons on the control panel, the user can change the ratio or the interior/exterior mode. The point D can be located exactly at whatever discrete position on BC the user wishes to set, such as at a point dividing BC in the ratio 1/2, 2/3, or 3/5. After setting the point D, one more mouse-click on the display causes the end point of a segment to appear with the label E, and segment DE is then drawn. Here, the length of segment DE is set as 112 the length of the reference segment AB. When the constraint button for length is clicked, an electronic divider and its control panel appear on the display [Fig. 4(d)]. The divider is parallel to the segment selected to be drawn (DE), and its starting point is located on the starting point of this segment (D), to set the length constraints using segment AB as a reference unit, the user must click AB. The electronic divider has large graduations (P1, P2 .... ) and small graduations (pl, p2 .... ). The distance between adjacent large graduations (P1-P2) is the same as the length of segment AB, because the user has selected AB as the reference segment. The distance between a small graduation (such as p l) and an adjacent large graduation (P1) is half the length of segment AB. The user can select any position for a large or small graduation by dragging the constrained marker cursor of the electronic divider. By selecting the position of the graduation as pl, P1, p2, or P2, the user can set the length of DE as 0.5, 1, 1.5, or 2 times the length of the reference segment AB, respectively. By pushing the "up" or "down" button, the user can change the ratio and the positions of;the small graduations. In this way, the user can set the length of the segment as any number of times the length of the reference segment, without a measure the length of the reference segment. By using the electronic protractor described in Section 1, the user sets the inclination of DE to BC. In this case, the user enters the key-word "ABC" in the panel, to set the value of angle ABC. CAt 24:1-E
64
Kazuyoshi Hidaka
(a)
A point of intersection can be designated by clicking the constraint button for intersection after locating the selected C.P. on the target intersection point.
(b)
Making a line tangent to a circle. A circle also can be made to touch a segment.
Ce
(c)
Making a line perpendicular to a segment.
Fig. 5. S e t t i n g i n t e r s e c t i o n , t a n g e n t , a n d p e r p e n d i c u l a r c o n s t r a i n t s .
2.4. Intersections, tangents, and perpendiculars After locating the selected control point on a point of intersection of (1) a segment and a segment, (2) a segment and a circle, or (3) a circle and a circle, the user can define it as a point of intersection [Fig. 5(a)]. If the selected control point is an end point of a segment and is located on a circle, clicking the "tangent" button makes this segment a tangent to the circle. The tangent passes through the starting point of the segment [Fig. 5(b)]. When the end point of a segment is located on another segment, clicking the "perpendicular" button makes the first segment perpendicular to the second one [Fig. 5(c)]. In all cases, the constraints are set to the selected control point (the ending point of the segment) and the starting point is used as the selected control point partner. 3. M A N I P U L A T I O N OF C O N S T R A I N E D F I G U R E S
3.1. Control point types Control points are classified into ten types according to the geometric constraints to be set. These are: (1) A point defined by the absolute values of coordinates. (2) A point located exactly on an existing point (such as a vertex). (3) An intersection of two lines. (4) An intersection of a line and a circle. (5) An intersection of two circles. (6) A point that is located on a segment and divides it in a certain ratio. (7) A point that is located on a circle and divides this circle in a certain ratio. (8) A point that is located on a line crossing another line at point P at a specific crossing angle, and that is at a certain distance from E (9) A point that is located on a line and is used as the starting point of another line perpendicular to the first. (10) A point at which a tangent touches a circle.
User interfaceof a tool for learninggeometry
65
Table 1. Controlpoint table Control Point ID
Type
Label
x-y value
PI P2 P3 P4
I 1 1 6
A B C D
(xpl ,ypl ) (xp2,yp2)
P5
8
E
(xp5,yp5)
(xp3,),p3) (xp4,yp4)
Items
OBJ 1 RAT1 OBJ2 P4 ANGI LEN1
Table 2. Lengthtable Length ID
Type
Value
Items
LENI
GEN.
lengthl
P2, P3, RAT2
i~ENk
ABs.
lenk
3.2. Representation and calculation of geometric data Table 1 shows control points of figures in Fig. 4(a). In this table, OBJ1 or OBJ2 means segment AB or BC respectively, RAT1 is 0.5, ANG1 is defined as angle ABC, and LEN1 is defined as length of AB. For example, P5 is a control point of type 8, labeled "E", located on the line that crosses OBJ2 (segment BC) at point P4 (a control point "D") at inclination of ANG1 (the angle value of ABe3). From point P4, the distance of P5 is LEN1 defined in the length table (Table 2). There are ldwo types of length in the length table: an absolute one (ABS) and a generative one (GEN). The absolute type has the absolute value of the length, and the generative one is composed of two control points and one ratio identification number. By using this table, the length of LEN1 is produced by multiplying the distance between P2 and P3 by the value of RAT2(0.5). The angle values are registered in the angle-value table in the same manner. When the location of PI, P2, or P3 is changed, the system calculates the new values of the X-Y coordinates of P4 and P5 and re-draws the blocks PI-P2-P3 (triangle ABC) and P4-P5 (segment DE). The generative-type geometric values enable the system to represent the geometric constraints among objects and calculate positions of all constrained control points.
3.3. Highly visual operations Constraints can be set to the control points not only when figures are initially drawn but also after the figures have been completely drawn. The parameter values in geometrical data that define constraints can be changed graphically. For example, the length of a segment with only inclination constraints can be changed, the inclination of a segment with only length constraints can be changed, and the location of a star~ing point of a segment with on-the-line constraints can be changed (Fig. 6). These operations are performed by simply dragging the constrained marker. Lines and points can be relocated or erased on condition that the operation does not contravene the geometric constraints. The system checks the object relations every time the user manipulates geometric objects, and does not allow manipulations that contravene the current geometric constraints. For example, in Fig. 4(a), triangle ABC cannot be erased because it is used in the data that constrain segment DE. If these constraints are released, triangle ABC can be erased by clicking it and then clicking the menu item for erasing objects.
66
Kazuyoshi Hidaka / / /
J
:;S
| I
Inclination constraints
Length constraints
On-the-line constraints
A movable control point can be moved while preserving constraints by mouse-dragging.
Fig. 6
4. C O N C L U S I O N S
We have developed an easy method for drawing lines and points precisely by using geometric constraints and for changing constrained geometric figures. Complicated figures can be easily manipulated by using an interactive, direct, and highly-graphical approach that is realized by a combination of control points and constraint buttons and by graphical tools such as a constrained marker, an electronic protractor, and an electronic divider. We observed how it was used in classrooms [12,13] and were convinced that novice users (students and teachers in junior and senior high schools) could draw constrained figures easily by using GeoBlock. These techniques were developed for novice users of software for learning geometry. We believe, however, that the problems solved by this system are very general, and that our approach can be adopted in CAD systems or interactive illustration systems. Acknowledgements--We wish to thank Fumiyuki Terada (Waseda University), Muneaki Sasaki (Takehaya junior high school), Takeshi Ise, Katsuki Suzuki (Hakodate-Kita junior high school), Hideo Sawamori, Toshiyuki Inoue (Shimonaga junior high school), Masahiro Udo, Toshiyuki Sanuki, Yasutomo Nakayama, and Masanori Akaishi (IBM Japan), for useful discussions during the development of the system.
REFERENCES 1. Sutherland I. E., Sketchpad: a man-machine graphical communication system. Lincoln Laboratory Technical Report No. 296, Massachusetts Insitute of Technology (1963). 2. Borning A., The programming language aspects of ThingLab, constraint-oriented simulation laboratory. ACM Trans. Programm. Lang. Syst. 3, 353-387 (1981). 3. Borning A., Graphically defining new building blocks in ThingLab. Human-Computer Interaction, Vol. 2, pp. 269-295. Erlbaum, N.J. (1986). 4. Nelson G., Juno: a constraint-based graphics system. SIGGRAPH Computer Graph. 19, 235-243 (1985). 5. Light R. A., Symbolic dimensioning in computer-aided design. M.S. thesis, Massachusetts Institute of Technology (1980). 6. Lin V. C., Gossard D. C. and Light R. A., Variational geometry in computer-aided design. Computer Graph. 15, 171 177 (1981). 7. Arbab F. and Wing J. M., Geometric reasoning: a new paradigm for processing geometric information. Design Theory for CAD. International Federation for Information Processing (1987). 8. Inui M. and Kimura K, Geometric constraint solving for constructing geometric models. Proceedings of Graphics and CAD Symposium, pp. 181-190. Information Processing Society of Japan (1988). 9. Bier E. A. and Stone M. C., Snap dragging. SIGGRAPH Computer Graph. 20, 233-240 (1986). 10. Hidaka K., A tool for learning geometry. J. Sci. Educ. Jap. 14, No. 2 (1990). 11. Hidaka K., Development of GeoBlock: a micro-world for learning and teaching geometry. Lecture Notes in Computer Science. No. 602, pp. 294-306. Springer, New York (1992). 12. Sasaki M., A practical use of a computer in mathematics education. Tokyo Gakugei J. Math. Educ. 3, 87 97 (1991). 13. Ise T., Application softwares in classrooms., Research Report No. 3, pp. 19-25. Information and Research Center for Educational Software (1991).