Euler line source code: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(2 intermediate revisions by the same user not shown)
Line 64: Line 64:
   <title>Euler line with JSXGraph</title>
   <title>Euler line with JSXGraph</title>
     <link rel="stylesheet" type="text/css"  
     <link rel="stylesheet" type="text/css"  
           href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
           href="http://jsxgraph.org/distrib/jsxgraph.css" />
     <script type="text/javascript"  
     <script type="text/javascript"  
           src="http://jsxgraph.uni-bayreuth.de/latest/jsxgraphcore.js"></script>
           src="http://jsxgraph.org/latest/jsxgraphcore.js"></script>
</head>
</head>
<body>
<body>
    ...
<div id="box_euler_line" class='jxgbox' style='width:600px; height:600px;'></div>
<div id="box_euler_line" class='jxgbox' style='width:600px; height:600px;'></div>
<script type='text/javascript'>
<script type='text/javascript'>
Line 134: Line 133:
===JessieCode code===
===JessieCode code===


The smae example with JessieCode:
The same example with JessieCode:
<source lang="html4strict">
<source lang="html4strict">
<html>
<html>
Line 140: Line 139:
   <title>Euler line with JSXGraph</title>
   <title>Euler line with JSXGraph</title>
     <link rel="stylesheet" type="text/css"  
     <link rel="stylesheet" type="text/css"  
           href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
           href="http://jsxgraph.org/distrib/jsxgraph.css" />
     <script type="text/javascript"  
     <script type="text/javascript"  
           src="http://jsxgraph.uni-bayreuth.de/latest/jsxgraphcore.js"></script>
           src="http://jsxgraph.org/latest/jsxgraphcore.js"></script>
</head>
</head>
<body>
<body>
    ...
<script type='text/jessiecode'>
<script type='text/jessiecode'>
</source>
</source>
Line 199: Line 197:
         strokeColor:'#901B77'
         strokeColor:'#901B77'
     >>;
     >>;
</script>
</body>
</html>               
</source>
</source>
<source lang="html4strict">
<source lang="html4strict">

Latest revision as of 17:17, 24 June 2020

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.org/distrib/jsxgraph.css" />
    <script type="text/javascript" 
          src="http://jsxgraph.org/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 same example with JessieCode: 

<html>
<head>
   <title>Euler line with JSXGraph</title>
    <link rel="stylesheet" type="text/css" 
          href="http://jsxgraph.org/distrib/jsxgraph.css" />
    <script type="text/javascript" 
          src="http://jsxgraph.org/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>
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Euler_line_source_code&oldid=7009"