{"id":13687085,"url":"https://github.com/unconed/mathbox","last_synced_at":"2025-04-14T08:55:34.073Z","repository":{"id":41548610,"uuid":"43287511","full_name":"unconed/mathbox","owner":"unconed","description":"Presentation-quality WebGL math graphing","archived":false,"fork":false,"pushed_at":"2023-05-05T10:26:50.000Z","size":16989,"stargazers_count":1379,"open_issues_count":11,"forks_count":116,"subscribers_count":34,"default_branch":"master","last_synced_at":"2025-04-07T02:08:03.412Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/unconed.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":"FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["sritchie"]}},"created_at":"2015-09-28T07:55:08.000Z","updated_at":"2025-04-03T21:57:14.000Z","dependencies_parsed_at":"2024-01-25T23:08:52.875Z","dependency_job_id":"dfedb503-7f0b-4720-b4b0-c66a79a70f74","html_url":"https://github.com/unconed/mathbox","commit_stats":{"total_commits":404,"total_committers":8,"mean_commits":50.5,"dds":"0.22029702970297027","last_synced_commit":"f80933e114ed8051c8182fe09b83837696b4f0e9"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unconed%2Fmathbox","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unconed%2Fmathbox/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unconed%2Fmathbox/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/unconed%2Fmathbox/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/unconed","download_url":"https://codeload.github.com/unconed/mathbox/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248852110,"owners_count":21171839,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T15:00:48.382Z","updated_at":"2025-04-14T08:55:34.052Z","avatar_url":"https://github.com/unconed.png","language":"JavaScript","funding_links":["https://github.com/sponsors/sritchie"],"categories":["JavaScript","Tools"],"sub_categories":[],"readme":"# MathBox\n\n[![NPM Package][npm]][npm-url]\n[![Build Status][build-status]][build-status-url]\n[![License][license]][license-url]\n\n### Presentation-quality WebGL math graphing\n\n![MathBox](http://acko.net/files/mathbox2/cover1.jpg)\n\nMathBox is a library for rendering presentation-quality math diagrams in a\nbrowser using WebGL. Built on top of [Three.js][three-url] and\n[ShaderGraph][shadergraph-url] it provides a clean API to visualize mathematical\nrelationships and animate them declaratively.\n\nFor background, see the [article series on\nAcko.net](http://acko.net/blog/mathbox2/).\n\n**Presentations**:\n\n- [The Pixel Factory](http://acko.net/files/gltalks/pixelfactory/online.html#0)\n\n**Demos**:\n\n- [Audio Visualizer](https://mathbox.org/demo/audio-visualizer.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/demo/audio-visualizer.html))\n- [Cylindrical Stream](https://mathbox.org/demo/cylindrical-stream.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/demo/cylindrical-stream.html))\n- [Data/Shape Mapping](https://mathbox.org/demo/shapes.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/demo/shapes.html))\n- [LaTeX/HTML/GL Labels](https://mathbox.org/demo/labels.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/demo/labels.html))\n- [Quaternion Hypersphere](https://mathbox.org/math/quat.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/math/quat.html))\n- [Render-to-Texture History](https://mathbox.org/test/resample2.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/test/resample2.html))\n- [Vertex Warping](https://mathbox.org/test/vertex.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/test/vertex.html))\n- [Volumetric Vectors](https://mathbox.org/test/volume.html) ([code](https://github.com/unconed/mathbox/blob/master/examples/test/volume.html))\n\nAnd many more at https://mathbox.org.\n\n## Installation\n\nYou can install MathBox via [npm][npm-url] for use with a bundler like\n[Webpack](https://webpack.js.org/), or include a global `MathBox` object onto\nyour page by including the library via CDN.\n\n### NPM Package\n\n- Run the following in your project's directory to install MathBox and\n  [Three.js][three-url] via [npm][npm-url]:\n\n```bash\nnpm install mathbox three\n```\n\nImport `THREE` and `MathBox` (library and stylesheet), along with a controls\ninstance that you'll pass to the `MathBox.mathBox` constructor:\n\n```js\nimport \"mathbox/mathbox.css\"\n\nimport * as THREE from \"three\"\nimport { OrbitControls } from \"three/examples/jsm/controls/OrbitControls.js\"\nimport * as MathBox from \"mathbox\"\n```\n\n### Install via CDN\n\nInclude the following in your HTML header to load all required libraries and\nstyles:\n\n```html\n\u003c!-- Install your choice of three.js version from CDN: --\u003e\n\u003cscript\n  type=\"text/javascript\"\n  src=\"https://cdn.jsdelivr.net/npm/three@0.137.0/build/three.min.js\"\n\u003e\u003c/script\u003e\n\n\u003c!-- Load a Controls instance, making sure that the version matches the Three.js version above: --\u003e\n\u003cscript\n  type=\"text/javascript\"\n  src=\"https://cdn.jsdelivr.net/npm/three@0.137.0/examples/js/controls/OrbitControls.js\"\n\u003e\u003c/script\u003e\n\n\u003c!-- Install the latest MathBox, either mathbox.js or mathbos.min.js --\u003e\n\u003cscript\n  type=\"text/javascript\"\n  src=\"https://cdn.jsdelivr.net/npm/mathbox@latest/build/bundle/mathbox.js\"\n\u003e\u003c/script\u003e\n\n\u003c!-- Include the MathBox CSS: --\u003e\n\u003clink\n  rel=\"stylesheet\"\n  href=\"https://cdn.jsdelivr.net/npm/mathbox@latest/build/mathbox.css\"\n/\u003e\n```\n\n## Basic Usage\n\nConstruct a MathBox instance by passing initialization options to the\n`mathBox()` constructor:\n\n```js\nconst options = {\n  controls: {\n    // Orbit controls, i.e. Euler angles, with gimbal lock\n    klass: THREE.OrbitControls\n  },\n};\nconst root = MathBox.mathBox(options);\n```\n\n\u003e **Note**\n\u003e See [threestrap](https://github.com/unconed/threestrap) for all available\n\u003e `options`.\n\nTo spawn inside a specific element, pass an\n[`HTMLElement`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)\nwith the `element` option:\n\n```js\nconst element = document.querySelector(\"#my-thing\");\n\nconst options = {\n  element: element,\n  controls: {\n    klass: THREE.OrbitControls\n  },\n};\nconst root = MathBox.mathBox(options);\n```\n\nOn initialization, `mathBox` returns a MathBox API object, wrapping the MathBox\n`\u003croot/\u003e`. Insert new MathBox nodes into the component tree by calling the\nmethod associated with the primitive you'd like to add.\n\n\u003e **Note**\n\u003e See [the Primitives doc](docs/primitives.md) for a description of all\n\u003e primitives and their properties.\n\nThe following code will set up a 3D Cartesian coordinate system with the\nspecified range and scale for its x, y and z axes, and then insert an `x` and\n`y` axis into the scene:\n\n```js\nconst view = root\n  .cartesian({\n    range: [\n      [-2, 2],\n      [-1, 1],\n      [-1, 1],\n    ],\n    scale: [2, 1, 1],\n  })\n  .axis({\n    axis: 1,\n  })\n  .axis({\n    axis: 2,\n  });\n```\n\nUse your mouse to click and drag the camera's orientation, and zoom in and out:\n\n![2023-01-19 11 32\n59](https://user-images.githubusercontent.com/69635/213530497-22cdf2c2-bea6-4ef4-beea-fbebf73c85d4.gif)\n\nEach primitive call:\n\n- creates a new element\n- inserts it into the tree\n- returns a version of the API object with its selection focused on the new element.\n\nCalling `print()` on some selection will print a representation to the console\nof the selection and any children. For example, `view.print()` prints the\nfollowing:\n\n```jsx\n\u003ccartesian\n  range={[\n    [-2, 2],\n    [-1, 1],\n    [-1, 1],\n  ]}\n  scale={[2, 1, 1]}\n\u003e\n  \u003caxis axis={1} /\u003e\n  \u003caxis axis={2} /\u003e\n\u003c/cartesian\u003e\n```\n\nSelect objects using `.select()` and a CSS-like selector to get a jQuery-like\nselection:\n\n```javascript\nroot.select(\"cartesian \u003e axis\");\n```\n\nNext, visit the [Quick Start](docs/intro.md) page for a more involved example\nthat builds up an animating, interactive mathematical graph with labeled axes.\n\n## Docs \u0026 Help\n\nFor help, see the following resources:\n\n- [Glossary](docs/glossary.md) of terms to help get familiar with MathBox and WebGL.\n- [MathBox API](docs/api.md) for typical usage.\n- [List of Primitives](docs/primitives.md) for a full element reference.\n- [Writing Custom Shaders](docs/shaders.md) for info on custom shaders and GPU-side processing.\n- [Context API](docs/context.md) for advanced usage.\n\nFor more involved questions, or just to say hi, please join us in the [MathBox\nGoogle Group][google-group-url].\n\n## Related Projects\n\n- [threestrap](https://github.com/unconed/threestrap) - Three.js bootstrapper\n- [shadergraph][shadergraph-url] - Functional GLSL linker\n- [MathBox-react](https://github.com/christopherChudzicki/mathbox-react) - React bindings for MathBox\n- [MathBox.cljs](https://github.com/mentat-collective/mathbox.cljs) - ClojureScript bindings for MathBox via MathBox-react\n\n## Who's using MathBox?\n\n- [Math3D online graphing calculator](https://www.math3d.org/)\n- [KineticGraphs JS Engine](https://kineticgraphs.org/) ([code](https://github.com/cmakler/kgjs))\n- [Textbook: \"Interactive Linear Algebra\"\"](https://textbooks.math.gatech.edu/ila/) ([code](https://github.com/QBobWatson/ila))\n- Many visualizations at [Sam Zhang's homepage](https://sam.zhang.fyi/#projects)\n- Jesse Bettencourt's [Torus Knot Fibration](http://jessebett.com/TorusKnotFibration/) Master's project ([code](https://github.com/jessebett/TorusKnotFibration))\n- [Interactive knot visualizations](https://rockey-math.github.io/mathbox/graph3d-curve)\n\nAnd the many demos listed on [this\nthread](https://groups.google.com/g/mathbox/c/Uvyb5fHaLq4) of the [MathBox\nGoogle group][google-group-url].\n\n## License\n\n[MIT License](LICENSE.md).\n\nMathBox and ShaderGraph (c) Steven Wittens 2013-2023.\n\nLibraries and 3rd party shaders (c) their respective authors.\n\n[npm]: https://img.shields.io/npm/v/mathbox\n[npm-url]: https://npmjs.com/package/mathbox\n[build-size]: https://badgen.net/bundlephobia/minzip/mathbox\n[build-size-url]: https://bundlephobia.com/result?p=mathbox\n[build-status]: https://github.com/unconed/mathbox/actions/workflows/tests.yaml/badge.svg?branch=master\n[build-status-url]: https://github.com/unconed/mathbox/actions/workflows/tests.yaml\n[license]: https://img.shields.io/badge/license-MIT-brightgreen.svg\n[license-url]: LICENSE.md\n[google-group-url]: https://groups.google.com/forum/#!forum/mathbox\n[three-url]: https://threejs.org/\n[shadergraph-url]: https://github.com/unconed/shadergraph\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funconed%2Fmathbox","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Funconed%2Fmathbox","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Funconed%2Fmathbox/lists"}