Awesome
MathBox.cljs
A Reagent interface to the MathBox mathematical visualization library.
<p align="center"> <img src=http://acko.net/files/mathbox2/cover1.jpg> </p>MathBox is a library for rendering presentation-quality math diagrams in a browser using WebGL. Built on top of Three.js, Threestrap and ShaderGraph, it provides a clean API to visualize mathematical relationships and animate them declaratively.
In simple use cases, it can elegantly draw 2D, 3D or 4D graphs, including points, vectors, labels, wireframes and shaded surfaces.
In more advanced use, data can be processed inside MathBox, compiled into GPU programs which can feed back into themselves. By combining shaders and render-to-texture effects, you can create sophisticated visual effects, including classic Winamp-style music visualizers.
MathBox.cljs extends MathBox (via MathBox-react) with a Reagent component that makes it easy to define MathBox constructions inside of a user interface built with ClojureScript.
Visit the Demo index for a tour of everything MathBox.cljs
can do. These demos are also hosted at https://mathbox.org.
Quickstart
Install MathBox.cljs
into your ClojureScript project using the instructions at
its Clojars page:
Or grab the most recent code using a Git dependency:
;; deps
{io.github.mentat-collective/mathbox.cljs
{:git/sha "$GIT_SHA"}}
Require mathbox
and mathbox.primitives
in your ClojureScript namespace:
(ns my-app
(:require [mathbox.core :as mathbox]
[mathbox.primitives :as mb]
[reagent.core :as reagent]))
Construct a MathBox
scene by with the mathbox/MathBox
component
initialization options to the mathBox()
constructor:
[mathbox/MathBox
{:container {:style {:height "400px" :width "100%"}}}]
Insert new MathBox nodes into the component tree by nesting components from
mathbox.primitives
under the mathbox/MathBox
instance.
Note See the cljdoc page for
mathbox.primitives
for a list of all primitives. Each sub-package has more specific docs listing all options supported for each primitive component.
The following code will set up a 3D Cartesian coordinate system with the
specified range and scale for its x, y and z axes, and then insert an x
and
y
axis into the scene:
[mathbox/MathBox
{:container {:style {:height "400px" :width "100%"}}}
[mb/Cartesian
{:range [[-2 2] [-1 1] [-1 1]]
:scale [2 1 1]}
[mb/Axis {:axis 1}]
[mb/Axis {:axis 2}]]]
Use your mouse to click and drag the camera's orientation, and zoom in and out:
See the project's interactive documentation notebook for more guides and examples.
Clerk Support
If you want to use MathBox.cljs
with [Clerk][clerk-url], check out the
[mathbox/clerk
template][mathbox-clerk-template-url]. This
[deps-new
][deps-new-url] template will generate a Clerk project for you, fully
configured to use MathBox.cljs
in your Clerk notebooks.
Interactive Documentation via Clerk
The project's interactive documentation was generated using Nextjournal's Clerk. If you'd like to edit or play with the documentation, you'll need to install
Once this is done, run this command:
bb clerk-watch
This will open a browser window to http://localhost:7777
with the contents of
the documentation notebook. Any edits you make to dev/mathbox/notebook.clj
will be picked up and displayed in the browser on save.
Thanks and Support
To support this work and my other open source projects, consider sponsoring me via my GitHub Sponsors page. Thank you to my current sponsors!
I'm grateful to Clojurists Together for financial support during this library's creation. Please consider becoming a member to support this work and projects like it.
License
Copyright © 2022-2023 Sam Ritchie.
Distributed under the MIT License. See LICENSE.