MathBox Examples

This webpage contains a collection of interactive mathematical visualizations built using MathBox: a library for rendering presentation-quality math diagrams in a browser using WebGL, built on top of Three.js and ShaderGraph. Most examples also utilize dat.gui for the user interface.

This collection is hosted at GitHub.

Last updated: 18 June 2016.

MathBox Introduction

Illustrates how to create a graph of a 2D function *y = f(x)* in MathBox.

dat.gui Demo

Illustrates how to set up the different data types using dat.gui: numbers, number sliders, text, booleans, colors, lists, functions, and folders.

Integrating MathBox with dat.gui

Graph of a 2D function *y = f(x)*. New features:

- integration with dat.gui
- function may be entered via text box; formula parsed via Silent Matt's JavaScript Expression Evaluator
- adjustable parameters
aandbcan be used in the function definition- axes contain tick marks and corresponding labels

2D Function Graph

Graph of a 2D function *y = f(x)*. New features:

- a trace point whose location is controlled by a slider, visibility is controlled by a textbox, and a label below the trace point displays its coordinates to two decimal places
- axes are labelled, and y-bounds can be set to automatically fit themselves according to the minimum and maximum values of the function with the x-bounds.

2D Implicit Curve Graph

Graph of a 2D curve defined implicitly by *f(x,y) = g(x,y)*. Uses the marching squares algorithm to approximate the curve. Includes a variety of preset equations.

3D Function Graph

Graph of a 3D function *z = f(x, y)*. Includes adjustable parameters, various color schemes, and optional wireframe and shading.

3D Derivatives

Graph of a 3D function *z = f(x,y)*. Coordinates of a point entered as text. Includes optional graphs of x- and y- partial derivatives, tangent plane, directional derivatives, and the gradient at the given point.

Surfaces in 3D

Graph of a 2D surface *(x,y,z) = (f(u,v), g(u,v), h(u,v))* in 3D.

Curves in 3D

Graph of a curve *(x,y,z) = (f(t), g(t), h(t))* in 3D. Plots a variable size/color tube around the curve for easier visibility.