How to convert String to Math Function only once?

Question

I want to build something similar to desmos where you can draw a graph in a canvas and then move it.

I have been successful so far, but only user input remains.

Using the tag <input type="text">, I want the user to write, for example:

"5x + 2"

The result should be:

var f = 5*x + 2;

I searched a lot for a way to do this, and the only ones I found were some JavaScript Maths libraries and a function eval(). The latter is really useful, because I could replace it with xa value xon the graph, and it will work to plot the function. The problem is that it breaks down a lot when I want to move the chart, so this is not a good idea.

I am sure that it lags behind because the function eval()should convert the string every time for each x value of the canvas about 40-50 times per second.

What I want to achieve is to convert a string to a Math function only once, and then use it.

Is it possible? Can anybody help

EDIT 1 : This is my function:

function f (pixelX) {
    var x = getCoordX (pixelX);

    var f = 2 * x + 2;

    return getPixelY(f);
}

Answer 1

To answer your question (although this will not solve your problem).

You can do it.

var myString = "5 * x + 2";
var f = Function("x", "return " + myString);

It creates functionout string. The first argument is the name of the first parameter x, and the second argument is the body of the function (operator return);

: f(3), 17.

, , 5 * x 5x.

, , .

, eval , , . draw requestAnimationFrame, , .

Answer 2

eval, - JavaScript.

:

function solveForX(equation, xValue) {
  var expanded = equation.replace(/(\d+(?:\.\d+|))x/g, '$1 * x');
  return eval(expanded.replace(/x/g, xValue));
}

console.log(solveForX("5x + 2", 3));       // 17
console.log(solveForX("-4.2x + 3x", 5));   // -6

.as-console-wrapper { top: 0; max-height: 100% !important; }

Hide result

---

-

const expFormat = '(\\d+(?:\\.\\d+|)){{@}}';
var expressionCache = {};
function lookupExpansion(v) {
  if (!expressionCache[v]) {
    expressionCache[v] = new RegExp(expFormat.replace(/\{\{\@\}\}/, v), 'g');
  }
  return expressionCache[v];
}

function toFunction(equation, variables) {
  variables.forEach(variable => {
    equation = equation.replace(lookupExpansion(variable), '$1 * ' + variable);
  });
  equation = equation.replace(/\b([a-z])([a-z])\b/g, '$1 * $2');
  console.log('[DEBUG]: Expanded => ' + equation);
  return Function.apply(null, variables.concat('return ' + equation));
}

// ======================== Simple ============================== //
var simpleMultiVariableFn = toFunction("x + 4x + 2y", ['x', 'y']);
console.log(simpleMultiVariableFn(3, 5)); // 25

// ======================== Advanced ============================ //
var slopeInterceptFunction = (slope, yIntercept) => {
  return x => toFunction("mx + b", ['m', 'x', 'b']).call(null, slope, x, yIntercept);
};
var interceptFn = slopeInterceptFunction(1, 2); // Reusable!
console.log(interceptFn(3)); // 5
console.log(interceptFn(4)); // 6

.as-console-wrapper { top: 0; max-height: 100% !important; }

Hide result

.