Difference between revisions of "Bearing"

From JSXGraph Wiki
Jump to: navigation, search
(New page: <jsxgraph width="600" height="500"> 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...)
 
 
(42 intermediate revisions by 2 users not shown)
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.
 +
<br /><br />
 +
<html>
 +
<input type="text" id="degrees">
 +
<button onclick="setDirection()">set direction</button>
 +
</html>
 
<jsxgraph width="600" height="500">
 
<jsxgraph width="600" height="500">
 
var brd = JXG.JSXGraph.initBoard('jxgbox',{axis:true,boundingbox:[-2,1.5,2,-1.5],keepaspectratio:true});
 
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 c = brd.create('circle',[[0,0],1]);
/*
+
var p = brd.create('glider',[-1,0.5,c],{name:'drag me'}); // global variable
var p = brd.create'slider',[[2,8],[6,8],[0,3,6]]); brd.createElement('text',[1,8,'p:']);
+
p.on('drag', function(){
var eps = brd.create('slider',[[2,7],[6,7],[-6,0.5,6]]); brd.createElement('text',[1,7,'&epsilon;:']);
+
                  document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
var len = brd.create('slider',[[2,6],[6,6],[0,3,6]]); brd.createElement('text',[1,6,'len:']);
+
            });
var rho = brd.create('slider', [[2,5],[6,5],[0,0,2*Math.PI]]); brd.createElement('text',[1,5,'&rho;:']);
+
 
var f = brd.create('curve',
+
var setDirection = function() {
  [function(phi) { return p.Value()/(1-eps.Value()*Math.cos(phi+rho.Value())); }, [1,0], 0,function(){return len.Value()*Math.PI}],     
+
  var phi = 1*document.getElementById('degrees').value*Math.PI/180.0;
  {curveType:'polar', strokewidth:2, strokeColor:'#CA7291'}
+
  var r = c.Radius();
  );       
+
  p.moveTo([r*Math.cos(phi),r*Math.sin(phi)],1000);
var q = brd.createElement('glider', [f], {style:6,name:'G'});  
+
}
brd.createElement('tangent', [q], {dash:3});  
 
*/
 
//brd.addHook(function(){document.getElementById('ausgabe').innerHTML = (p.Value()).toFixed(1) + "/(1 - (" + (eps.Value()).toFixed(1) //+ ")*cos(&phi;+"+(rho.Value()).toFixed(1) +"))";});
 
 
</jsxgraph>
 
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="html4strict">
 +
<input type="text" id="degrees">
 +
<button onclick="setDirection()">set direction</button>
 +
</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
 +
p.on('drag', function(){
 +
                  document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
 +
            });
 +
 +
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);
 +
 +
}
 +
</source>
 +
 +
==Version 2==
 +
 +
<html>
 +
<input type="text" id="degrees2">
 +
<button onclick="setDirection2()">set direction</button>
 +
</html>
 +
<jsxgraph box="box2" width="600" height="500">
 +
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]);
 +
 +
q.on('drag', function(){
 +
                  document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
 +
            });
 +
 +
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)]);
 +
 +
}
 +
</jsxgraph>
 +
 +
===The underlying JavaScript code===
 +
<source lang="html4strict">
 +
<input type="text" id="degrees2">
 +
<button onclick="setDirection2()">set direction</button>
 +
</source>
 +
 +
<source lang="javascript">
 +
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]);
 +
q.on('drag', function(){
 +
                  document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
 +
            });
 +
 +
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)]);
 +
 +
}
 +
</source>
 +
 +
[[Category:Examples]]

Latest revision as of 09:57, 6 April 2017

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

<input type="text" id="degrees">
<button onclick="setDirection()">set direction</button>
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
p.on('drag', function(){
                  document.getElementById('degrees').value = (Math.atan2(p.Y(),p.X())*180/Math.PI).toFixed(0);
            });

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

<input type="text" id="degrees2">
<button onclick="setDirection2()">set direction</button>
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]);
q.on('drag', function(){
                  document.getElementById('degrees2').value = (Math.atan2(q.Y(),q.X())*180/Math.PI).toFixed(0);
            });

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

}