Geometric constructions with JessieScript: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(10 intermediate revisions by 3 users not shown)
Line 7: Line 7:
! Construction !! Description
! Construction !! Description
|-
|-
| A(1,1)    || Point with name 'A' at the position (1,1)
| A(1,1)    || Point with name 'A' at position (1,1)
|-
|-
| ZY(0.5<nowiki>|</nowiki>1)    || Point with name 'ZY' at the position (0.5,1)
| ZY(0.5<nowiki>|</nowiki>1)    || Point with name 'ZY' at position (0.5,1)
|-
|-
| ]AB[    || straight line through the points A and B
| ]AB[    || straight line through points A and B
|-
|-
| [AB[    || ray through the points A and B, stopping at A
| [AB[    || ray through points A and B, stopping at A
|-
|-
| ]AB]    || ray through the points A and B, stopping at B
| ]AB]    || ray through points A and B, stopping at B
|-
|-
| [AB]    || segment through the points A and B
| [AB]    || segment through points A and B
|-
|-
| g=[AB]    || segment through the points A and B, named by 'g'
| g=[AB]    || segment through points A and B, named by 'g'
|-
|-
| k(A,1)    || circle with midpoint A and radius 1
| k(A,1)    || circle with midpoint A and radius 1
|-
|-
| k(A,B)    || circle with midpoint A through the point B on the circle line
| k(A,B)    || circle with midpoint A through point B on the circle line
|-
|-
| k(A,[BC])    || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
| k(A,[BC])    || circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
Line 36: Line 36:
! Element !! Description
! Element !! Description
|-
|-
| constr.points[i]    || take the i-th point of the construction 'constr'
| constr.points[i]    || take i-th point of the construction 'constr'
|-
|-
| constr.lines[i]    || take the i-th line (or rays or segement) of the construction 'constr'
| constr.lines[i]    || take i-th line (or rays or segement) of the construction 'constr'
|-
|-
| constr.circles[i]    || take the i-th circle of the construction 'constr'
| constr.circles[i]    || take i-th circle of the construction 'constr'
|-
|-
| constr.A    || take the element with name 'A' of the construction 'constr'
| constr.A    || take element with name 'A' of the construction 'constr'
|}
|}
===Example===
===Example===
<jsxgraph width="600" height="450" box="box">
<jsxgraph width="600" height="450" box="jxgbox" modules="JessieScript">
         var cons1, cons2;
         var board, cons1, cons2;
         board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});
         board = JXG.JSXGraph.initBoard('jxgbox', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});
          
          
         cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
         cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
Line 71: Line 71:
===The JavaScript code===
===The JavaScript code===


<source lang="xml">
<source lang="javascript">
<jsxgraph width="600" height="450" box="box">
var board, cons1, cons2;
        var cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});
        board = JXG.JSXGraph.initBoard('box', {grid:true, originX: 50, originY: 300, unitX: 50, unitY: 50, axis:true});
          
          
        cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
        cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");
          
          
        cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
        cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
        cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
        cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});
          
          
        cons1.X.strokeColor('black');
cons1.X.strokeColor('black');
        cons1.X.fillColor('#FFB90F');
cons1.X.fillColor('#FFB90F');
        cons1.X.shadow(true);
cons1.X.shadow(true);
        cons1.Y.visible(false);
cons1.Y.visible(false);
        cons2.l_2.strokeWidth(4);
cons2.l_2.strokeWidth(4);
        cons1.X.face('>');
cons1.X.face('>');
        cons1.X.size(8);
cons1.X.size(8);
        cons1.X.labelColor('#FFB90F');
cons1.X.labelColor('#FFB90F');
        cons2.k1.dash(2);
cons2.k1.dash(2);
</jsxgraph></source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Geometry]]
[[Category:Geometry]]

Latest revision as of 06:51, 16 September 2013

Easy JSXGraph constructions with geometric elements can be created by a mathematical syntax by using the function

board.construct(...);

Possible elements:

Construction Description
A(1,1) Point with name 'A' at position (1,1)
ZY(0.5|1) Point with name 'ZY' at position (0.5,1)
]AB[ straight line through points A and B
[AB[ ray through points A and B, stopping at A
]AB] ray through points A and B, stopping at B
[AB] segment through points A and B
g=[AB] segment through points A and B, named by 'g'
k(A,1) circle with midpoint A and radius 1
k(A,B) circle with midpoint A through point B on the circle line
k(A,[BC]) circle with midpoint A and radius defined by the length of the (not necessarily existing) segement [BC]
k_1=k(A,1) circle with midpoint A and radius 1, named by 'k_1'

The different elements have to be separated by semicolon.

The function returns an object with all the created elements so that afterwards properties can be set. The access works by

Element Description
constr.points[i] take i-th point of the construction 'constr'
constr.lines[i] take i-th line (or rays or segement) of the construction 'constr'
constr.circles[i] take i-th circle of the construction 'constr'
constr.A take element with name 'A' of the construction 'constr'

Example

The JavaScript code

var board, cons1, cons2;
board = JXG.JSXGraph.initBoard('box', {grid:true, boundingbox: [-1, 6, 11, -3], axis:true});
        
cons1 = board.construct("A(1,1);B(2,2.5);C(1,3);G(5,3);H(6,4);[GH];k(G,1);AB(5,-1);X(6,-1);Y(7,-2);k(Y,X);k(A,[BC]);k(B,[AC]);");
cons2 = board.construct("J(7,4);[GJ[;K(8,4);]GK[;L(2.4|5);f=[AC];k1=k(C,0.5);C_1(4|4);l_2=[BC]");
        
cons1.points[0].setProperty({face:'diamond',size:7,strokeColor:'#8B2252',fillColor:'#8B2252'});
cons1.circles[1].setProperty({strokeColor:'#BA55D3'});
cons2.J.setProperty({face:'triangleUp',size:8,strokeColor:'black',fillColor:'#EE82EE'});
cons2.lines[1].setProperty({strokeColor:'#32CD32',shadow:true});
        
cons1.X.strokeColor('black');
cons1.X.fillColor('#FFB90F');
cons1.X.shadow(true);
cons1.Y.visible(false);
cons2.l_2.strokeWidth(4);
cons1.X.face('>');
cons1.X.size(8);
cons1.X.labelColor('#FFB90F');
cons2.k1.dash(2);