Orthogonal axis affinity: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
 
(25 intermediate revisions by the same user not shown)
Line 6: Line 6:
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 5, 5, -5], axis: true, showClearTraces: true});
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 5, 5, -5], axis: true, showClearTraces: true});


var k0 = board.create('circle', [[0,0], 4], {fixed: true, strokeWidth: 0.8});
var O = board.create('point', [0,0], {name: 'O', fixed: true});
var B = board.create('glider', [2.8, 3, k0], {name: 'B'});
var k0 = board.create('circle', [O, 4], {fixed: true, strokeWidth: 0.8});
var k1 = board.create('circle', [O, 2], {fixed: true, strokeWidth: 0.8});
 
var B = board.create('glider', [2.65, 3, k0], {name: 'B'});
var li = board.create('line', [O, B], {straightFirst: false});
var g = board.create('parallel', [B, board.defaultAxes.x]);
 
var P = board.create('intersection', [li, k1, 0], {name: 'P',  trace: true});
var gs = board.create('parallel', [P, board.defaultAxes.y]);
var X = board.create('intersection', [gs, board.defaultAxes.x, 0], {name: 'X'});
var Ps = board.create('intersection', [gs, g, 0], {name: "P'", trace: true, color: 'blue'});
 
var pol = board.create('polygon', [O, X, P, Ps, B], {fillColor: 'yellow'});
</jsxgraph>
 
 
<jsxgraph width="500" height="500" box="box2">
JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 16;
JXG.Options.line.strokeWidth = 0.8;
 
var board = JXG.JSXGraph.initBoard('box2', { boundingbox: [-5, 5, 5, -5], axis: false, showClearTraces: true});
 
var g = board.create('line', [-4, -2, 4]);
var q1 = board.create('glider', [-2, 2, g], {name: 'q_1'});
var q2 = board.create('glider', [0, 1.5, g], {name: 'q_2'});
var q3 = board.create('glider', [1, 2, g], {name: 'q_3'});
var q4 = board.create('glider', [3, 2, g], {name: 'q_4'});
var p = board.create('point', [2, 0], {name: 'p'});
board.create('segment', [p, q1]);
board.create('segment', [p, q2]);
board.create('segment', [p, q3], {strokeColor: 'red', name: '2', withLabel:true});
board.create('segment', [p, q4]);
</jsxgraph>
</jsxgraph>


=== The underlying JavaScript code ===
=== The underlying JavaScript code ===
<source lang="javascript">
<source lang="javascript">
JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 16;
JXG.Options.line.strokeWidth = 0.8;
var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 5, 5, -5], axis: true, showClearTraces: true});
var O = board.create('point', [0,0], {name: 'O', fixed: true});
var k0 = board.create('circle', [O, 4], {fixed: true, strokeWidth: 0.8});
var k1 = board.create('circle', [O, 2], {fixed: true, strokeWidth: 0.8});
var B = board.create('glider', [2.65, 3, k0], {name: 'B'});
var li = board.create('line', [O, B], {straightFirst: false});
var g = board.create('parallel', [B, board.defaultAxes.x]);
var P = board.create('intersection', [li, k1, 0], {name: 'P',  trace: true});
var gs = board.create('parallel', [P, board.defaultAxes.y]);
var X = board.create('intersection', [gs, board.defaultAxes.x, 0], {name: 'X'});
var Ps = board.create('intersection', [gs, g, 0], {name: "P'", trace: true, color: 'blue'});
var pol = board.create('polygon', [O, X, P, Ps, B], {fillColor: 'yellow'});
</source>
<source lang="javascript">
JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 16;
JXG.Options.line.strokeWidth = 0.8;
var board = JXG.JSXGraph.initBoard('box2', { boundingbox: [-5, 5, 5, -5], axis: false, showClearTraces: true});
var g = board.create('line', [-4, -2, 4]);
var q1 = board.create('glider', [-2, 2, g], {name: 'q_1'});
var q2 = board.create('glider', [0, 1.5, g], {name: 'q_2'});
var q3 = board.create('glider', [1, 2, g], {name: 'q_3'});
var q4 = board.create('glider', [3, 2, g], {name: 'q_4'});
var p = board.create('point', [2, 0], {name: 'p'});
board.create('segment', [p, q1]);
board.create('segment', [p, q2]);
board.create('segment', [p, q3], {strokeColor: 'red'});
board.create('segment', [p, q4]);
</source>
</source>
[[Category:Examples]]
[[Category:Examples]]
[[Category:Geometry]]
[[Category:Geometry]]

Latest revision as of 19:37, 27 June 2021



The underlying JavaScript code

JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 16;
JXG.Options.line.strokeWidth = 0.8;

var board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 5, 5, -5], axis: true, showClearTraces: true});

var O = board.create('point', [0,0], {name: 'O', fixed: true});
var k0 = board.create('circle', [O, 4], {fixed: true, strokeWidth: 0.8});
var k1 = board.create('circle', [O, 2], {fixed: true, strokeWidth: 0.8});

var B = board.create('glider', [2.65, 3, k0], {name: 'B'});
var li = board.create('line', [O, B], {straightFirst: false});
var g = board.create('parallel', [B, board.defaultAxes.x]);

var P = board.create('intersection', [li, k1, 0], {name: 'P',  trace: true});
var gs = board.create('parallel', [P, board.defaultAxes.y]);
var X = board.create('intersection', [gs, board.defaultAxes.x, 0], {name: 'X'});
var Ps = board.create('intersection', [gs, g, 0], {name: "P'", trace: true, color: 'blue'});

var pol = board.create('polygon', [O, X, P, Ps, B], {fillColor: 'yellow'});
JXG.Options.label.autoPosition = true;
JXG.Options.text.fontSize = 16;
JXG.Options.line.strokeWidth = 0.8;

var board = JXG.JSXGraph.initBoard('box2', { boundingbox: [-5, 5, 5, -5], axis: false, showClearTraces: true});

var g = board.create('line', [-4, -2, 4]);
var q1 = board.create('glider', [-2, 2, g], {name: 'q_1'});
var q2 = board.create('glider', [0, 1.5, g], {name: 'q_2'});
var q3 = board.create('glider', [1, 2, g], {name: 'q_3'});
var q4 = board.create('glider', [3, 2, g], {name: 'q_4'});
var p = board.create('point', [2, 0], {name: 'p'});
board.create('segment', [p, q1]);
board.create('segment', [p, q2]);
board.create('segment', [p, q3], {strokeColor: 'red'});
board.create('segment', [p, q4]);