Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

README.md

MathBox

Presentation-quality WebGL math graphing

MathBox

MathBox is a library for rendering presentation-quality math diagrams in a browser using WebGL. Built on top of Three.js and ShaderGraph, it provides a clean API to visualize mathematical relationships and animate them declaratively.

MathBox is used through its JS-based DOM.

For background, see the article series on Acko.net.

Demos:

Presentations:

Note: this repo uses submodules, clone it with --recursive or do a git submodule update --init after cloning.


Download

or install via bower:

bower install mathbox

Open the included /examples to see more demos.


Docs & Help

See:

Join us in the MathBox Google Group or #mathbox on Freenode.


Usage

Include the bundle:

<script src="./mathbox-bundle.js"></script>

Construct a MathBox instance using the provided mathBox() constructor:

var mathbox = mathBox(options);
if (mathbox.fallback) throw "WebGL not supported";

var three = mathbox.three;
// three.renderer, three.scene, three.camera

See threestrap for all available options. e.g. To spawn inside a specific element, do:

var element = document.querySelector('#my-thing');
var mathbox = mathBox({ element: element });

On initialization, it returns a MathBox API object, wrapping the MathBox . You can spawn new nodes:

<cartesian range={[[-2, 2], [-1, 1], [-1, 1]]} scale={[2, 1, 1]}>
  <axis axis={1} />
  <axis axis={2} />
</cartesian>

via

var view = mathbox
  .cartesian({
    range: [[-2, 2], [-1, 1], [-1, 1]],
    scale: [2, 1, 1],
  })
    .axis({
      axis: 1,
    })
    .axis({
      axis: 2,
    })

You can select objects using .select() and a CSS-like selector to get a jQuery-like selection:

mathbox
  .select("cartesian > axis")

Use .print(), .inspect() and .debug() to show information about a selection.


/src tree:

  • model/ - DOM tree + CSS selector handling
  • primitives/ - The DOM node types (the legos)
  • render/ - Smart proxies for Three.js (the glue)
  • shaders/ - GLSL code
  • stage/ - API / controllers
  • util/ - It's inevitable

/vendor

Uses gulp to build itself.


MathBox and ShaderGraph (c) Steven Wittens 2013-2015. MIT License.

Libraries and 3rd party shaders (c) their respective authors.

You can’t perform that action at this time.