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:




2D Function Graph

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




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.