Bearing: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 1: Line 1:
This is an example of bidirectional communication of JSXGraph with other elements of the web page. a You can type a new value for the angle into the text box and see the actual value of the angle in the text box.
This is an example of bidirectional communication of JSXGraph with other elements of the web page. a You can type a new value for the angle into the text box and see the actual value of the angle in the text box.
<br /><br />
<html>
<html>
<form>
<input type="text" id="degrees">
<input type="text" id="degrees">
<input type="button" value="set direction" onclick="setDirection()">
<button onclick="setDirection()">set direction</button>
</form>
</html>
</html>
<jsxgraph width="600" height="500">
<jsxgraph width="600" height="500">

Revision as of 14:36, 17 January 2012

This is an example of bidirectional communication of JSXGraph with other elements of the web page. a You can type a new value for the angle into the text box and see the actual value of the angle in the text box.

The underlying JavaScript code

<form>
<input type="text" id="degrees">
<input type="button" value="set direction" onclick="setDirection()">
</form>
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
var c = brd.create('circle',[[0,0],1]);
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
brd.addHook(function(){
                  document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
            }, 'move');

var setDirection = function() {
   var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
   var r = c.Radius();
   p.moveTo([r*Math.cos(phi),r*Math.sin(phi)],1000);

}

Version 2

The underlying JavaScript code

<form>
<input type="text" id="degrees2">
<input type="button" value="set direction" onclick="setDirection2()">
</form>
var brd2 = JXG.JSXGraph.initBoard('box2',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
var p1 = brd2.create('point',[0,0], {visible:false, fixed:true});
var p2 = brd2.create('point',[1,0]);
var p3 = brd2.create('point',[0,1]);
var a = brd2.create('arc',[p1,p2,p3]);

var q = brd2.create('glider',[0.5,0.5,a],{name:'drag me'}); // global variable
brd2.create('segment',[q,p1]);

brd2.addHook(function(){
                  document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
            }, 'move');

var setDirection2 = function() {
   var phi = 1*document.getElementById('degrees2').value*Math.PI/180.0;
   var r = a.Radius();
   q.moveTo([r*Math.cos(phi),r*Math.sin(phi)]);

}