JSXGraph Wiki - User contributions [en]

Thales inscribed angle theorem

2014-01-26T22:17:06Z

Sahand: /* The underlying JavaScript code */

This example demonstrates Thales' inscribed angle theorem. You can move point the <math>P</math>, or <math>A</math> and <math>B</math>. It also demonstrates how to dynamically get an angle value in JSXGraph and set a label based on it using hooks.

<jsxgraph width="600" height="600">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-6,6,6,-6]});
o = brd.create('point', [0, 0], {name: 'O'});
c = brd.create('circle', [o, 4], {name: 'C'});

a = brd.create('glider', [3, 0, c], {name: 'A'});
b = brd.create('glider', [-3, -3, c], {name: 'B', label:{offset:[-15,0]}});
p = brd.create('point', [-1, 2], {name: 'P'});

opts = {strokeColor: 'blue'};
lab = brd.create('segment', [a, b], opts);

opts = {strokeColor: 'blue'};
lpb = brd.create('segment', [p, b], opts);
lpa = brd.create('segment', [a, p], opts);

op = brd.create('line', [o, p], {visible: false});

pp = brd.create('intersection', [c, op, 0], {name: 'P\'', label:{offset:[0,15]}});
opts = {strokeColor: 'green'};
lppb = brd.create('segment', [pp, b], opts );
lppa = brd.create('segment', [a, pp], opts);
opts = {strokeColor: 'lightblue', strokeWidth: '1px'};
lopp = brd.create('segment', [o, pp], opts);

angp = brd.create('angle', [b, p, a]);
angpp = brd.create('angle', [b, pp, a]);

var setAngleLabels = function() {
angp.setLabelText(angp.Value().toFixed(2));
angpp.setLabelText(angpp.Value().toFixed(2));
};

setAngleLabels();
brd.addHook(function() { setAngleLabels(); }, 'move');
</jsxgraph>

===The underlying JavaScript code===
<source lang="javascript">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-6,6,6,-6]});
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]]

Thales inscribed angle theorem

2014-01-26T22:15:58Z

Sahand: Created page with "This example demonstrates Thales' inscribed angle theorem. You can move point the <math>P</math>, or <math>A</math> and <math>B</math>. It also demonstrates how to dynamically ge..."

This example demonstrates Thales' inscribed angle theorem. You can move point the <math>P</math>, or <math>A</math> and <math>B</math>. It also demonstrates how to dynamically get an angle value in JSXGraph and set a label based on it using hooks.

<jsxgraph width="600" height="600">
var brd = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-6,6,6,-6]});
o = brd.create('point', [0, 0], {name: 'O'});
c = brd.create('circle', [o, 4], {name: 'C'});

a = brd.create('glider', [3, 0, c], {name: 'A'});
b = brd.create('glider', [-3, -3, c], {name: 'B', label:{offset:[-15,0]}});
p = brd.create('point', [-1, 2], {name: 'P'});

opts = {strokeColor: 'blue'};
lab = brd.create('segment', [a, b], opts);

opts = {strokeColor: 'blue'};
lpb = brd.create('segment', [p, b], opts);
lpa = brd.create('segment', [a, p], opts);

op = brd.create('line', [o, p], {visible: false});

pp = brd.create('intersection', [c, op, 0], {name: 'P\'', label:{offset:[0,15]}});
opts = {strokeColor: 'green'};
lppb = brd.create('segment', [pp, b], opts );
lppa = brd.create('segment', [a, pp], opts);
opts = {strokeColor: 'lightblue', strokeWidth: '1px'};
lopp = brd.create('segment', [o, pp], opts);

angp = brd.create('angle', [b, p, a]);
angpp = brd.create('angle', [b, pp, a]);

var setAngleLabels = function() {
angp.setLabelText(angp.Value().toFixed(2));
angpp.setLabelText(angpp.Value().toFixed(2));
};

setAngleLabels();
brd.addHook(function() { setAngleLabels(); }, 'move');
</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]]

Tangent line to two circles

2014-01-26T22:10:53Z

Sahand: /* The underlying JavaScript code */

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]]

Tangent line to two circles

2014-01-26T22:09:43Z

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

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]]