Working with math

Math in WebSharper

Higher level math is supported in WebSharper via the MathJS and MathJax JavaScript libraries. The usage of these libraries are the same as in JavaScript with some small changes. JavaScript would let you use any type in any function, but in WebSharper to use more than one type in a function we have to use the MathNumber wrapper.

A little example:

In JavaScript:

math.add("5", 1.7, true);

In WebSharper:

Math.Add(MathNumber("5"), MathNumber(1.7), MathNumber(true))

Exception is when you use either only floats, ints, or Math.Units

//Only floats
Math.Add(1., 2., 3.)
 
//Only ints
Math.Add(1, 2, 3)
 
//Only Units
Math.Add(Math.Unit("1 cm"), Math.Unit("2 cm"), Math.Unit("3 cm"))

Bignumbers

F# already supports BigInteger (System.Numerics.BigInteger or bigint), but JavaScript does not by default. With WebSharper the usage of these types and their operators are just as easy as working with integers.

Constructing BigInteger:

open System.Numerics
open WebSharper.MathJS
 
//The .Net way
let myBignum = bigint 100
 
//A new way
let myBignumFromString = Math.Bignumber("100")

Operations with these numbers are possible with the .Net way:

let addBignum = myBignum + myBignum //Math.Add(MathNumber(myBigint), MathNumber(myBigint))

Complex number

Just like BigInteger, Complex is a member of System.Numerics too, but JavaScript does not support them. To use the Complex type in our program we could construct it as we're used to it from .Net, but now we're able to do it with Math.Complex() too which is able to construct a Complex number by taking a string with the complex value.

open System.Numerics
open WebSharper.MathJS
 
//The .Net way
let myComplex = Complex(1., 1.)
 
//A new way
let myComplexFromString = Math.Complex("1 + 1i")

After constructing the numbers, we can use them as we're used to it:

let addComplex = myComplex + myComplex //Math.Add(MathNumber(myComplex), MathNumber(myComplex))

Fraction

The original float type in JavaScript has limitations with its precision, but it's solved with the Math.Fraction type which has a much higher precision with its operations. To use this new Math.Fraction, we have to call the Math.Fraction() constructor.

We have many ways to create a Fraction, for example:

open WebSharper.MathJS
 
//From string
let fraction1 = Math.Fraction("1/2")
 
//By giving the numerator and denominator
let fraction2 = Math.Fraction(1, 2)
 
//From float
let fraction3 = Math.Fraction(0.5)

After

Vectors

For vector operations in WebSharper we have to use the MathJS.Math functions and in those functions we have to use the MathNumber wrapper for the vectors. There are few exceptions when we don't have to wrap these vectors. If the function only accepts vectors or matrices, then the wrapper isn't needed (but can be used). (Note that if you wrap these in MathNumber, you might get a MathNumber return value.)

open WebSharper.MathJS
 
let myVector = [| 1.; 2.; 3. |]
 
let addVector = Math.Add(MathNumber(myVector), MathNumber(myVector))

Matrices

The same as for vectors, WebSharper grants a huge variety of Matrix operations and functions, but to use those, we need to wrap the matrices in MathNumber. As we have seen at the vectors, there are some functions where matrices can be used without the MathNumber wrapper. (Note that if you wrap these in MathNumber, you might get a MathNumber return value.)

open WebSharper.MathJS
 
let myMatrix = [| [| 1.; 2. |]; [| 3.; 4. |] |]
 
let addMatrix = Math.Add(MathNumber(myMatrix), MathNumber(myMatrix))

Units

WebSharper allows you to calculate with units too. Most of the functions from Math accept Math.Units to work with. Units are a special kind of types. They have a value and a measurement. Values with different kind of measurements can be used in operations and it will calulate with the given measurements. Units can be freed from their measurements (for example) by dividing.

open WebSharper.MathJS
 
//With a value and a unit
let myUnit = Math.Unit(5, "cm")
 
//Or simply by a string
let myUnitFromString = Math.Unit("5 cm")

Rendering math with WebSharper

Rendering math expressions in WebSharper works with the MathJax JavaScript library. The documentation for MathJax extension can be found here.

MathJax, so WebSharper too allows you to use a variety of common math formatting systems but not only that, it supports more than one output formatting systems.

Supported input formats

Supported output formats

Rendering expresions

To render static expressions (it's part of the static html file or generated with WebSharper to the html file at the beginning), you only need to configure MathJax correctly. It will automatically typeset matching math content once the page loads (see an example here).

To render dynamically changing formulas, update the DOM with the new expression and call MathJax.Typeset() — this replaces the old MathJax.Hub.Queue() method used in version 2.

TeX

To render TeX expressions, ensure the loader module input/tex is included in your MathJax configuration. This allows MathJax to correctly parse TeX input. (TeX documentation)

MathML

To render MathML expressions, include the loader module input/mml in your MathJax configuration. This tells MathJax to treat embedded MathML correctly. (MathML documentation)

Ascii Math

To render AsciiMath expressions, include the loader module input/asciimath in your MathJax configuration. This ensures that MathJax correctly parses AsciiMath notation. (AsciiMath documentation)

An example for expressions

There are many functions in MathJS that calculates an expression, solves a problem. In this example we'll use the Math.Derivative function to get a Node with the result in it. A Node then can be converted to a String, but with the MathJax extension we can render the result if the formula is in TeX format. To do that we have to set up MathJax to parse and render TeX formulas then by using the Node's ToTex() function we convert the result into a String with the formula in TeX formatting.

(Most of the functions don't result a Node, but they can be converted to Node by Math.Parse() or by other means. (MathJax documentation))