Skip to content

Latest commit

 

History

History
147 lines (105 loc) · 3.73 KB

README.md

File metadata and controls

147 lines (105 loc) · 3.73 KB

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.


Installation

  • via npm:

    npm install mathbox
  • or CDN:

    <script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/mathbox@latest/build/bundle/mathbox.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/mathbox@latest/build/mathbox.css"
    />

Open the included /examples to see more demos.


Docs & Help

See:

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


Basic Usage

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

import { mathBox } from "mathbox";
import "mathbox/mathbox.css";

const mathbox = mathBox(options);

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

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

const element = document.querySelector("#my-thing");
const mathbox = MathBox.mathBox({ element: element });

On initialization, it returns a MathBox API object, wrapping the MathBox <root/>. 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

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


Related Projects


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

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