JSXGraph Wiki - User contributions [en]

Pendulum

2013-09-17T13:20:49Z

Veillette:

==Simple Pendulum with Damping==

<jsxgraph width="800" height="600">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-9, 9, 9, -12], keepaspectratio: true, false: true, grid: true}),
p1 = board.create('point', [0.0, 0.0], {visible:false, name: 'a', size: 3}),
c1 = board.create('circle', [p1, [0,8]], {visible:false, name: 'circle', size: 3}),
p2 = board.create('glider', [3,-4, c1], {visible: true, name: '', size: 3}),
grr=board.create('functiongraph', [function(t){ return -10-2*Math.cos(t/2); },-10, 10],{strokeColor: "#cccccc"}),
p3 = board.create('point', [
function(){return 2*Math.atan2(p2.X(),-p2.Y())},
function(){return -10-2*Math.cos(Math.atan2(p2.X(),-p2.Y()))}],
{visible: true, name:'', size: 3}),
line = board.create('line', [p1, p2], {visible:true, straightFirst: false,straightLast: false}),
isInDragMode = false;

var gg = board.create('slider',[[-6,6],[-3,6],[1,9.8,10]]); board.createElement('text',[-8,6,'gravity']);
var cc = board.create('slider',[[3,6],[6,6],[0.1,0.5,1]]); board.createElement('text',[1,6,'damping']);

function startAnimation(start_theta) {
var c = cc.Value(), g = gg.Value(), l = 10;
p2.moveAlong(function() {
var f = function(t, x) {
return [x[1], -c * x[1] - g / l * (Math.sin(x[0]))];
},
area = [0, 200],
numberOfEvaluations = (area[1] - area[0]) * 100,
data = JXG.Math.Numerics.rungeKutta('heun', [start_theta, 0], area, numberOfEvaluations, f),
duration = 20 * 1e3;

return function(t) {
if (t >= duration)
return NaN;
angle2=-Math.PI/2+data[Math.floor(t / duration * numberOfEvaluations)][0];
return [p1.X()+l*Math.cos(angle2),p1.Y()+l*Math.sin(angle2)];
};
}());
}

function hook() {
if(!isInDragMode) {
if(board.mode === board.BOARD_MODE_DRAG) {
board.stopAllAnimation();
isInDragMode = true;
}
}
if(isInDragMode) {
if(board.mode !== board.BOARD_MODE_DRAG) {
isInDragMode = false;
angle=Math.atan2(p2.Y()-p1.Y(),p2.X()-p1.X())+Math.PI*1/2;
startAnimation(angle);
}
}
}

board.addHook(hook);
startAnimation(-1.2);
</jsxgraph>

===The JavaScript code===

<source lang="javascript">
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-9, 9, 9, -12], keepaspectratio: true, false: true, grid: true}),
p1 = board.create('point', [0.0, 0.0], {visible:false, name: 'a', size: 3}),
c1 = board.create('circle', [p1, [0,8]], {visible:false, name: 'circle', size: 3}),
p2 = board.create('glider', [3,-4, c1], {visible: true, name: '', size: 3}),
grr=board.create('functiongraph', [function(t){ return -10-2*Math.cos(t/2); },-10, 10],{strokeColor: "#cccccc"}),
p3 = board.create('point', [
function(){return 2*Math.atan2(p2.X(),-p2.Y())},
function(){return -10-2*Math.cos(Math.atan2(p2.X(),-p2.Y()))}],
{visible: true, name:'', size: 3}),
line = board.create('line', [p1, p2], {visible:true, straightFirst: false,straightLast: false}),
isInDragMode = false;

var gg = board.create('slider',[[-6,6],[-3,6],[1,9.8,10]]); board.createElement('text',[-8,6,'gravity']);
var cc = board.create('slider',[[3,6],[6,6],[0.1,0.5,1]]); board.createElement('text',[1,6,'damping']);

function startAnimation(start_theta) {
var c = cc.Value(), g = gg.Value(), l = 10;
p2.moveAlong(function() {
var f = function(t, x) {
return [x[1], -c * x[1] - g / l * (Math.sin(x[0]))];
},
area = [0, 200],
numberOfEvaluations = (area[1] - area[0]) * 100,
data = JXG.Math.Numerics.rungeKutta('heun', [start_theta, 0], area, numberOfEvaluations, f),
duration = 20 * 1e3;

return function(t) {
if (t >= duration)
return NaN;
angle2=-Math.PI/2+data[Math.floor(t / duration * numberOfEvaluations)][0];
return [p1.X()+l*Math.cos(angle2),p1.Y()+l*Math.sin(angle2)];
};
}());
}

