Difference between revisions of "Euler line"

From JSXGraph Wiki
Jump to navigationJump to search
 
(17 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<jsxgraph width="400" height="400" box="box">
 
<jsxgraph width="400" height="400" box="box">
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5], keepaspectratio:true});
+
    (function () {
  
brd.suspendUpdate();
+
        var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true});
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
 
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
 
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
 
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});
 
for(i=0;i<=2;i++) {
 
    pol.borders[i].setProperty('strokeColor:#009256');
 
}
 
  
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
+
        var cerise = {
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
+
                strokeColor: '#901B77',
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
+
                fillColor: '#CA147A'
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
+
            },
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
 
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
 
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
 
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
 
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
 
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
 
  
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
+
            grass = {
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
+
                strokeColor: '#009256',
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
+
                fillColor: '#65B72E',
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
+
                visible: true,
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
+
                withLabel: true
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
+
            },
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});
 
  
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
+
            perpendicular = {
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
+
                strokeColor: 'black',
c[0].setProperty('visible:false');
+
                dash: 1,
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});
+
                strokeWidth: 1,
 +
                point: JXG.deepCopy(cerise, {
 +
                    visible: true,
 +
                    withLabel: true
 +
                })
 +
            },
  
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
+
            median = {
brd.unsuspendUpdate();
+
                strokeWidth: 1,
 +
                strokeColor: '#333333',
 +
                dash:2
 +
            },
  
 +
            A = board.create('point', [1, 0], cerise),
 +
            B = board.create('point', [-1, 0], cerise),
 +
            C = board.create('point', [0.2, 1.5], cerise),
 +
            pol = board.create('polygon',[A,B,C], {
 +
                fillColor: '#FFFF00',
 +
                lines: {
 +
                    strokeWidth: 2,
 +
                    strokeColor: '#009256'
 +
                }
 +
            });
 +
 +
        var pABC, pBCA, pCAB, i1;
 +
        perpendicular.point.name = 'H_c';
 +
        pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
 +
        perpendicular.point.name = 'H_a';
 +
        pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
 +
        perpendicular.point.name = 'H_b';
 +
        pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
 +
        grass.name = 'H';
 +
        i1 = board.create('intersection', [pABC, pCAB, 0], grass);
 +
 +
        var mAB, mBC, mCA;
 +
        cerise.name = 'M_c';
 +
        mAB = board.create('midpoint', [A, B], cerise);
 +
        cerise.name = 'M_a';
 +
        mBC = board.create('midpoint', [B, C], cerise);
 +
        cerise.name = 'M_b';
 +
        mCA = board.create('midpoint', [C, A], cerise);
 +
 +
        var ma, mb, mc, i2;
 +
        ma = board.create('segment', [mBC, A], median);
 +
        mb = board.create('segment', [mCA, B], median);
 +
        mc = board.create('segment', [mAB, C], median);
 +
        grass.name = 'S';
 +
        i2 = board.create('intersection', [ma, mc, 0], grass);
 +
 +
        var c;
 +
        grass.name = 'U';
 +
        c = board.create('circumcircle',[A, B, C], {
 +
            strokeColor: '#000000',
 +
            dash: 3,
 +
            strokeWidth: 1,
 +
            center: grass
 +
        });
 +
 +
        var euler;
 +
        euler = board.create('line', [i1, i2], {
 +
            strokeWidth: 2,
 +
            strokeColor:'#901B77'
 +
        });
 +
board.update();
 +
    })();
 
</jsxgraph>
 
</jsxgraph>
  
 
===The JavaScript code===
 
===The JavaScript code===
  
