jsxgraph

Chaotic behavior with point.moveAlong

Here's a simple animation that slides a point along a curve:

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

function f(x) {
  return Math.sin(x);
}

board.create('functiongraph', f);

p = board.create('point', [0, 0], {
  name: ''
});

var path = [];
var N = 500;
var x = 0;

for (i = 0; i < N; i++) {
  path[i] = [x, f(x)];
  x += 5 / N;
}

p.moveAlong(path, 5000);

When the number of steps N is fairly small, say 50, the point moves smoothly along the curve as expected. But when N is larger, like 100 or 500, the point dances randomly around the board. Any idea what's going on?

In this case the animation is smooth enough with 50 steps, but in another animation I'm writing I need more steps and I'm running into the same glitch. Can anyone suggest a fix or at least a workaround?

Solution

  • When the path given to moveAlong is an array, by default some kind of interpolation between consecutive steps is performed (see https://jsxgraph.org/docs/symbols/JXG.CoordsElement.html#moveAlong).

    I check that desabling this option the sketch works as intended:

    p.moveAlong(path, 6000, { interpolate: false });