function hook() {
if(!isInDragMode) {
if(board.mode === board.BOARD_MODE_DRAG) {
board.stopAllAnimation();
isInDragMode = true;
}
}
if(isInDragMode) {
if(board.mode !== board.BOARD_MODE_DRAG) {
isInDragMode = false;
angle=Math.atan2(p2.Y()-p1.Y(),p2.X()-p1.X())+Math.PI*1/2;
startAnimation(angle);
}
}
}

board.addHook(hook);
startAnimation(-1.2);
</source>
[[Category:Examples]]
[[Category:Calculus]]

Unit circle

2013-09-17T13:14:30Z

Veillette:

<html>
<h2>Unit Circle</h2>
</html>
<jsxgraph width="500" height="500" box="box">

var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});

var theta = b.create('angle', ['10','0','A'],{name:'θ',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});

var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});

var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});

var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});

var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

</jsxgraph>

=== The underlying JavaScript code ===
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});

var theta = b.create('angle', ['10','0','A'],{name:'θ',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});

var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});

var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});

var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});

var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

</source>

Unit circle

2013-09-17T13:04:19Z

Veillette:

<html>
<h2>Unit Circle</h2>
</html>
<jsxgraph width="500" height="500" box="box">

var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});

var angletheta = Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;

function thetadegree2(pointa) {
return ((Math.atan2(pointa.Y(),pointa.X())*180/3.1415).ToFixed(1));
}

theta = b.create('angle', ['10','0','A'],{name:'θ',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});

var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});

var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});

var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});

var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

</jsxgraph>

=== The underlying JavaScript code ===
<source lang="javascript">
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});

var angletheta = Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;

function thetadegree2(pointa) {
return ((Math.atan2(pointa.Y(),pointa.X())*180/3.1415).ToFixed(1));
}

theta = b.create('angle', ['10','0','A'],{name:'θ',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});

var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});

var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});

var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});

var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

</source>

Unit circle

2013-09-12T19:51:33Z

Veillette:

Unit circle

2013-09-12T19:50:31Z

Veillette:

<html>
<form>
<input type="button" value="start" onclick="rol.start()">
<input type="button" value="stop" onclick="rol.stop()">
<input type="button" value="one step" onclick="rol.rolling()">
</form></html>

<jsxgraph width="600" height="300" box="jxgbox">
var b = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1,5,20,-1], keepaspectratio:true});
brd.suspendUpdate();

<div id="box" class="jxgbox" style="width:800px; height:800px;"></div>
<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});

var angletheta = Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;

function thetadegree2(pointa) {
return ((Math.atan2(pointa.Y(),pointa.X())*180/3.1415).ToFixed(1));
}

theta = b.create('angle', ['10','0','A'],{name:'θ',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});

var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});

var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});

var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});

var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

</script>
[/nowiki]

Unit circle

2013-09-12T19:50:17Z

Veillette:

<nowiki>

<html>
<form>
<input type="button" value="start" onclick="rol.start()">
<input type="button" value="stop" onclick="rol.stop()">
<input type="button" value="one step" onclick="rol.rolling()">
</form></html>

<jsxgraph width="600" height="300" box="jxgbox">
var b = JXG.JSXGraph.initBoard('jxgbox',{boundingbox:[-1,5,20,-1], keepaspectratio:true});
brd.suspendUpdate();

<div id="box" class="jxgbox" style="width:800px; height:800px;"></div>
<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});

var angletheta = Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;

function thetadegree2(pointa) {
return ((Math.atan2(pointa.Y(),pointa.X())*180/3.1415).ToFixed(1));
}

theta = b.create('angle', ['10','0','A'],{name:'θ',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});

var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});

var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});

var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});

var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

</script>
[/nowiki]

Unit circle

2013-09-12T19:46:43Z

Veillette: Created page with " <div id="box" class="jxgbox" style="width:800px; height:800px;"></div> <script type="text/javascript"> var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5]..."

