Euler line source code: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
| Line 3: | Line 3: | ||
The final construction looks like this | The final construction looks like this | ||
<jsxgraph width=" | <jsxgraph width="400" height="400"> | ||
var board = JXG.JSXGraph.initBoard('jxgbox', { | var board = JXG.JSXGraph.initBoard('jxgbox', { | ||
boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true | boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true | ||
| Line 127: | Line 127: | ||
</source> | </source> | ||
<source lang="html4strict"> | <source lang="html4strict"> | ||
</script> | |||
</body> | |||
</html> | |||
</source> | </source> | ||
===JessieCode code=== | ===JessieCode code=== | ||
The smae example with JessieCode: | |||
<source lang="html4strict"> | |||
<html> | |||
<head> | |||
<title>Euler line with JSXGraph</title> | |||
<link rel="stylesheet" type="text/css" | |||
href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" /> | |||
<script type="text/javascript" | |||
src="http://jsxgraph.uni-bayreuth.de/latest/jsxgraphcore.js"></script> | |||
</head> | |||
<body> | |||
... | |||
<script type='text/jessiecode'> | |||
</source> | |||
<source lang="javascript"> | <source lang="javascript"> | ||
$board.setView([-1.5, 2, 1.5, -1]); | |||
// Triangle ABC | |||
A = point(1, 0); | |||
B = point(-1, 0); | |||
C = point(0.2, 1.5); | |||
pol = polygon(A,B,C) << | |||
fillColor: '#FFFF00', | |||
borders: << | |||
strokeWidth: 2, | |||
strokeColor: '#009256' | |||
>> | |||
>>; | |||
// Perpendiculars and orthocenter i1 | |||
pABC = perpendicular(pol.borders[0], C); | |||
pBCA = perpendicular(pol.borders[1], A); | |||
pCAB = perpendicular(pol.borders[2], B); | |||
i1 = intersection(pABC, pCAB, 0); | |||
// Midpoints of segments | |||
mAB = midpoint(A, B); | |||
mBC = midpoint(B, C); | |||
mCA = midpoint(C, A); | |||
// Line bisectors and centroid i2 | |||
ma = segment(mBC, A); | |||
mb = segment(mCA, B); | |||
mc = segment(mAB, C); | |||
i2 = intersection(ma, mc, 0); | |||
// Circum circle and circum center | |||
c = circumcircle(A, B, C) << | |||
strokeColor: '#000000', | |||
dash: 3, | |||
strokeWidth: 1, | |||
center: << | |||
name: 'i_3', | |||
withlabel:true, | |||
visible: true | |||
>> | |||
>>; | |||
// Euler line | |||
euler = line(i1, i2) << | |||
dash:1, | |||
strokeWidth: 2, | |||
strokeColor:'#901B77' | |||
>>; | |||
</script> | |||
</body> | |||
</html> | |||
</source> | |||
<source lang="html4strict"> | |||
</script> | </script> | ||
</body> | </body> | ||
Revision as of 13:25, 25 October 2012
Here is the source code cited in the paper Interactive Geometry for the web and mobile devices by Matthias Ehmann, Michael Gerhäuser, Carsten Miller, Heiko Vogel, Alfred Wassermann (2012).
The final construction looks like this
JSXGraph code
<html>
<head>
<title>Euler line with JSXGraph</title>
<link rel="stylesheet" type="text/css"
href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript"
src="http://jsxgraph.uni-bayreuth.de/latest/jsxgraphcore.js"></script>
</head>
<body>
...
<div id="box_euler_line" class='jxgbox' style='width:600px; height:600px;'></div>
<script type='text/javascript'>
var board = JXG.JSXGraph.initBoard('jxgbox', {
boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true
});
// Triangle ABC
var A = board.create('point', [1, 0]),
B = board.create('point', [-1, 0]),
C = board.create('point', [0.2, 1.5]),
pol = board.create('polygon',[A,B,C], {
fillColor: '#FFFF00',
borders: {
strokeWidth: 2,
strokeColor: '#009256'
}
});
// Perpendiculars and orthocenter i1
var pABC = board.create('perpendicular', [pol.borders[0], C]),
pBCA = board.create('perpendicular', [pol.borders[1], A]),
pCAB = board.create('perpendicular', [pol.borders[2], B]),
i1 = board.create('intersection', [pABC, pCAB, 0]);
// Midpoints of segments
var mAB = board.create('midpoint', [A, B]),
mBC = board.create('midpoint', [B, C]),
mCA = board.create('midpoint', [C, A]);
// Line bisectors and and centroid i2
var ma = board.create('segment', [mBC, A]),
mb = board.create('segment', [mCA, B]),
mc = board.create('segment', [mAB, C]),
i2 = board.create('intersection', [ma, mc, 0]);
// Circum circle and circum center
var c = board.create('circumcircle', [A, B, C], {
strokeColor: '#000000',
dash: 3,
strokeWidth: 1,
center: {
name: 'i_3',
withlabel:true,
visible: true
}
});
// Euler line
var euler = board.create('line', [i1, i2], {
dash:1,
strokeWidth: 2,
strokeColor:'#901B77'
});
</script>
</body>
</html>
JessieCode code
The smae example with JessieCode:
<html>
<head>
<title>Euler line with JSXGraph</title>
<link rel="stylesheet" type="text/css"
href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript"
src="http://jsxgraph.uni-bayreuth.de/latest/jsxgraphcore.js"></script>
</head>
<body>
...
<script type='text/jessiecode'>
$board.setView([-1.5, 2, 1.5, -1]);
// Triangle ABC
A = point(1, 0);
B = point(-1, 0);
C = point(0.2, 1.5);
pol = polygon(A,B,C) <<
fillColor: '#FFFF00',
borders: <<
strokeWidth: 2,
strokeColor: '#009256'
>>
>>;
// Perpendiculars and orthocenter i1
pABC = perpendicular(pol.borders[0], C);
pBCA = perpendicular(pol.borders[1], A);
pCAB = perpendicular(pol.borders[2], B);
i1 = intersection(pABC, pCAB, 0);
// Midpoints of segments
mAB = midpoint(A, B);
mBC = midpoint(B, C);
mCA = midpoint(C, A);
// Line bisectors and centroid i2
ma = segment(mBC, A);
mb = segment(mCA, B);
mc = segment(mAB, C);
i2 = intersection(ma, mc, 0);
// Circum circle and circum center
c = circumcircle(A, B, C) <<
strokeColor: '#000000',
dash: 3,
strokeWidth: 1,
center: <<
name: 'i_3',
withlabel:true,
visible: true
>>
>>;
// Euler line
euler = line(i1, i2) <<
dash:1,
strokeWidth: 2,
strokeColor:'#901B77'
>>;
</script>
</body>
</html>
</script>
</body>
</html>
