paulmasson / mathcell

Interactive mathematics in the browser

MathCell

Interactive 2D and 3D mathematical visualizations in your browser!

This library and Math power the interactive elements of Analytic Physics.

Usage

Download the complete library to your web server and include it in the body of a page:

<script src="mathcell.js"></script>

If you do not want to download the source file, you can link to the most current version from my website,

<script src="https://paulmasson.github.io/mathcell/build/mathcell.js"></script>

or a past stable version from an online content delivery network:

<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>

See the documentation for additional details of implementation.

mathcell's Issues

NPM support

First of all, thanks for this amazing project! I can't believe it's not super popular right now, I think the API could improve a bit but I love it!

The issue is, any plans on making this an npm module so it can be used in more 'modern' workflows (having a local copy and magnifying it on the fly with webpack, for example; maybe with some tree shaking).

"Translation" animation with step=0

I like the new the "translation" animation feature, it's very nice. One detail, though - it doesn't allow for setting a translation with "step" = 0. This would be helpful if one wants to build several items with computed properties. For instance in this simple example of an expanding row of boxes, where the middle one should stay at the origin:

data = [];
for (let j = -2, j <= 2; j++) {
    data.push(box(1, 1, 1, {translation: {path:'[t, 0, 0]', step: j/10}}));
}

... you don't want to have to write special-case code to remove the translation with step=0.

Currently, threejs-template.js line 421 has:

var step = s.options.translation.step ? s.options.translation.step : .05;

This causes "s.options.translation.step = 0" to map to "step = .05". Using Number.isFinite() here instead would be an improvement:

var step = Number.isFinite(s.options.translation.step) ? s.options.translation.step : .05;

This will map undefined, null, false, and invalid values to the default, but allow 0 as a possible value.

Are you positive it will always be the last script?

I am looking at this line:

var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

I am wondering is this really safe? I guess it must be otherwise it would already have failed on you.

So - just thinking out loud:

Another way of handling this might be to give the script an id. Yes this means the author will have to come up with an id. The idea that ids must be unique is a known rule in web dev so perhaps not too onerous and it might provide a quicker understanding of what is going on.

• tested only very lightly

<div class="mathcell" style="height: 4in">
	<script id=woozle >
		//var parent = document.scripts[ document.scripts.length - 1 ].parentNode;
		var parent = woozle.parentNode;
		var id = generateId();
		parent.id = id;

Let MathCell calculate the aspect ratio

Is there an option to let MathCell automatically calculate the aspect ratio

See: https://reference.wolfram.com/language/ref/AspectRatio.html

Example:

• https://jsfiddle.net/axelclk/jrqfed2z/1/

Support Mathematica colormaps

Data for Mathemtica colormaps can be extracted numerically using

InputForm /@ ColorData["CherryTones"] /@ Range[0, 1, .1]

Initially supported schemes should include SunsetColors, WatermelonColors, Rainbow, TemperatureMap, LightTemperatureMap, DarkRainbow, RustTones and the default M10DefaultDensityGradient.

This approach has been used in at least one open source project. Color data of this sort is available here.

If would be preferable to have a mathematical statement of the colormap as is true for most of the maps in matplotlib. @axkr are you aware of any open source project that replicates the Mathematica colormaps with expressions of this sort, or do they all sample the data numerically?

Automatically catch errors in plotting

Question from @axkr on Gitter:

@paulmasson is it correct to wrap the generated JavaScript funtion with a try { } catch(err) { return Number.Nan; }, so that the plotter can go on with rendering, or is there another preferrred mechanism?

@axkr please provide an example that goes wrong. Besides NaN, an error would result from Infinity and possibly other values. Thanks!

"best practice" to show errors from evaluating a function

If math.js throws an exception in evaluating a function, whats the preferred "best practice" to show the error in mathcell.js ?

Nice to have: Link to source code and license from documentation

Nice to have: Link to source code and license from documentation

Setting material properties

It would be a quick, easy win to allow the passing of options for the material properties you're currently hard-coding in threejs-template (lines 373, 382) - "metalness" and "roughness" for Standard material type and "shininess" for Phong material type. E.g. for metalness, just use:

 metalness: s.options.metalness >= 0 ? s.options.metalness : .5,

Colormaps in surface

Are there any other colormaps besides "jet"?

More "adaptive" plot function?

Can we get a more "adaptive" plot function?

