Geometric constructions with JessieScript: Difference between revisions
From JSXGraph Wiki
No edit summary |
No edit summary |
||
| (14 intermediate revisions by 3 users not shown) | |||
| Line 7: | Line 7: | ||
! Construction !! Description | ! Construction !! Description | ||
|- | |- | ||
| A(1,1) || Point with name 'A' at | | A(1,1) || Point with name 'A' at position (1,1) | ||
|- | |- | ||
| | | ZY(0.5<nowiki>|</nowiki>1) || Point with name 'ZY' at position (0.5,1) | ||
|- | |- | ||
| ]AB[ || straight line through | | ]AB[ || straight line through points A and B | ||
|- | |- | ||
| [AB[ || ray through | | [AB[ || ray through points A and B, stopping at A | ||
|- | |- | ||
| ]AB] || ray through | | ]AB] || ray through points A and B, stopping at B | ||
|- | |- | ||
| [AB] || segment through | | [AB] || segment through points A and B | ||
|- | |- | ||
| g=[AB] || segment through | | 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 | | 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 31: | Line 31: | ||
The different elements have to be separated by semicolon. | 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 | |||
{| cellpadding="8" cellspacing="0" border="1" | |||
! 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=== | ===Example=== | ||
<jsxgraph width=" | <jsxgraph width="600" height="450" box="jxgbox" modules="JessieScript"> | ||
var cons1, cons2; | var board, cons1, cons2; | ||
board = JXG.JSXGraph.initBoard('jxgbox', {grid: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 58: | Line 71: | ||
===The JavaScript code=== | ===The JavaScript code=== | ||
<source lang=" | <source lang="javascript"> | ||
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); | |||
</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);