JSXGraph - Creating a locus of a point that moves as a slider value goes from a min to a max

Question

I am trying to switch to JSXGraph from Geogebra due to the later's poor JS interface. Geogebra has a locus function that takes as input a Point and a Slider and displays the locus the point traces out as the slider goes from min to max.

I can't seem to find they way to implement this in JSXGraph. I have tried using tracecurve with arguments of the slider (which extends glider) and the point, but that does not work.

Thanks.

Answer 1

Is this the functionality you are looking for?

In this version the position of the point is specified by the slider value as the slider moves forward (so basically the x and y coordinates are specified as functions of the slider value).

The code simply creates a polygonal chain and shows/hides part of it as the slider is moved. Of course, the segments can be hidden altogether and the density of the points can be set (as opposed to Geogebra, where the locus depends on the speed the slider is moved).

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

var s = board.create('slider', [[-3,-4], [2,-4],[0,0,8]], {snapWidth: 1});
    
var p = [];

for (let i = 0; i <= 8; i++) { 
  p.push( [i-4,i-4] );
}
    
var loc = board.create('polygonalchain', p, {borders: {strokeWidth: 1, visible: false}, vertices: {visible: false}});

loc.vertices[0].setAttribute({visible: true});

s.on('drag', function(e){
    for (let i = 1; i <= 8; i++) { 
    if (i > s.Value()) {
        loc.vertices[i].setAttribute({visible: false});
      loc.borders[i-1].setAttribute({visible: false});
        } else {
        loc.vertices[i].setAttribute({visible: true});
      loc.borders[i-1].setAttribute({visible: true});
        }   
    }    
});

Link to the JSfiddle

Answer 2

Here is another example using tracecurve. Internally, a slider is glider point. So, all what is needed is a slider s and a point p which somehow depends on the slider. Now, board.create('tracecurve', [s, p]); generates the orbit of point p.

Another option which may be more suitable for classroom is to simply add the attribute trace:true to point p. Then students can explore the trace by dragging the slider.

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

var s = board.create('slider', [[1,-4], [7,-4],[0.01, 1, 8]]);
var p = board.create('point', [
    () => s.Value(),
    () => Math.log(s.Value())
], {trace:true});

var c = board.create('tracecurve', [s, p]);

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