CODEWITHSUNDEEP
jsxgraph
user13887828
user13887828

Reputation:

JSXGraph - Persistency Problem : Drawing more than one function

I want to draw multiple-graphs inside for loop using JSXGraph code. Everthing seems ok, working but when I click a point or a tangent line, they all disappears since they under for loop. What I understood is that I need to put them inside a paint function (and update somewhere) like in Java, but I could not success to find it. What is the proper way to draw persistence multiple graphs using for loop? Thanks. This is my code :

// functions and derivatives 
const board = JXG.JSXGraph.initBoard('jxgbox', {
  boundingbox: [-10, 10, 10, -10],
  axis: true
});

// Macro function plotter
function addCurve(board, func, atts) {
  var f = board.create('functiongraph', [func], atts);
  return f;
}

// Simplified plotting of function
function plot(func, atts) {
  if (atts == null) {
    return addCurve(board, func, {
      strokecolor: 'green',
      strokewidth: 2
    });
  } else {
    return addCurve(board, func, atts);
  }
}
    
// function of x
function f(x) {
  return Math.pow(x,2);
}

//draw f
c = plot(f);
  
//define derivative function, let command provide not to write "var" keyword
// in front of each variables

let ms=[],
  i=0,
  m=0,
  co=[],
  funcs=[],
  points=[];

for(i=0; i<11; i++) {
  m=(f(i+1)-f(i-1))/(i+1-i+1);
  co[i]=f(i)-m*i;    
  ms[i]=m;
  console.log("y="+ms[i]+"x+("+co[i]+")");
  
  // Create a function graph for each derivative function df(x) = ms[i]*x+co[i]
  funcs[i] = board.create('functiongraph',
    [function(x){ return ms[i]*x+co[i];}, -10, 10]
  );
  
  // Create a constrained point using anonymous function
    points[i] = board.create('point', [i, function () { return ms[i]; }]);  
}

console.log("aha"+c);

Upvotes: 1

Views: 160

Answers (1)

Alfred Wassermann
Alfred Wassermann

Reputation: 2323

Your example code is completely correct beside a few subleties regarding let and var. The trick is to define i and m with let in the for-loop block that creates the derivative function graphs, but to define the arrays containing the slopes (ms) and constant values (co) with var. The latter makes the arrays persisent and the former is equivalent to define the functions "by hand" like

funcs[0] = board.create('functiongraph', [
    function(x){ return ms[0] * x + co[0]; }, -10, 10]
);
funcs[1] = board.create('functiongraph', [
    function(x){ return ms[1] * x + co[1]; }, -10, 10]
);
...

Here is the code for the loop:

var c = plot(f);

var ms=[],
  co=[],
  funcs=[],
  points=[];

for (let i=0; i<11; i++) {
  let m = (f(i+1)-f(i-1)) / (i+1-i+1);
  co[i] = f(i) - m * i;    
  ms[i] = m;
  console.log("y=" + ms[i] + "x+(" + co[i] + ")");

  // Create a function graph for each derivative function df(x) = ms[i]*x+co[i]
  funcs[i] = board.create('functiongraph',
    [function(x){ return ms[i] * x + co[i]; }, -10, 10]
  );

  // Create a constrained point using anonymous function
  points[i] = board.create('point', [i, function () { return ms[i]; }]);  
}

See it live at https://jsfiddle.net/sp2ntf8v/

Upvotes: 0

Related Questions