Euler line source code: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) (Created page with "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 Was...") |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 4: | Line 4: | ||
<jsxgraph width="600" height="600"> | <jsxgraph width="600" height="600"> | ||
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 59: | Line 58: | ||
===JSXGraph code=== | ===JSXGraph code=== | ||
<source lang="html4"> | |||
</source> | |||
<source lang="javascript"> | <source lang="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' | |||
}); | |||
</source> | </source> | ||
Line 67: | Line 120: | ||
<source lang="javascript"> | <source lang="javascript"> | ||
</source> | </source> | ||
[[Category:Examples]] |
Revision as of 13:21, 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
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'
});