See for example these discussions:

• https://scicomp.stackexchange.com/questions/2377/algorithms-for-adaptive-function-plotting
• JuliaPlots/Plots.jl#621

Especially this function plot example will benefit from such an "adaptive" approach:

<html>
<head>
<meta charset="utf-8">
<title>MathCell</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style></style>
</head>

<body>
<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/math.js"></script>

<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mathjax/[email protected]/MathJax.js?config=TeX-AMS_HTML"></script>
<div class="mathcell" style="width: 100%; height: 100%; padding: .25in .5in .5in .5in;">
<script>

var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [  ] );

parent.update = function( id ) {


function z1(x) { return tan(x); }

var p1 = plot( z1, [0, (6.283185307179586)], { } );
var data = [ p1 ];
var config = { type: 'svg' , yMin: -200, yMax: 200 };
evaluate( id, data, config );

}

parent.update( id );

</script>
</div>

</body>
</html>

Nice to have: A mention in MathJax docs

See https://github.com/mathjax/MathJax-docs/wiki/List-of-web-based-math-editors

Add mathcell scripts dynamically?

How can I add mathcell scripts dynamically?

For example if I evaluate Manipulate(Plot(Sin(x)*Cos(1 + a*x), {x, 0, 2*Pi}), {a,0,10})

I would like to add as a result the generated mathcell in this webpage:

• https://symjaweb.appspot.com/

The generated script looks like this:

<script>

var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [ { type: 'slider', min: 0, max: 10, name: 'a', label: 'a' }
 ] );

parent.update = function( id ) {

  var a = document.getElementById( id + 'a' ).value;

  function z1(x) { return Math.sin(x)*Math.cos(1+a*x); }

  var p1 = plot( z1, [0, 2*Math.PI], { } );


  var config = { type: 'svg' };
  var data = [ p1 ];

  evaluate( id, data, config );
}

parent.update( id );

</script>

Enabling a transparent MathCell background

Modern operating systems are now allowing you to switch between displaying the screen in a light mode or a dark mode. Currently MathCell appears to be hardwired to display dark text on a white background. Adding support for mode switch in not difficult. Example:

See working demo at:

https://jaanga.github.io/demo/paul-m/math-cell/calabi-yau/calabi-yau-0-00.html

See code at:

https://github.com/jaanga/jaanga.github.io/blob/b5139f9ced9d78992eb8835b59a24834ac185ffb/demo/paul-m/math-cell/calabi-yau/mathcell.js#L1553-L1560

Note edits to lines 1554 and 1556 with 1559 commented out

OS light and dark mode settings pass through has been checked with the demo running on Win10 with latest Chrome and FF, Chromebook, and Pixel 3 XL. All appeared to operate as expected.

consider x3d as xml and in inline

One of the benefits of x3d is that multiple render engines or x3d browsers exist, for the web but also outside of the web, even for 3d printing. For compatibility it is important to stay close to the official XML encoding. To turn the x3dom html you already have into XML only a few minor tweaks are required. x3dom will still be able to render the x3d if it is loaded as an Inline. In addition, it will be straightforward to offer an x_ite render output option, or a x3d xml download for offline viewing with freewrl or view3dscene, and perhaps for 3d printing.
Possibly something to consider. I would certainly be available to help.

Add plot legends for 3D mode

Please add legends for complex parametric plots with colours and their corresponding values.

Example:

function z1(z) { try { return  inverseHaversine(z);}catch(e){return complex(Number.NaN);} }

var p1 = parametric( (re,im) => [ re, im, z1(complex(re,im)) ], [-0.3, 0.3], [-1.0, 1.0], { complexFunction: 'abs', colormap: 'complexArgument' } );

Nice to have: a basic "Hello, World!" example

It might be nice to have a very simple basic example for mathcell to help get you started.

Example: https://jsfiddle.net/theo/6s7crzhb/

<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>

	<div class="mathcell" style="height: 5in" >

		<script>

			var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

			var id = generateId();

			parent.id = id;

			MathCell( id, [] );

			parent.update = function( id ) {

				var data = [ box( 1, 1, 1 ) ];

				var config = { type: 'threejs' };

				evaluate( id, data, config );

			}

			parent.update( id );

		</script>

	</div>

<script>

Render TeX formula depending from slider?

If I have an array of TeX formulas, is it possible to render these formulas in KaTeX or MathJAX?

