1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
|
<html>
<head>
<title>JSXGraph example</title>
<link rel="stylesheet" type="text/css" href="../distrib/jsxgraph.css" />
<script type="text/javascript" src="/javascript/prototype/prototype.js"></script>
<script type="text/javascript" src="../distrib/jsxgraphcore.js"></script>
</head>
<body style="font-family:Arial">
<h1>Inscribing Four Circles in a Triangle</h1>
Inscribe a circle in a triangle ABC; let denote r<sub>M</sub> its radius. <br>
Construct tangents to the inscribed circle parallel to the sides of the triangle. <br>
Construct inscribed circles within each of the smaller triangles with radii r<sub>A</sub>, r<sub>B</sub>, and r<sub>C</sub>. <br>
Then r<sub>A</sub> + r<sub>B</sub> + r<sub>C</sub> = r<sub>M</sub>.
<br><br>
<table><tr><td>
<table border='1'>
<tr>
<td>r<sub>A</sub></td>
<td>r<sub>B</sub></td>
<td>r<sub>C</sub></td>
</tr>
<tr>
<td id="rA"></td>
<td id="rB"></td>
<td id="rC"></td>
</tr>
</table>
<table border='1'>
<tr>
<td>r<sub>M</sub></td>
<td>r<sub>A</sub>+r<sub>B</sub>+r<sub>C</sub></td>
</tr>
<tr>
<td id="rM"></td>
<td id="rABC"></td>
</tr>
</table>
<br>
<!-- Drawing area -->
<div id="box" class="jxgbox" style="width:800px; height:400px; overflow:hidden; /*position:absolute; top:0px; left:0px;*/"></div>
<!-- Drawing area -->
<div id="debug" style="display:block;"></div>
<script type="text/javascript">
/* <![CDATA[ */
var board = JXG.JSXGraph.initBoard('box', {originX: 200, originY: 200, unitX: 50, unitY: 50});
var p1 = board.createElement('point', [0.5,-1.5] , {name:'A',fillColor:'red',strokeColor:'red'});
var p2 = board.createElement('point', [7.5,0.5] , {name:'B',fillColor:'red',strokeColor:'red'});
var p3 = board.createElement('point', [2,3] , {name:'C',fillColor:'red',strokeColor:'red'});
var b1 = board.createElement('line',['A','B'],{name:'',straightFirst:false,straightLast:false});
var b2 = board.createElement('line',['A','C'],{name:'',straightFirst:false,straightLast:false});
var b3 = board.createElement('line',['C','B'],{name:'',straightFirst:false,straightLast:false});
var l1 = board.createElement('bisector',['B','A','C'],{name:'',visible:false}); // alpha
var l2 = board.createElement('bisector',['C','B','A'],{name:'',visible:false}); // beta
var i1 = board.createElement('intersection',[l1,l2,0],{name:'',visible:false});
var pp1 = board.createElement('perpendicularpoint',[i1,b1],{name:"C'",fillColor:'blue',visible:false});
var pp2 = board.createElement('perpendicularpoint',[i1,b2],{name:"B'",fillColor:'blue',visible:false});
var pp3 = board.createElement('perpendicularpoint',[i1,b3],{name:"A'",fillColor:'blue',visible:false});
var c2 = board.createElement('circumcircle',[pp1,pp2,pp3],{name:['M','']});
c2.setProperty({strokeColor:'#3CB371'});
c2.center.setProperty({fillColor:'blue'});
var l3 = board.createElement('line',[pp1,c2.center],{name:'',visible:false});
var i2 = board.createElement('intersection',[l3,c2,0],{name:'',visible:false});
var l4 = board.createElement('parallel',[b1,i2],{visible:true});
var i3 = board.createElement('intersection',[l4,b3,0],{name:'',fillColor:'#9932CC',strokeColor:'#9932CC'});
var i4 = board.createElement('intersection',[l4,b2,0],{name:'',fillColor:'#9932CC',strokeColor:'#9932CC'});
var l5 = board.createElement('line',[i3,i4],{name:'',straightFirst:false,straightLast:false});
var l13 = board.createElement('line',[pp2,c2.center],{name:'',visible:false});
var i12 = board.createElement('intersection',[l13,c2,0],{name:'',visible:false});
var l14 = board.createElement('parallel',[b2,i12],{visible:true});
var i13 = board.createElement('intersection',[l14,b3,0],{name:'',fillColor:'#9932CC',strokeColor:'#9932CC'});
var i14 = board.createElement('intersection',[l14,b1,0],{name:'',fillColor:'#9932CC',strokeColor:'#9932CC'});
var l15 = board.createElement('line',[i13,i14],{name:'',straightFirst:false,straightLast:false});
var l23 = board.createElement('line',[pp3,c2.center],{name:'',visible:false});
var i22 = board.createElement('intersection',[l23,c2,0],{name:'',visible:false});
var l24 = board.createElement('parallel',[b3,i22],{visible:false});
var i23 = board.createElement('intersection',[l24,b1,0],{name:'',fillColor:'#9932CC',strokeColor:'#9932CC'});
var i24 = board.createElement('intersection',[l24,b2,0],{name:'',fillColor:'#9932CC',strokeColor:'#9932CC'});
var l25 = board.createElement('line',[i23,i24],{name:'',straightFirst:false,straightLast:false});
/* nicht Umkreise, sondern Inkreise! */
var l11 = board.createElement('bisector',[i4,'C',i3],{name:'',visible:false}); // alpha
var l21 = board.createElement('bisector',['C',i3,i4],{name:'',visible:false}); // beta
var i11 = board.createElement('intersection',[l11,l21,0],{name:'',visible:true});
var pp11 = board.createElement('perpendicularpoint',[i11,l5],{name:"",visible:false});
var pp21 = board.createElement('perpendicularpoint',[i11,b2],{name:"",visible:false});
var pp31 = board.createElement('perpendicularpoint',[i11,b3],{name:"",visible:false});
var c12 = board.createElement('circumcircle',[pp11,pp21,pp31],{name:['C_1','']});
c12.setProperty({strokeColor:'#3CB371'});
c12.center.setProperty({fillColor:'blue'});
var l12 = board.createElement('bisector',[i13,'B',i14],{name:'',visible:false}); // alpha
var l22 = board.createElement('bisector',[i14,i13,'B'],{name:'',visible:false}); // beta
var i12 = board.createElement('intersection',[l12,l22,0],{name:'',visible:true});
var pp12 = board.createElement('perpendicularpoint',[i12,l15],{name:"",visible:false});
var pp22 = board.createElement('perpendicularpoint',[i12,b1],{name:"",visible:false});
var pp32 = board.createElement('perpendicularpoint',[i12,b3],{name:"",visible:false});
var c22 = board.createElement('circumcircle',[pp12,pp22,pp32],{name:['B_1','']});
c22.setProperty({strokeColor:'#3CB371'});
c22.center.setProperty({fillColor:'blue'});
var l13 = board.createElement('bisector',[i23,'A',i24],{name:'',visible:false}); // alpha
var l23 = board.createElement('bisector',[i24,i23,'A'],{name:'',visible:false}); // beta
var i13 = board.createElement('intersection',[l13,l23,0],{name:'',visible:true});
var pp13 = board.createElement('perpendicularpoint',[i13,l25],{name:"",visible:false});
var pp23 = board.createElement('perpendicularpoint',[i13,b1],{name:"",visible:false});
var pp33 = board.createElement('perpendicularpoint',[i13,b2],{name:"",visible:false});
var c32 = board.createElement('circumcircle',[pp13,pp23,pp33],{name:['A_1','']});
c32.setProperty({strokeColor:'#3CB371'});
c32.setProperty({fillColor:'blue'});
// Hook-Funktion definieren, die die Tabelleninhalte updatet
function print_table(board) {
$('rA').innerHTML = c32.Radius().toFixed(4);
$('rB').innerHTML = c22.Radius().toFixed(4);
$('rC').innerHTML = c12.Radius().toFixed(4);
$('rM').innerHTML = c2.Radius().toFixed(4);
$('rABC').innerHTML = (c32.Radius()+c22.Radius()+c12.Radius()).toFixed(4);
}
// und beim board registrieren.
print_table_id = board.addHook(print_table);
/* ]]> */
</script>
</body>
</html>
|
