Difference between revisions of "Tangent line to two circles"

From JSXGraph Wiki
Jump to navigationJump to search
(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 00:10, 27 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'});