For example, if I have ten formulas and an "integer" slider in the range 1..10 was moved a new formula from these ten formulas should be displayed.

See tranleduy2000/ncalc#67

expIntegralE - wrong values in parametric plot

Can you please check the "outlier" values in the parametric plot?
I think they are wrong.
Is there a way to simply determine the values if I'm moving the cursor on these values?

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; margin: 0; padding: 0">
<head>
<meta charset="utf-8">
<title>MathCell</title>
</head>

<body style="width: 100%; height: 100%; margin: 0; padding: 0">

<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/math.js"></script>
<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mathjax/[email protected]/MathJax.js?config=TeX-AMS_HTML"></script>
<div class="mathcell" style="display: flex; width: 100%; height: 100%; margin: 0;  padding: .25in .5in .5in .5in; flex-direction: column; overflow: hidden">
<script>

var parent = document.currentScript.parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [  ] );

parent.update = function( id ) {


function z1(z) { try { return  expIntegralE(2,z);}catch(e){return complex(Number.NaN);} }

var p1 = parametric( (re,im) => [ re, im, z1(complex(re,im)) ], [-2.0, 2.0], [-2.0, 2.0], { complexFunction: 'abs', colormap: 'complexArgument' } );

  var config = { type: 'threejs', aspectRatio: [1.0,1,1] };
  var data = [p1];
evaluate( id, data, config );

}

parent.update( id );

</script>
</div>

</body>
</html>

Modifying contentWindow in Safari/iOS

The function injectFunctions modifies the contentWindow of a 3D-scene to include additional function definitions, which cannot be passed via the JSON-parsed config dictionary. This works fine for both Firefox and Chrome, both for local files and those obtained from a server.

For Safari this also works for local files, but fails silently for those obtained from a server, even a local server running on the desktop. More accurately, one can modify the contentWindow and immediately return values from the added functions, but the definitions are subsequently not available as if scoped somehow. Curiously enough once the main file has been downloaded, function injection works completely from the JavaScript console in Safari.

Clearly there is some sort of security restriction in place for Safari that is nonstandard. How can this be circumvented?

Contour and density plot any examples?

Do you have any examples for a contour or density plot?

How to use isoband for a contour plot?

• https://paulmasson.github.io/mathcell/docs/index.html

My attempt looks like this:

<html>
<head>
<meta charset="utf-8">
<title>MathCell</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/math.js"></script>

<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>
<div class="mathcell" style="width: 100%; height: 100%; padding: .25in .5in .5in .5in;">
<script>

var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [  ] );

parent.update = function( id ) {


function z1(x,y) { return [ x, y, add(cos(x),cos(y)) ]; }

var p1 = isoband( z1, [0, (12.566370614359172)], [0, (12.566370614359172)] );

  var config = { type: 'threejs' };
  var data = [p1];
evaluate( id, data, config );

}

parent.update( id );

</script>
</div>

</body>
</html>

Problem with default locale "de"

If I move the value of b in the below example in a german browser (with default locale DE) the output of the corresponding value will be printed with a , (comma) instead of a . (dot). For example "1,7".

See: https://en.wikipedia.org/wiki/Decimal_separator#Countries_using_decimal_comma

After that the following error appears:

>> mathcell.js:307:23
Unexpected value NaN parsing attribute y.  

If I set the value manually to "1.7" (with a dot) the examples works without problems.

Is there a setting, so that the value for the slider is always printed with locale "us" defaults?

<html>
<head>
<meta charset="utf-8">
<title>MathCell</title>
</head>

<body>

<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>

<p style="text-align: center; line-height: 2"><span style="font-size: 20pt">MathCell</span></p>

<div class="mathcell" style="height: 4in">
<script>

var parent = document.scripts[ document.scripts.length - 1 ].parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [ { type: 'slider', min: 1, max: 3, name: 'a', label: 'a' }
, { type: 'slider', min: 1, max: 3, name: 'b', label: 'b' }
 ] );

parent.update = function( id ) {

var a = document.getElementById( id + 'a' ).value;
var b = document.getElementById( id + 'b' ).value;

function z1(x) { return Math.sin(a*x+b); }
function z2(x) { return Math.cos(a*x+b); }

var p1 = plot( z1, [-3*Math.PI, 3*Math.PI], { } );
var p2 = plot( z2, [-3*Math.PI, 3*Math.PI], { } );
var config = { type: 'svg' };
var data = [ p1, p2 ];
evaluate( id, data, config );


}

