sequential animations

[Gilles Dubois]

Hello to you all,
I have a rather difficult subject to submit.
Animations are easy to create under JSXGraph, for example with a moveto. I used this feature a lot of times and it works as expected.
But today I had an additional need. I wanted to illustrate some geometrical construction, that mathematicians call 'with ruler and compasses'. This subject is very interesting going as far as algebraic and transcendental field extensions and I think that in the past I will need to illustrate a lot of them and i decided to begin, with something simple, construct the 'mediator of a segment, according to the well known method known from Antiquity.
So to be demonstrative and attractive such construction have to bring 'real' tools, rulers, pencils, compasses, (as images) use them to draw lines, remove them, bring new ones, etc.. etc..
This leads to sequential animations if you want to have everything automatized.
Actually I was not successful with all the techniques I know up to now. When a few animations are programmed they always start together (simultaneously). If you try to use flags as global variables for communication between them either they continue to start together, or only the first one starts. To sum up after you have launched a 'moveto' you don't control anything about its execution, and I couldn't find any way to delay the start of the second till the first is completed.
So I began to ask my 'friend' Google what he knew about this subject.
First, it's clear that I'm not the only one to have such question.
I could read a lot of suggestions, some of them using the JQuery library. I discarded all of these because I don't want to use anything extra (JSXGraph and MathJax is enough).
Some solutions didn't work at all.
One was working with very simple examples here:
http://stackoverflow.com/questions/11416850/sequential-animations-in-javascript
I tried to apply to my case, but unfortunately I wasn't successful. Maybe the mechanic of moveto conflicts with the techniques used here but it was impossible to manage this synchronism problem.
I searched the JSXGraph doc but didn't find anything.
I remember that I managed very well this case with Geogebra applets (they use mainly sliders for animation). Solution consisted in using one and only one 'dummy' slider controlling the process, which animation to activate was decided by the range of the value of the slider with a case of switch.
In pure Java Swing or AWT applets it was possible to use threads and communication between them because Java supports multi-thread programming not allowed by JS as far as I know.
Here I use a slider point to control the process (the 'moveto' concerns this point), since this point should make 'jumps' on the same figure or even jump from one figure to another, I couldn't imitate what I did with GeoGebra.
So after a few hours of work I decided to choose 'event driven' technique with use of buttons. in this case it's the user who fires the animations one after the other. Actually this is not bad because it's less passive, but I would like to have the choice : fully automatic or user (event) driven.
Result is here:
http://gilles.dubois10.free.fr/geometrie_affine/euclihymed.html
Now my question is :
Is there a simple  (or not simple) way inside the JSXGraph library to manage sequential animations ?
If not, does anybody here know a trick of JS programming that would work with the library ?
Thank you !
Gilles

[Alfred Wassermann]

Internally, the JSXGraph animation methods moveTo() and visit() are realized by the JavaScript methods setInterval(). It is hard to synchronize code which is executed by setInterval. Moreover, the handling of setInterval might differ from platform to platform.

It may help that you can supply a function which is executed after the animation has finished:

point.moveTo([10,4], 2000, {callback: function(){ alert("done"); });

Using this, you can chain animations.

Another approach is to do your animation by yourself using JavaScript's setTimeout() or setInterval(). See for our age pyramid example: http://jsxgraph.uni-bayreuth.de/wiki/index.php/Animated_age_pyramid
There, we use setTimeout() to animate a slider, which in turn changes the age pyramid.

Best wishes,
Alfred

[Gilles Dubois]

Hello Alfred,
thank you for answering.
Honestly I wasn't able to use your suggestion in my case.
Can you give me a very simple example with two points moving on segments, one after the other.
Danke !

[pablo...@gmail.com]

There is a new spec for animations in the browser that work on DOM and SVG elements:
https://w3c.github.io/web-animations/

Google's polyfill until browsers support it natively:
https://github.com/web-animations/web-animations-js

On Chrome element.animate is native so it should fix the setTimeout issues.

[Alfred Wassermann]

Dear Gilles,
here is a minimal example:

var seg = board.create('segment', [[-5,5], [5,5]]);
var A = board.create('glider', [-4, 5, seg], {name: 'A'});
var B = board.create('glider', [4, 5, seg], {name: 'B'});

animateA = function() {
    A.moveTo([4.5, 5], 2000, {callback: animateB});  // animateB is called after moveTo is finished.
};

animateB = function() {
    B.moveTo([-4.5, 5], 2000);
};

animateA();

Best wishes,
Alfred

[Gilles Dubois]

Thank you Alfred I will try all of this soon. I'll keep you informed.
BTW I will have a new communication about intersections of circles, gliders, tangency and related questions. I need time to formulate this correctly.
Have a good day.
Gilles

[Gilles Dubois]

Thank you Alfred.
IT WORKS !!!
I'm a bit surprised that nobody on the web proposes such simple solution (independently of JSXGraph). You cannot imagine what I saw...
Actually my moveTo is inside a function which is called iteratively.
So I must manage inside this function which step of construction is calling it and modify the moveTo call accordingly.
But it remains simple enough.
So to start the whole thing it's enough to start step n°1, the moveTo of which call step n°2 and so on. the process is fully automatized, which was my purpose.
You can see result on this page.
http://gilles.dubois10.free.fr/geometrie_affine/plantriangles.html
Actually there's 9  distinct JSXGraph applets on the same page. The one concerned is with (French) title
"construction de la bissectrice d'un angle."
which means "Construction of an angle bisector".
You con access the code of 'bissectrice.js' easily.
For the rest it's either very elementary, sometimes a little more advanced (Feuerbach circle, Euler, Steiner, Simson lines for the triangle).
As soon as I have some time I will come back on the intersection subject.
Auf Wiedersehen !