<div id="box" class="jxgbox" style="width:800px; height:800px;"></div>
<script type="text/javascript">
var b = JXG.JSXGraph.initBoard('box', {boundingbox: [-1.5, 1.5, 1.5, -1.5],axis:true});
var p1 = b.createElement('point',[0,0], {name:'0',size: 4, face: 'o',fixed:true});
var p2 = b.createElement('point',[1,0], {name:'10',size: 4, face: 'o',visible:false,fixed:true});
var p3 = b.createElement('point',[0,1], {name:'01',size: 4, face: 'o',visible:false,fixed:true});
var p4 = b.createElement('point',[1,1], {name:'11',size: 4, face: 'o',visible:false,fixed:true});

var ci = b.createElement('circle',["0","10"], {strokeColor:'blue',strokeWidth:2});
var p5 = b.createElement('glider',[0.71,0.71,ci], {name:'A',size: 4, face: 'o'});

var angletheta = Math.atan2(p5.Y(),p5.X());
var thetadegree = Math.atan2(p5.Y(),p5.X())*180/3.1415;

function thetadegree2(pointa) {
return ((Math.atan2(pointa.Y(),pointa.X())*180/3.1415).ToFixed(1));
}

theta = b.create('angle', ['10','0','A'],{name:'θ',type:'sector', orthoType:'square', orthoSensitivity:2, radius:0.5});

var li1 = b.create('line',["10","11"], {strokeColor:'blue',strokeWidth:2,fixed:true});
var li2 = b.create('line',["01","11"], {strokeColor:'blue',strokeWidth:2});
var li3 = b.create('line',["0","A"], {straightFirst:false,straightLast:false,strokeColor:'blue',strokeWidth:2});

var p6 = b.createElement('point',[ 0, function(){ return p5.Y(); }], {name:'sin',size: 4, face: 'o',visible:false});
var p7 = b.createElement('point',[ function(){ return p5.X(); },0], {name:'cos',size: 4, face: 'o',visible:false});
var p8 = b.createElement('point',[ function(){ return 1/Math.tan(Math.atan2(p5.Y(),p5.X()));},1], {name:'cot',size: 4, face: 'o',visible:false});

var p9 = b.createElement('point',[ 1, function(){ return Math.tan(Math.atan2(p5.Y(),p5.X()));}], {name:'tan',size: 4, face: 'o',visible:false});

var cos = b.create('text',[function(){return p6.X();},function(){ return p6.Y()/2;},"sin"],{anchorX:'right'});
var sin = b.create('text',[function(){return p7.X()/2;},function(){ return p7.Y();},"cos"],{anchorY:'top'});

var cot = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y();},"cot"],{anchorY:'bottom'});
var tan = b.create('text',[function(){return p9.X();},function(){ return p9.Y()/2;},"tan"],{anchorX:'left'});

var csc = b.create('text',[function(){return p8.X()/2;},function(){ return p8.Y()/2;},"csc"],{anchorY:'top'});
var sec = b.create('text',[function(){return p9.X()/2;},function(){ return p9.Y()/2;},"sec"],{anchorX:'left'});

var li4 = b.create('line',["0",p6], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'green',strokeWidth:2});
var li5 = b.create('line',["0",p7], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'brown',strokeWidth:2});
var li6 = b.create('line',["0",p8], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'purple',strokeWidth:2});
var li7 = b.create('line',["0",p9], {straightFirst:false,straightLast:false,lastarrow:true,strokeColor:'yellow',strokeWidth:2});

var li8 = b.create('line',["01",p8], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'pink',strokeWidth:2});
var li9 = b.create('line',["10",p9], {straightFirst:false,lastarrow:true,straightLast:false,strokeColor:'#00ff00',strokeWidth:2});
var li10 = b.create('line',[p5,p6], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});
var li11 = b.create('line',[p5,p7], {straightFirst:false,dash:2,straightLast:false,strokeColor:'grey',strokeWidth:2});

var costext=b.create('text', [-1.0, -0.8, function(){return "cos("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sintext=b.create('text', [-1.0, -0.9, function(){return "sin("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p5.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var tantext=b.create('text', [-1.0, -1.0, function(){return "tan("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p9.Y().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var cottext=b.create('text', [-1.0, -1.1, function(){return "cot("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+p8.X().toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var sectext=b.create('text', [-1.0, -1.2, function(){return "sec("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.cos( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

var csctext=b.create('text', [-1.0, -1.3, function(){return "csc("+(Math.atan2(p5.Y(),p5.X())*180/Math.PI).toFixed(1)+")="+(1/Math.sin( Math.atan2(p5.Y(),p5.X()))).toFixed(3);}], {anchorX:'middle', cssClass:'mytext'});

</script>