Difference between revisions of "Euler line source code"

From JSXGraph Wiki
Jump to: navigation, search
(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...")
 
(JessieCode code)
 
(4 intermediate revisions by the same user not shown)
Line 3: Line 3:
 
The final construction looks like this
 
The final construction looks like this
  
<jsxgraph width="600" height="600">
+
<jsxgraph width="400" height="400">
    JXG.Options.text.fontSize = 20;
 
 
     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 60: Line 59:
 
===JSXGraph code===
 
===JSXGraph code===
  
 +
<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 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 lang="html4strict">
 +
</script>
 +
</body>
 +
</html>               
 
</source>
 
</source>
  
 
===JessieCode code===
 
===JessieCode code===
 +
 +
The same 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'
 +
    >>;
 
</source>
 
</source>
 +
<source lang="html4strict">
 +
</script>
 +
</body>
 +
</html>               
 +
</source>
 +
 +
[[Category:Examples]]

Latest revision as of 09:28, 9 July 2013

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 same 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>