CODEWITHSUNDEEP
jsxgraph
Cleonis
Cleonis

Reputation: 160

JSXGraph: when creating a data plot, what type of input does the 'curve' element accept?

(I deleted an earlier version of this question when I discovered I had goofed the javascript in the jsfiddle. I hope this time there isn't a similar error)

The documentation of the 'curve' element:
http://jsxgraph.org/docs/symbols/Curve.html

I created this jsfiddle to confirm the documentation:
https://jsfiddle.net/Cleonis/7ocrm629/


I created this jsfiddle to experiment:
https://jsfiddle.net/Cleonis/2jgtq3L4/

I confirmed that the 'curve' element accepts the following array notation as input:

var cpArrayX2 = [-1.0, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0.0];
var cpArrayY2 = [0.0, 0.1434, 0.2861, 0.4262, 0.5608, 0.6854, 0.7952, 0.8858, 0.9519, 0.9898, 1.0];

var trajectory = board.create('curve', 
    [cpArrayX2, cpArrayY2],
  {dash:2}
);

Then I tried the following way to populate arrays:

var cpArrayX = [];
var cpArrayY = [];
 

cpArrayX[0]  = -1.0;
cpArrayX[1]  = -0.9;
// continuing to cpArrayX[20]

cpArrayY[0]  =  0.0;
cpArrayY[1]  = function() {return 0.1434};
// continuing to cpArrayY[20]

var cpArray = [];  // cpArray for: 'control point array'

cpArray[0] = board.create('point', 
  [-1.0, 0.0], 
);
cpArray[1] = board.create('point', 
  [-0.9, cpArrayY[1]], 
);
// continuing to cpArray[20]

var trajectory = board.create('curve', 
    [cpArrayX, cpArrayY],
  {strokeWidth:4}
);

What happens is that the element 'point' does accept the array input, but it seems the 'curve' element does not accept the array input. It fails silently.

I assume that the array did get populated, since the 'point' elements do get graphed.

But if the array did get populated I cannot explain why JSXGraph does draw the curve with [cpArrayX2, cpArrayY2] as input, but not with [cpArrayX, cpArrayY] as input.



LATER EDIT:
https://jsxgraph.org/wiki/index.php/Curve

On the above wiki page there is a description of a dynamic data plot. The user drags a point and that changes the amplitude of the plot. That is what I need. However, the implementation in that example requires a mathematical function, and what I have for the input is the array of y-coordinates.

LATER LATER EDIT:
I provided the y-coordinates with a series of 'if else' statements; the element 'curve' works now. So: the y-coordinate of the 'data plot' type does accept dynamical input. I'm guessing that it's only the x-coordinate input that doesn't accept dynamical input.

Upvotes: 0

Views: 167

Answers (1)

Alfred Wassermann
Alfred Wassermann

Reputation: 2323

For this you can use the method updataDataArray. Here is an example to create a 5-gon with dragabble center point A:

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

var A = board.create('point', [1, 1]);
var c = board.create('curve', [[], []]);
c.updateDataArray = function() {
    var i,
        N = 5,
        r = 3;
    this.dataX = [];
    this.dataY = [];

    for (i = 0; i < N; i++) {
        this.dataX[i] = A.X() + Math.cos(i * 2 * Math.PI / N) * r;
        this.dataY[i] = A.Y() + Math.sin(i * 2 * Math.PI / N) * r;
    }
    this.dataX[i] = A.X() + Math.cos(0) * r;
    this.dataY[i] = A.Y() + Math.sin(0) * r;
};

board.update();

In this method you can create arbitrary data points which define the curve. The x-coordinates of these points are stored in this.dataX, the y-coordinates are in this.dataY. See it live at https://jsfiddle.net/mprtcnuL/

Upvotes: 0

Related Questions