jsxgraph

JSXGraph - Animation of one element pushing another element out of the way, JSX behavior not as expected

I'm trying to create an animation which has a circle moving from left to right, and upon encountering a rod the rod is pushed out of the way by the circle.

I'm using an 'if else' and a nested 'if else' to achieve that.

https://jsfiddle.net/Cleonis/h9u5xjzb/

The large circle and the intersection point are auxillary elements, they will be set to invisible in the finished version.

The element 'rodB' is a line, hinging around a fixed coordinate [1.0, -0.5], the coordinates of the other end of the rod are dependent on a conditional.

The first transition happens as expected: when the moving circle reaches the rod it starts "pushing" the rod.

However, the second transition does not happen, and I cannot explain why.

(When the center of the pushing circle has reached x-coordinate 1.1 the rod should become static again, in a slanted position.)

Either there is an error in the way I declared the 'if else' statement, or the problem is due to a quirk of JSXGraph.

My expectation is that when a function calls a point element, then JSXGraph will return an array of the form [x,y]

I also tried a switch statement, but that had the same result; the first transition happens, but the second transition does not happen.


So:
Transition from static form to dynamic form works.
But then the element 'rodB' should go from dynamic form to static form again, and that does not happen.

Can the intention of the animation be achieved?

The function with the conditional statements

var pushPoint = function() {
  if (pos < (1.0 - or)) {return [1.0, 0.0]} 
  else {
    if (pos < 1.1) {
      //return [function() {return intersection1B.X()}, function() {return intersection1B.Y()}];
      return intersection1B;
      //return [1.1, -0.2]
    }
    else {return [1.1, -0.2]} 
  }
}
Solution

  • Defining the second point of the rod by a function which sometimes returns a point and sometimes coordinates does not work. The rod remains visible if the coordinates of the intersection point are returned:

    var pushPoint = function() {
  if (pos < (1.0 - or)) {return [1.0, 0.0]} 
  else {
    if (pos < 1.1) {
      return intersection1B.coords.usrCoords.slice(1);
    }
    else {return [1.1, -0.2]} 
  }
}

// This line element calls the function 'pushPOint()' to obtain coordinate array
var rodB = board.create('line', 
  [[1.0, -0.5], function() {return pushPoint()}], 
  {straightFirst:false, straightLast:false}
);

    See it live at https://jsfiddle.net/ohqpvz9x/1/.