line movement

[kdsfl]

How can i make a line move with animation from two sets of coordinates
to another two sets of coordinates?
What i mean is, if i have two points p1 and p2 and a line =
brd.createElement('line', [p1,p2]) i would like that line move to
other two points p3 and p4. What i did was remove the first line then
create another with p3 and p4 as coordinates but when you do it 10
times in a row it blinks and it's not pretty.
Or what i did was
p1.moveTo( [p3.X(), p3.Y()], 1000 ); p2.moveTo( [p4.X(), p4.Y()],
1000 ) and because the line is bound to p1 and p2 it moves as the
points move, but it's one end at a time, so is there a better way?

[alfredw]

Hi kdsfl,
it is not possible to animate lines directly, but it is possible to
define
a translation through a point which is animated. This translation can
be bound to the two defining points of the line.
Here is an example:
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Animation_of_lines

Best wishes,
Alfred

[kdsfl]

Hello alfredw,
Thank you for your quick response, i tried using a translation, and i
have encountered some strange behavior (at least for me),
anyway this is what i tried:

this works of course (original example)
var p0 = brd.createElement('point', [0,0], {name:'T'});
var p1 = brd.createElement('point', [7, 5], {name:'A'});
var p2 = brd.createElement('point', [5, 7], {name:'B'});

this makes the line jump away
var p0 = brd.createElement('point', [9,9], {name:'T'});
var p1 = brd.createElement('point', [7, 5], {name:'A'});
var p2 = brd.createElement('point', [5, 7], {name:'B'});

i tried some more examples and beats me

when p0 is on l it also works
var p0 = brd.createElement('point', [0,0], {name:'T'});
var p1 = brd.createElement('point', [-5, 0], {name:'A'});
var p2 = brd.createElement('point', [5, 0], {name:'B'});

or

var p0 = brd.createElement('point', [0,0], {name:'T'});
var p1 = brd.createElement('point', [0, 5], {name:'A'});
var p2 = brd.createElement('point', [0, -5], {name:'B'});

but this jumps

var p0 = brd.createElement('point', [0,1], {name:'T'});
var p1 = brd.createElement('point', [-5, 1], {name:'A'});
var p2 = brd.createElement('point', [5, 1], {name:'B'});

can you explain a bit more about translations ?

[alfredw]

Yes, the line jumps in your examples.
If p0 is not equal to [0,0] the line "jumps".
Example: if p1 is set to [7,5] and p0 is set to [7,5], then after the
first update of the board
the coordinates of p0 are added to the coordinates of p1, i.e. p1 =
[16,14].
So, it is wise, to start with p0=[0,0] and move it from there to
another location.
If you move p0 to - let's say - [3,-3], the ppoints p1, p2 are shifted
gradually by the vector [3,-3], too.

Now, I enabled trace mode of p0, p1, p2 in
http://jsxgraph.uni-bayreuth.de/wiki/index.php/Animation_of_lines
then it may become more clear.
Best wishes,
Alfred