<source lang="xml">
+
<source lang="javascript">
<jsxgraph width="500" height="400" box="box">
+
(function () {
brd = JXG.JSXGraph.initBoard('box', {boundingbox: [-2, 2, 2, -1.5], keepaspectratio:true});
+
 
 +
    var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true});
 +
 
 +
    var cerise = {
 +
            strokeColor: '#901B77',
 +
            fillColor: '#CA147A'
 +
        },
 +
 
 +
        grass = {
 +
            strokeColor: '#009256',
 +
            fillColor: '#65B72E',
 +
            visible: true,
 +
            withLabel: true
 +
        },
 +
 
 +
        perpendicular = {
 +
            strokeColor: 'black',
 +
            dash: 1,
 +
            strokeWidth: 1,
 +
            point: JXG.deepCopy(cerise, {
 +
                visible: true,
 +
                withLabel: true
 +
            })
 +
        },
 +
 
 +
        median = {
 +
            strokeWidth: 1,
 +
            strokeColor: '#333333',
 +
            dash:2
 +
        },
  
brd.suspendUpdate();
+
        A = board.create('point', [1, 0], cerise),
A = brd.createElement('point',[1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
+
        B = board.create('point', [-1, 0], cerise),
B = brd.createElement('point',[-1,0],{strokeColor:'#901B77',fillColor:'#CA147A'});
+
        C = board.create('point', [0.2, 1.5], cerise),
C = brd.createElement('point',[0.2,1.5],{strokeColor:'#901B77',fillColor:'#CA147A'});
+
        pol = board.create('polygon',[A,B,C], {
pol = brd.createElement('polygon',[A,B,C], {fillColor:'#FFFF0050'});
+
            fillColor: '#FFFF00',
for(i=0;i<=2;i++) {
+
            lines: {
    pol.borders[i].setProperty('strokeColor:#009256');
+
                strokeWidth: 2,
}
+
                strokeColor: '#009256'
 +
            }
 +
        });
  
pABC = brd.createElement('perpendicular',[pol.borders[0],C],{strokeWidth:1,dash:2, name:['','H_c']});
+
    var pABC, pBCA, pCAB, i1;
pBCA = brd.createElement('perpendicular',[pol.borders[1],A],{strokeWidth:1,dash:2, name:['','H_a']});
+
    perpendicular.point.name = 'H_c';
pCAB = brd.createElement('perpendicular',[pol.borders[2],B],{strokeWidth:1,dash:2, name:['','H_b']});
+
    pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
pABC[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
+
    perpendicular.point.name = 'H_a';
pBCA[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
+
    pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
pCAB[1].setProperty('strokeColor:#901B77','fillColor:#CA147A');
+
    perpendicular.point.name = 'H_b';
i1 = brd.createElement('intersection',[pABC[0],pCAB[0],0],{strokeColor:'#009256',fillColor:'#65B72E',name:'H'});
+
    pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
pABC[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
+
    grass.name = 'H';
pBCA[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
+
    i1 = board.create('intersection', [pABC, pCAB, 0], grass);
pCAB[0].setProperty({strokeColor:'#000000',dash:1,strokeWidth:1});
 
  
mAB = brd.createElement('midpoint',[A,B],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_c'});
+
    var mAB, mBC, mCA;
mBC = brd.createElement('midpoint',[B,C],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_a'});
+
    cerise.name = 'M_c';
mCA = brd.createElement('midpoint',[C,A],{strokeColor:'#901B77',fillColor:'#CA147A',name:'M_b'});
+
    mAB = board.create('midpoint', [A, B], cerise);
ma = brd.createElement('line',[mBC,A],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
+
    cerise.name = 'M_a';
mb = brd.createElement('line',[mCA,B],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
+
    mBC = board.create('midpoint', [B, C], cerise);
mc = brd.createElement('line',[mAB,C],{straightFirst:false,straightLast:false,strokeWidth:1,strokeColor:'#333333',dash:2});
+
    cerise.name = 'M_b';
i2 = brd.createElement('intersection',[ma,mc,0],{strokeColor:'#009256',fillColor:'#65B72E',name:'S'});
+
    mCA = board.create('midpoint', [C, A], cerise);
  
i3 = brd.createElement('circumcirclemidpoint',[A,B,C],{strokeColor:'#009256',fillColor:'#65B72E',name:'U'});
+
    var ma, mb, mc, i2;
c = brd.createElement('circumcircle',[A,B,C],{strokeColor:'#000000',dash:3,strokeWidth:1});
+
    ma = board.create('segment', [mBC, A], median);
c[0].setProperty('visible:false');
+
    mb = board.create('segment', [mCA, B], median);
c[1].setProperty({strokeColor:'#000000',dash:3,strokeWidth:1});
+
    mc = board.create('segment', [mAB, C], median);
 +
    grass.name = 'S';
 +
    i2 = board.create('intersection', [ma, mc, 0], grass);
  
euler = brd.createElement('line',[i1,i3],{strokeWidth:2,strokeColor:'#901B77'});
+
    var c;
brd.unsuspendUpdate();
+
    grass.name = 'U';
 +
    c = board.create('circumcircle',[A, B, C], {
 +
        strokeColor: '#000000',
 +
        dash: 3,
 +
        strokeWidth: 1,
 +
        point: grass
 +
    });
  
</jsxgraph></source>
+
    var euler;
 +
    euler = board.create('line', [i1, i2], {
 +
        strokeWidth: 2,
 +
        strokeColor:'#901B77'
 +
    });
 +
    board.update();
 +
})();
 +
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Geometry]]
 
[[Category:Geometry]]

Latest revision as of 10:07, 13 June 2012

The JavaScript code

(function () {

    var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 2, 1.5, -1], keepaspectratio:true});

    var cerise = {
            strokeColor: '#901B77',
            fillColor: '#CA147A'
        },

        grass = {
            strokeColor: '#009256',
            fillColor: '#65B72E',
            visible: true,
            withLabel: true
        },

        perpendicular = {
            strokeColor: 'black',
            dash: 1,
            strokeWidth: 1,
            point: JXG.deepCopy(cerise, {
                visible: true,
                withLabel: true
            })
        },

        median = {
            strokeWidth: 1,
            strokeColor: '#333333',
            dash:2
        },

        A = board.create('point', [1, 0], cerise),
        B = board.create('point', [-1, 0], cerise),
        C = board.create('point', [0.2, 1.5], cerise),
        pol = board.create('polygon',[A,B,C], {
            fillColor: '#FFFF00',
            lines: {
                strokeWidth: 2,
                strokeColor: '#009256'
            }
        });

    var pABC, pBCA, pCAB, i1;
    perpendicular.point.name = 'H_c';
    pABC = board.create('perpendicular', [pol.borders[0], C], perpendicular);
    perpendicular.point.name = 'H_a';
    pBCA = board.create('perpendicular', [pol.borders[1], A], perpendicular);
    perpendicular.point.name = 'H_b';
    pCAB = board.create('perpendicular', [pol.borders[2], B], perpendicular);
    grass.name = 'H';
    i1 = board.create('intersection', [pABC, pCAB, 0], grass);

    var mAB, mBC, mCA;
    cerise.name = 'M_c';
    mAB = board.create('midpoint', [A, B], cerise);
    cerise.name = 'M_a';
    mBC = board.create('midpoint', [B, C], cerise);
    cerise.name = 'M_b';
    mCA = board.create('midpoint', [C, A], cerise);

    var ma, mb, mc, i2;
    ma = board.create('segment', [mBC, A], median);
    mb = board.create('segment', [mCA, B], median);
    mc = board.create('segment', [mAB, C], median);
    grass.name = 'S';
    i2 = board.create('intersection', [ma, mc, 0], grass);

    var c;
    grass.name = 'U';
    c = board.create('circumcircle',[A, B, C], {
        strokeColor: '#000000',
        dash: 3,
        strokeWidth: 1,
        point: grass
    });

    var euler;
    euler = board.create('line', [i1, i2], {
        strokeWidth: 2,
        strokeColor:'#901B77'
    });
    board.update();
})();