Euler line: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(14 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, 2, 1.5, -1], 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 08: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();
})();