"If we want powerful new ways of understanding complex systems, or if
we want to build powerful new systems,
we need powerful new representations and
we need a powerful new medium in which
we can create and work with those representations."
// Boilerplate set up <script src="domready.js"></script> <script src="MathBox-bundle.js"></script> <script> DomReady.ready(function() { ThreeBox.preload([ 'MathBox.glsl.html', ], function () { var mathbox = mathBox().start(); // Do stuff with mathbox here }); }); </script>
mathbox .viewport({ type: 'cartesian', range: [[-2, 2], [-2, 2]], scale: [1, 1], }) .camera({ orbit: 3.5, phi: τ/4, theta: 0, })
mathbox
.grid()
// Tip: Open the JS console on
// any example on Github
// to play around.
mathbox .axis({ axis: 0, labels: true, }) .axis({ axis: 1, })
mathbox .curve({ domain: [-2, 2], expression: function (x, i) { return [x, Math.cos(2 * x)]; }, lineWidth: 5, })
mathbox .animate('camera', { orbit: 5, phi: τ/4 + 0.3, theta: τ/16, }, { duration: 2000, })
mathbox .set('curve', { id: 'staticCurve', }) .animate('#staticCurve', { opacity: 0.5, color: 0x2050C0, expression: function (x, i) { return [x, Math.sin(4 * x)]; }, })
var script = [ ['add', 'curve', { id: 'dynamicCurve', domain: [-2, 2], color: 0x20C050, expression: function (x, i) { var t = director.clock(1); return [x, Math.cos(2 * x + t)]; }, lineWidth: 5, }, { duration: 1000 }], ]; var director = new MathBox.Director(mathbox, script); director.forward()
Performance Optimization
Mouse / Touch Interaction
Stackable Transforms
Docs and Examples