Tangent line to two circles - Revision history

Sahand: /* The underlying JavaScript code */

2014-01-26T22:10:53Z

The underlying JavaScript code

Sahand: Step by step construction of tangent lines to two circles.

2014-01-26T22:09:43Z

Step by step construction of tangent lines to two circles.

New page

Step by step construction of tangent lines to two circles.

<jsxgraph width="600" height="600">
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'});
</jsxgraph>

===The underlying JavaScript code===
<source lang="javascript">
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'});
</source>

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

← Older revision		Revision as of 22:10, 26 January 2014
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]]