Math-utils-js

math-utils-js

View the Project on GitHub phbou72/math-utils-js

What are the features of Math utils JS?


Evaluate a math expression in ASCII format

Example :
cos(2 * pi) + sqrt(4) + e^(2) - 1.5 + 4!/(4-1)!

Result :

To see more supported expressions examples.

Usage : 

// Create an EquationParser
var parser = new MathUtils.EquationParser();

// Get you content and evaluate the expression
var mathExpression = $("#math-expression");
var result = parser.evaluate(mathExpression.html());

// Put the result in the page!
mathExpressionResult.html(result);
var mathExpressionResult = $("#math-expression-result");


Convert a math expression in ASCII format to LaTex

Example :
cos(2 * pi) + sqrt(4) + e^(2) - 1.5 + 4!/(4-1)!

Result :

Bonus! Use MathJax to make everything better :

To see more supported expressions examples

Usage :

// Create an EquationParser
var parser = new MathUtils.EquationParser();

// Get you content and evaluate the expression
var mathExpression = $("#math-expression");
var result = parser.evaluate(mathExpression.html());

// Put the result in the page!
var mathExpressionLatex = $("#math-expression-latex");
mathExpressionResult.html(result);

var mathExpressionMathJax = $("#math-expression-mathjax");
mathExpressionMathJax.html("$$ " + result + " $$");

Interactive graph paper

The features :

Add shape




Adding a graph paper to a page :

<div style="height: 300px">
  <svg id="graph-paper"></svg>

  <div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="move btn btn-primary">Modify</button>
    <button type="button" class="delete btn btn-primary">Delete</button>
  </div>

  <div class="btn-group">
    <a class="btn dropdown-toggle btn-primary" data-toggle="dropdown" href="#">
      Add shape
      <span class="caret"></span>
    </a>
    <ul class="dropdown-menu">
      <li><a href="#" class="vertex">Vertex</a></li>
      <li><a href="#" class="line">Line</a></li>
      <li><a href="#" class="polygon">Polygon</a></li>
    </ul>
  </div>
</div>


Creating a Graph Paper :

//Specify an HTML id in the call
var graphPaper = new MathUtils.GraphPaper("#graph-paper");


Adding initial shapes is simple :

var graphPaper = new MathUtils.GraphPaper("#graph-paper");

var shapes = {
  vertexs: [{x:3, y:3}, {x:1, y:2}],
  lines: [[{x:1, y:1}, {x:2, y:4}],[{x:2, y:2}, {x:3, y:0}]],
  polygons: [[{x:5, y:1}, {x:5, y:3}, {x:7, y:3}, {x:7, y:1}]]
}

graphPaper.addShapes(shapes)


API :

Methods Description Default
setInitialPathEditable(bool) To specify if the initial shapes are editable True
setTool(string) To specify the actual tool used. Values : "move", "delete", "vertex", "line", "polygon" "move"
setDrawingMode(string) How the tools and cursor behave on the surface. Values : "free", "snapToGrid", "snapToIntersection" "snapToIntersection"
getAllShapes() Return all the shapes vertexs in an object
getAddedShapes() Return only the shapes manually added


Dependencies

Needed :

Optionnals :


Coming soon...