Two synchronised figures with Mathbox
Two synchronised figures with Mathbox
I would like to show two synchronised animated plots with Mathbox side by side. See the following minimal example:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>MathBox - Empty</title>
<script src="mathbox-bundle.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
<script>
var mathbox = mathBox(
plugins: ['core', 'controls', 'cursor', 'mathbox'],
controls:
// Orbit controls, i.e. Euler angles, with gimbal lock
klass: THREE.OrbitControls,
// Trackball controls, i.e. Free quaternion rotation
//klass: THREE.TrackballControls,
,
);
if (mathbox.fallback) throw "WebGL not supported"
var three = mathbox.three;
three.renderer.setClearColor(new THREE.Color(0xFFFFFF), 1.0);
// Do stuff with mathbox,
// for example: (see docs/intro.md)
var camera = mathbox.camera(
proxy: true,
position: [0, 0, 3],
);
var view = mathbox.cartesian(
range: [[-0.5, 1.5], [-1, 1]],
scale: [2.0, 1.5],
);
view
.axis(
axis: 1,
width: 3,
)
.axis(
axis: 2,
width: 3,
)
.grid(
width: 1,
divideX: 11,
divideY: 16,
);
var data =
view
.interval(
expr: function (emit, x, i, t)
emit(x, -(x-1)*(x-1));
,
width: 64,
channels: 2,
);
var curve2 =
view.line(
width: 5,
color: '#205899',
);
var data3 =
view.interval(
expr: function(emit, x, i, t)
var xx = 0.25+0.25*Math.sin(t);
var fnc = function(x)return -(x-1)*(x-1);
emit(0, 0);
emit(xx, fnc(xx));
,
width: 1,
channels: 2,
items: 2,
)
.vector(
width: 5,
color: '#50A000',
);
</script>
</body>
</html>
You need mathbox-bundle.js in the same folder to run it. I would like to show next to this figure another plot which shows the length of the green segment in a plot of "slope of green line versus length of green segment".
The math for this is obviously trivial but my question is, how do I add that other figure which is synchronised?
0
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
