Tangent line to two circles: Difference between revisions

From JSXGraph Wiki
(Step by step construction of tangent lines to two circles.)
 
 
Line 51: Line 51:
===The underlying JavaScript code===
===The underlying JavaScript code===
<source lang="javascript">
<source lang="javascript">
        var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-8,8,8,-8]});
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-8,8,8,-8]});
        o1 = brd.create('point', [-2, 2], {name: 'O1'});
o1 = brd.create('point', [-2, 2], {name: 'O1'});
        o2 = brd.create('point', [3, -3], {name: 'O2'});
o2 = brd.create('point', [3, -3], {name: 'O2'});


        p1 = brd.create('point', [-3, 5], {name: 'P1'});
p1 = brd.create('point', [-3, 5], {name: 'P1'});
        p2 = brd.create('point', [2, -3], {name: 'P2'});
p2 = brd.create('point', [2, -3], {name: 'P2'});


        c1 = brd.create('circle', [o1, p1]);
c1 = brd.create('circle', [o1, p1]);
        c2 = brd.create('circle', [o2, p2]);
c2 = brd.create('circle', [o2, p2]);


        m = brd.create('midpoint', [o1, o2], {name: 'M'});
m = brd.create('midpoint', [o1, o2], {name: 'M'});
        lm = brd.create('line', [o1, o2], {'strokeWidth': '1px', 'strokeColor':'gray'} );
lm = brd.create('line', [o1, o2], {'strokeWidth': '1px', 'strokeColor':'gray'} );


        c3 = brd.create('circle', [m, o2], {'strokeColor':'green', strokeWidth: '1px'});
c3 = brd.create('circle', [m, o2], {'strokeColor':'green', strokeWidth: '1px'});


        c4 = brd.create('circle', [o1, function() {
c4 = brd.create('circle', [o1, function() {
                r1 = c1.Radius();
        r1 = c1.Radius();
                r2 = c2.Radius();
        r2 = c2.Radius();
                if(r1 > r2) {
        if(r1 > r2) {
                    return r1 - r2;
            return r1 - r2;
                } else {
        } else {
                    return r2 + r1;
            return r2 + r1;
                }
        }
        }], {'strokeColor': 'purple', strokeWidth: '1px'});
}], {'strokeColor': 'purple', strokeWidth: '1px'});


        i1 = brd.create('intersection', [c3,c4,0],{visible:true});
i1 = brd.create('intersection', [c3,c4,0],{visible:true});
        i2 = brd.create('intersection', [c3,c4,1],{visible:true});
i2 = brd.create('intersection', [c3,c4,1],{visible:true});


        l1 = brd.create('line', [o1, i1], {visible: false});
l1 = brd.create('line', [o1, i1], {visible: false});
        l2 = brd.create('line', [o1, i2], {visible: false});
l2 = brd.create('line', [o1, i2], {visible: false});


        i3 = brd.create('intersection', [c1,l1,0],{visible:true});
i3 = brd.create('intersection', [c1,l1,0],{visible:true});
        i4 = brd.create('intersection', [c1,l2,0],{visible:true});
i4 = brd.create('intersection', [c1,l2,0],{visible:true});


        v1 = brd.create('arrow', [o1, i3], {strokeColor: 'lightblue', strokeWidth: '1px'});
v1 = brd.create('arrow', [o1, i3], {strokeColor: 'lightblue', strokeWidth: '1px'});
        v2 = brd.create('arrow', [o1, i4], {strokeColor: 'lightblue', strokeWidth: '1px'});
v2 = brd.create('arrow', [o1, i4], {strokeColor: 'lightblue', strokeWidth: '1px'});


        l3 = brd.create('line', [i1, o1], {visible: false});
l3 = brd.create('line', [i1, o1], {visible: false});
        l4 = brd.create('line', [o1, i2], {visible: false});
l4 = brd.create('line', [o1, i2], {visible: false});


        t1 = brd.create('tangent', [c1, i3], {strokeColor:'darkblue'});
t1 = brd.create('tangent', [c1, i3], {strokeColor:'darkblue'});
        t2 = brd.create('tangent', [c1, i4], {strokeColor:'darkblue'});
t2 = brd.create('tangent', [c1, i4], {strokeColor:'darkblue'});
 
t3 = brd.create('line', [o2, i1], {strokeColor:'pink'});
t4 = brd.create('line', [o2, i2], {strokeColor:'pink'});


        t3 = brd.create('line', [o2, i1], {strokeColor:'pink'});
        t4 = brd.create('line', [o2, i2], {strokeColor:'pink'});
</source>
</source>


[[Category:Geometry]]
[[Category:Geometry]]
[[Category:Examples]]
[[Category:Examples]]

Latest revision as of 22:10, 26 January 2014

Step by step construction of tangent lines to two circles.

The underlying JavaScript code

var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-8,8,8,-8]});
o1 = brd.create('point', [-2, 2], {name: 'O1'});
o2 = brd.create('point', [3, -3], {name: 'O2'});

p1 = brd.create('point', [-3, 5], {name: 'P1'});
p2 = brd.create('point', [2, -3], {name: 'P2'});

c1 = brd.create('circle', [o1, p1]);
c2 = brd.create('circle', [o2, p2]);

m = brd.create('midpoint', [o1, o2], {name: 'M'});
lm = brd.create('line', [o1, o2], {'strokeWidth': '1px', 'strokeColor':'gray'} );

c3 = brd.create('circle', [m, o2], {'strokeColor':'green', strokeWidth: '1px'});

c4 = brd.create('circle', [o1, function() {
        r1 = c1.Radius();
        r2 = c2.Radius();
        if(r1 > r2) {
            return r1 - r2;
        } else {
            return r2 + r1;
        }
}], {'strokeColor': 'purple', strokeWidth: '1px'});

i1 = brd.create('intersection', [c3,c4,0],{visible:true});
i2 = brd.create('intersection', [c3,c4,1],{visible:true});

l1 = brd.create('line', [o1, i1], {visible: false});
l2 = brd.create('line', [o1, i2], {visible: false});

i3 = brd.create('intersection', [c1,l1,0],{visible:true});
i4 = brd.create('intersection', [c1,l2,0],{visible:true});

v1 = brd.create('arrow', [o1, i3], {strokeColor: 'lightblue', strokeWidth: '1px'});
v2 = brd.create('arrow', [o1, i4], {strokeColor: 'lightblue', strokeWidth: '1px'});

l3 = brd.create('line', [i1, o1], {visible: false});
l4 = brd.create('line', [o1, i2], {visible: false});

t1 = brd.create('tangent', [c1, i3], {strokeColor:'darkblue'});
t2 = brd.create('tangent', [c1, i4], {strokeColor:'darkblue'});

t3 = brd.create('line', [o2, i1], {strokeColor:'pink'});
t4 = brd.create('line', [o2, i2], {strokeColor:'pink'});