Difference between revisions of "Bearing"

From JSXGraph Wiki
Jump to: navigation, search
Line 2: Line 2:
 
<form>
 
<form>
 
<input type="text" id="degrees">
 
<input type="text" id="degrees">
<input type="button" value="set dircetion" onclick="setDirection()">
+
<input type="button" value="set direction" onclick="setDirection()">
 
</form>
 
</form>
 
</html>
 
</html>
Line 20: Line 20:
 
}
 
}
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<code html4strict"
 +
<input type="text" id="degrees">
 +
<input type="button" value="set direction" onclick="setDirection()">
 +
</source>
 +
 +
<source lang="javascript">
 +
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(1);
 +
            });
 +
 +
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)]);
 +
 +
}
 +
</source>
 +
 +
[[Category:Examples]]

Revision as of 17:15, 16 June 2010

The underlying JavaScript code

<code html4strict" <input type="text" id="degrees"> <input type="button" value="set direction" onclick="setDirection()"> </source>

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(1);
            });

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

}