paulmasson / mathcell Goto Github PK
View Code? Open in Web Editor NEWInteractive mathematics in the browser
Home Page: http://mathcell.org/
License: MIT License
Interactive mathematics in the browser
Home Page: http://mathcell.org/
License: MIT License
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>
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>
As this function should only plot the available data here:
Line 4 in f3ecf34
Doesn't it make sense to "filter out" the "undefined" values with a second replacer argument to stringify()?
Or splitting the original data
in multiple "data" parts which recursively call svg()
for each part?
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.
Can we get a more "adaptive" plot function?
See for example these discussions:
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>
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>
Nice to have: Link to source code and license from documentation
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!
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>
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' } );
Is there an option to let MathCell automatically calculate the aspect ratio
See: https://reference.wolfram.com/language/ref/AspectRatio.html
Example:
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.
@theo-armour any thoughts on this? Perhaps loading via contentWindow
is faster than srcdoc
Are there any other colormaps besides "jet"?
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?
Do you have any examples for a contour or density plot?
How to use isoband
for a contour plot?
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>
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).
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>
If math.js
throws an exception in evaluating a function, whats the preferred "best practice" to show the error in mathcell.js
?
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,
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>
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""
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?
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.
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.
<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;
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:
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>
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:
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.
JSFiddle example:
How can the z-axis be restricted for output in the range from -2 to 2?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.