CODEWITHSUNDEEP
duplicatestransformationpointjsxgraph
Alasdair
Alasdair

Reputation: 1354

JSXGraph: creating duplicates of points?

My problem is this: within a triangle ABC, create points P so that the angles PBA and PCA are equal.

To do this, I created a triangle, and a slider for the angle. I then created two points A2 and A3 with the same coordinates of A, and rotated A2 about C by the value of s, and rotated A3 about B by that same value. Then P would be the intersection of the lines B-A3 and C-A2. In Javascript:

var A = board.create('point', [2,4],{name:'A'});
var B = board.create('point', [-6,-2],{name:'B'});
var C = board.create('point', [3,-3],{name:'C'}); 
var A2 = board.create('point',[A.X(),A.Y()],{name:'A2'});
var A3 = board.create('point',[A.X(),A.Y()],{name:'A3'});
var tri = board.create('polygon',[A,B,C]);
var s = board.create('slider', [[-9, 7], [-4, 7], [0, 0.5, Math.PI/2]],{name:'angle'});
var rotC = board.create('transform', [function(){return s.Value();},C], {type:'rotate'});
var rotB = board.create('transform', [function(){return 0.0-s.Value();},B], {type:'rotate'});
rotC.bindTo(A2);
rotB.bindTo(A3);
var L1 = board.create('line',[C,A2],{dash:2});
var L2 = board.create('line',[B,A3],{dash:2});
var P = board.create('intersection',[L1,L2],{name:'P'});
board.update();

This works fine at the beginning, with A, B, C already set. But once I move A, it all falls to pieces, in that A2 and A3 stay where they are, and don't correspond to the new A.

I tried to turn A2 and A3 into functions, as in

var A2 = board.create('point',[function(){return A.X();},function(){return A.Y();}],{name:'A2'});
var A3 = board.create('point',[function(){return A.X();},function(){return A.Y();}],{name:'A3'});

but that didn't work at all; at least A2 and A3 thus defined were not moved at all by the rotation: they simply stuck at A.

Clearly I'm missing something very simple, but what? I'd be happy of any advice!

Upvotes: 0

Views: 36

Answers (1)

Alfred Wassermann
Alfred Wassermann

Reputation: 2323

One of the - not so well known - standard constructions of JSXGraph does the job here. If one has a point A and a JSXGraph transformation, let's say rotC, then it is possible to create a point A2 that has the position rotC(A), i.e. it is the point which results from applying the transformation to A. This can be realized in JSXGraph by

var A2 = board.create('point', [A, rotC], { name: 'A2' });

The complete code then looks like this:

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

var s = board.create('slider', [[-9, 7], [-4, 7], [0, 0.5, Math.PI / 2]], { name: 'angle' });

var A = board.create('point', [2, 4], { name: 'A' });
var B = board.create('point', [-6, -2], { name: 'B' });
var C = board.create('point', [3, -3], { name: 'C' });
var tri = board.create('polygon', [A, B, C]);

var rotC = board.create('transform', [function () { return s.Value(); }, C], { type: 'rotate' });
var rotB = board.create('transform', [function () { return 0.0 - s.Value(); }, B], { type: 'rotate' });

var A2 = board.create('point', [A, rotC], { name: 'A2' });
var A3 = board.create('point', [A, rotB], { name: 'A3' });

var L1 = board.create('line', [C, A2], { dash: 2 });
var L2 = board.create('line', [B, A3], { dash: 2 });
var P = board.create('intersection', [L1, L2], { name: 'P' });

See it live at https://jsfiddle.net/4chrbvt7/

Upvotes: 0

Related Questions