Euler line source code: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 59: Line 59:
===JSXGraph code===
===JSXGraph code===


<source lang="html4">
<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 13: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>
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Euler_line_source_code&oldid=5846"