Mutually dependent line and gliders: Difference between revisions
From JSXGraph Wiki
A WASSERMANN (talk | contribs) No edit summary  | 
				A WASSERMANN (talk | contribs) No edit summary  | 
				||
| (13 intermediate revisions by the same user not shown) | |||
| Line 1: | Line 1: | ||
In this example, a and b are gliders on lines. Additionally, the glider a depends on glider b.  | |||
<jsxgraph width="600" height="600">  | <jsxgraph width="600" height="600">  | ||
var board = JXG.JSXGraph.initBoard('jxgbox', {  | var board = JXG.JSXGraph.initBoard('jxgbox', {  | ||
| Line 8: | Line 9: | ||
var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});  | var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});  | ||
var el1 = board.create('line',[[1,0],[1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});  | var el1 = board.create('line',[[1,0], [1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});  | ||
var gl1 = board.create('glider', [0,0, el0], {name:'b'});  | var gl1 = board.create('glider', [0,0, el0], {name:'b'});  | ||
var gl2 = board.create('glider', [1,0, el1], {name:'a'});  | var gl2 = board.create('glider', [1,0, el1], {name:'a'});  | ||
var line = board.create('line', [0,0,1]);  | //gl1.draggable = function() {return true; };  | ||
//gl2.draggable = function() {return true; };  | |||
var line = board.create('line', [gl1, gl2]);  | |||
var offset = gl2.Y() - gl1.Y();  | |||
gl1.on('drag', function() {  | |||
    gl2.moveTo([gl1.X(), gl1.Y() + offset]);  | |||
    });  | |||
gl2.on('drag', function() {  | |||
    offset = gl2.Y() - gl1.Y();  | |||
    });  | |||
</jsxgraph>  | |||
===The JavaScript code===  | |||
<source lang="javascript">  | |||
var board = JXG.JSXGraph.initBoard('jxgbox', {  | |||
    boundingbox: [-5,5,5,-5],  | |||
    keepaspectratio: true, axis:false, grid:true  | |||
    });  | |||
board.create('axis',[[0,0],[1,0]], {ticks: {majorHeight:20}});  | |||
board.create('axis',[[0,0],[0,1]], {ticks: {majorHeight:20}});  | |||
var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});  | |||
var el1 = board.create('line',[[1,0], [1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});  | |||
var gl1 = board.create('glider', [0,0, el0], {name:'b'});  | |||
var gl2 = board.create('glider', [1,0, el1], {name:'a'});  | |||
//gl1.draggable = function() {return true; };  | |||
//gl2.draggable = function() {return true; };  | |||
var line = board.create('line', [gl1, gl2]);  | |||
var offset = gl2.Y() - gl1.Y();  | var offset = gl2.Y() - gl1.Y();  | ||
gl1.on('drag', function() {  | gl1.on('drag', function() {  | ||
     gl2.moveTo([gl1.X(), gl1.Y() + offset]);  |      gl2.moveTo([gl1.X(), gl1.Y() + offset]);  | ||
    });  | |||
gl2.on('drag', function() {  | gl2.on('drag', function() {  | ||
     offset = gl2.Y() - gl1.Y();  |      offset = gl2.Y() - gl1.Y();  | ||
    });  | |||
</source>  | |||
[[Category:Examples]]  | |||
Latest revision as of 12:37, 23 June 2020
In this example, a and b are gliders on lines. Additionally, the glider a depends on glider b.
The JavaScript code
var board = JXG.JSXGraph.initBoard('jxgbox', {
    boundingbox: [-5,5,5,-5],
    keepaspectratio: true, axis:false, grid:true
    });
board.create('axis',[[0,0],[1,0]], {ticks: {majorHeight:20}});
board.create('axis',[[0,0],[0,1]], {ticks: {majorHeight:20}});
var el0 = board.create('line',[[0,0], [0,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0'});
var el1 = board.create('line',[[1,0], [1,1]], {strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=1'});
var gl1 = board.create('glider', [0,0, el0], {name:'b'});
var gl2 = board.create('glider', [1,0, el1], {name:'a'});
//gl1.draggable = function() {return true; };
//gl2.draggable = function() {return true; };
var line = board.create('line', [gl1, gl2]);
var offset = gl2.Y() - gl1.Y();
gl1.on('drag', function() {
    gl2.moveTo([gl1.X(), gl1.Y() + offset]);
    });
gl2.on('drag', function() {
    offset = gl2.Y() - gl1.Y();
    });