Difference between revisions of "Euler line source code"
From JSXGraph Wiki
A WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
| Line 59: | Line 59: | ||
===JSXGraph code=== | ===JSXGraph code=== | ||
| − | <source lang=" | + | <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> | ||
| + | ... | ||
| + | <div id="box_euler_line" class='jxgbox' style='width:600px; height:600px;'></div> | ||
| + | <script type='text/javascript'> | ||
</source> | </source> | ||
| − | |||
<source lang="javascript"> | <source lang="javascript"> | ||
var board = JXG.JSXGraph.initBoard('jxgbox', { | var board = JXG.JSXGraph.initBoard('jxgbox', { | ||
| Line 114: | Line 125: | ||
strokeColor:'#901B77' | strokeColor:'#901B77' | ||
}); | }); | ||
| + | </source> | ||
| + | <source lang="html4strict"> | ||
</source> | </source> | ||
| Line 119: | Line 132: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
| + | </script> | ||
| + | </body> | ||
| + | </html> | ||
</source> | </source> | ||
[[Category:Examples]] | [[Category:Examples]] | ||
Revision as of 14:22, 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'
});
JessieCode code
</script>
</body>
</html>
