Principles of MathBox

Steven Wittens

 unconed
http:// acko.net

Too Much Work

Longitude
Latitude

Cake Is Not a Lie

Media ForThinking The Unthinkable

Bret Victor

Writing Made Thought Visible   

Media Are Thinking Tools   

"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."

SymbolicVisualInteractive

Go Watch His Talk

MathBoxViewing The Unviewable

Coherent Animation

$$ z $$
$$ z^{0.5} $$
$$ (z^{0.5})^{4} = z^{2}$$
$$ z^{\sqrt{2}}$$
$$ z^p = \,? $$

Show, Don't Tell

Do The Impossible

Persistence of Space

Holographic Viewport

Persistence of Time

Depth from Motion

Semantics from Style

MathBox is AboutBuilding a PictureandShowing Connections

MathBox Helps CreateMathematical Intuition

MathBox is YourRobot Assistant

MathBox Today

≈ Symbolic✔ Visual✘ Interactive

// 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()

Future

Performance Optimization

Mouse / Touch Interaction

Stackable Transforms

Docs and Examples

github.com/unconed/MathBox.js

acko.net

Diagrams powered by MathBox.
Browse the slides source on Github.