parent.update( id );

</script>
</div>

</body>
</html>

Mouse-over information in both 2D and 3D

As suggested by @axkr in #24

Link to MathCell demo

I am looking at the top of the MathCell GitHub repo

It would be nice to have a link here to to a working demo of MathCell - which you can set when editing the description.

Alse the description could be more descriptive - for example: ""Interactive 2D and 3D mathematics visualizations in your browser""

Easier access to MathCell

When I see words like this, I just about always ignore them and move on.

Usage
Download the complete library to your web server and include it in the body of a page:

It would be nice to have an example that you can use from the get go. Lines like the following help:

<script src="https://paulmasson.github.io/mathcell/build/mathcell.js"></script>

Loading iframes faster

@theo-armour any thoughts on this? Perhaps loading via contentWindow is faster than srcdoc

cosIntegral - wrong values in parametric plot

cosIntegral - parametric plot isn't continously.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC
  "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN"
  "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" style="width: 100%; height: 100%; margin: 0; padding: 0">
<head>
<meta charset="utf-8">
<title>MathCell</title>
</head>

<body style="width: 100%; height: 100%; margin: 0; padding: 0">

<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/math.js"></script>
<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>
<script src="https://cdn.jsdelivr.net/gh/mathjax/[email protected]/MathJax.js?config=TeX-AMS_HTML"></script>
<div class="mathcell" style="display: flex; width: 100%; height: 100%; margin: 0;  padding: .25in .5in .5in .5in; flex-direction: column; overflow: hidden">
<script>

var parent = document.currentScript.parentNode;

var id = generateId();
parent.id = id;

MathCell( id, [  ] );

parent.update = function( id ) {


function z1(z) { try { return  cosIntegral(pow(z,2));}catch(e){return complex(Number.NaN);} }

var p1 = parametric( (re,im) => [ re, im, z1(complex(re,im)) ], [-2.0, 2.0], [-2.0, 2.0], { complexFunction: 'abs', colormap: 'complexArgument' } );

  var config = { type: 'threejs', aspectRatio: [1.0,1,1], zMin: -2, zMax: 15 };
  var data = [p1];
evaluate( id, data, config );

}

parent.update( id );

</script>
</div>

</body>
</html>

How to set the range for the z-axis in a parametric plot

JSFiddle example:

• https://jsfiddle.net/axelclk/sav4uo5q/2/

How can the z-axis be restricted for output in the range from -2 to 2?

JSON.stringify() filter out "null" values

As this function should only plot the available data here:

mathcell/src/render/svg.js

Line 4 in f3ecf34

if ( JSON.stringify( data ).includes( 'null' ) ) throw Error( 'Infinity or NaN in plot data' );

Doesn't it make sense to "filter out" the "undefined" values with a second replacer argument to stringify()?

• Using a Replacer Function with JSON.stringify

Or splitting the original data in multiple "data" parts which recursively call svg() for each part?

ComplexPlot3D(Arg(z), {z, -2 - 2*I, 2 + 2*I} ) doesn't display a graph

ComplexPlot3D(Arg(z), {z, -2 - 2*I, 2 + 2*I} ) doesn't display a graph

This is the corresponding HTML page:

<html>
<head>
<meta charset="utf-8">
<title>MathCell</title>
</head>

<body>
<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/math.js"></script>
<script src="https://cdn.jsdelivr.net/gh/paulmasson/[email protected]/build/mathcell.js"></script>

<div class="mathcell" style="width: 100%; height: 100%; padding: .25in .5in .5in .5in;">
<script>
var parent = document.currentScript.parentNode;
var id = generateId();
parent.id = id;
MathCell( id, [  ] );

parent.update = function( id ) {


function z1(z) { try { return  arg(z);}catch(e){return complex(Number.NaN);} }

var p1 = parametric( (re,im) => [ re, im, z1(complex(re,im)) ], [-2.0, 2.0], [-2.0, 2.0], { complexFunction: 'abs', colormap: 'complexArgument' } );

  var config = { type: 'threejs', aspectRatio: [1.0,1,1] };
  var data = [p1];
evaluate( id, data, config );

}
parent.update( id );

</script>
 
</div>
</body>
</html>