unconed / mathbox Goto Github PK

View Code? Open in Web Editor NEW

1.3K 1.3K 110.0 16.59 MB

Presentation-quality WebGL math graphing

License: MIT License

JavaScript 81.27% CSS 0.67% TypeScript 18.07%

mathbox's People

Contributors

Stargazers

Watchers

Forkers

mgold b3sigma jamescrook eric-wieser stephan-g richiejp idlewan yuhangwang p-i- mrmaxmeier ajhyndman boisgera jornason nhemsley jroper18 znah orodbhen gperez8 william-han-wang carmen-magnum neurale chchwy xiani mannykayy asaddict enterstudio iwestlin js-van allirtnok muharremokutan shafiahmed codyaverett avinashprabhu cxz qmagix zhenwe rintcius stephensmitchell-forks cgm616 neshume wreqi dotnetcarpenter iomeone qbobwatson elimossrosenberg i5anoff igoog nioel izhanghongbo ericeasthope divisuals gerhobbelt datadevx myonneutrino siddharthv1 michaelkook tejasvi-real arctic-0 ggservice007 aswanthkrishna zoopyserg tizee ghosthwang btautist throwingsnow happydpc jiixing code4demo kineviz eaglexmw-gmail creativelearn shingayi-bamhare sanupam-lab mentat-collective sciencelabshs danielchudc atlaste spaceblocks praxxus11 w0lramd hu-milize dhana0123 kevdocherty 542774114 thebetter2 alexistercero55 ezzalddeenali mart4672 sounakray2003 panweitelecom rellfy lzuniujp08 sotojohnson terryluying zalju galvinlai redhwan0

mathbox's Issues

docs are broken

The new types latch introduced in #32 has no entry in src/docs/primitives.js, which seems to have broken docs generation.

Add DEVELOPING.md, take a README pass

With the typescript changes, test changes etc it's time that we add a DEVELOPING.md.

@cchudzicki , I would love if we could have notes on

how to develop with typescript (how to add types, how to convert a file)
how to run the tests
how to generate docs

that sort of thing. We might also link in the README to your new react project and the demo project.

Suggestion: scalar/complex fields

Hi there! I found out about math3d recently and I appreciated the work of both of these projects! And I'm excited to contribute. The thing I want to add looks something like this.
https://harryhatchard.com/hydrogen/index.html
this guy made this using three.js fragment shaders. Initially I thought to make everything myself, and make a PR, but I found out that this is hard when you have no experience with shaders. So here I am.
@sritchie @unconed @ChristopherChudzicki
As far as I know, mathbox allows to directly pass a shader to webGL.
At first I want to know are you interested in doing this,
and if so, can you help me with either developing shaders, implementing a proper math3d>mathbox and mathbox>three.js interface?

add more typedefs

#25 Introduced infrastructure for typings. Remaining TODOs:

To-do:

add typings for mathBox options
finish manual typings for types.js
add more tests to types.spec.ts. Since that test file is written in typescript, if its tests pass, we can be confident in my manual typings.

Bug when using mathbox + THREE.Color in a bundle

@sritchie brought this up in ChristopherChudzicki/mathbox-react#203, but fundamentally it's an issue with the way Mathbox imports stuff.

Expectation: Users consuming the mathbox library should be able to write code similar to that below, bundle it with some bundler (webpack, vite, turbopack, etc) and have it work

import * as MB from "mathbox"
import * as THREE from "three"

const mathbox = MB.mathBox(/* options... */)
mathbox
  .cartesian()
  .axis({ color: new THREE.Color(0xff4136) })

Actuality: Code like the above does not work because:

This library (mathbox) imports from three/src. For example, import { Color } from "three/src/math/Color.js"; ( example)
This library (mathbox) uses instanceof checks like value instanceof Color (example)
Userland people like above import from three (such as the code above), which means userland people use three/build/three.module.js. Consequently, instanceof checks won't work.

See https://github.com/ChristopherChudzicki/mathbox-color-bug for a full example.

Notes

This doesn't just affect color. This probably affects any option that is passed as an object created from THREE; https://github.com/unconed/mathbox/blob/master/src/primitives/types/types.js includes a bunch of other instanceof checks.
This does not affect users including mathbox via CDN, I believe because of the externals aliasing done here https://github.com/unconed/mathbox/blob/master/config/webpack.config.js#L16

Formatting not working on CI

It seems that Prettier's CLI exits with code 0 in general. If we want to check for formatting errors, we need to pass --check. So on cI, we should be using that flag.

clean up "string continuations are not recommended" warnings

The following warnings are emitted when running Mathbox from Clojurescript:

1------ WARNING #1 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/render/meshes/base.js:73:25
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #2 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/render/meshes/base.js:75:26
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #3 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/render/meshes/base.js:83:27
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #4 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/render/meshes/base.js:85:26
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #5 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/splash.js:41:17
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #6 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/splash.js:42:50
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #7 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:68:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #8 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:72:43
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #9 -  -----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:86:12
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #10 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:87:34
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #11 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:91:12
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #12 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:96:19
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #13 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:105:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #14 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:109:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #15 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:121:11
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #16 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:123:25
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #17 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:127:11
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #18 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:129:16
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #19 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:161:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #20 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:162:49
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #21 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:177:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #22 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:178:49
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #23 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:203:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #24 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:205:21
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #25 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:238:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #26 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:240:27
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #27 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:267:9
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #28 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:269:21
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #29 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:282:11
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #30 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:283:21
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #31 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:286:11
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #32 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:287:24
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #33 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:296:34
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
------ WARNING #34 -  ----------------------------------------------------------
 Resource: node_modules/mathbox/src/util/glsl.js:298:15
 String continuations are not recommended. See https://google.github.io/styleguide/jsguide.html#features-strings-no-line-continuations
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------

Internal functions occasionally make invalid css queries

Some internal mathbox functions query Mathbox's DOM using invalid CSS selector queries.

For example:

Edit Mathbox source at https://gitgud.io/unconed/mathbox/-/blob/master/src/model/model.js#L322 to console.log its first argument, a css selector query.
Rebuild, and load examples/test/rtt.html

You will find that one of the queries logged to console is the string

vec4 getSample(vec2 xy);
vec4 getFramesSample(vec2 xy) { return getSample(xy); }

which is clearly not a valid css selector query.

Do we care?

Probably not right now.

I suspect Mathbox has always made these invalid queries, and the css-selection library cssauron tolerated them fine: it would just return false since no elements matched these invalid selectors. These invalid queries seem not to be causing any bugs.

I discovered this while working on replacing cssauron with css-select. The new library, css-select, is a bit stricter in that it throws errors when passed invalid css selectors. This error-throwing behavior seems desirable to me. (For one thing, it's consistent with the browser-native Element.querySelector API.)

Embracing the new error-throwing behavior probably requires preventing Mathbox internal functions from making these invalid CSS queries.

get(k) on mathbox root ignores bound properties

Add this to some example:

mathbox.bind({
  focus: (time, delta) => {
    console.log(mathbox.get("focus"));
    5 * Math.sin(time * 0.5);
  },
});

And note that "1", the default, is printed many times instead of

the function value
the current value of "focus" for mathbox

Readback example is broken

The readback example seems to be broken in the latest release.

If you hover over the points, they don't change colors as expected from older examples. Chrome Debug Tools don't show any errors either.

Long-term, would be great to convert such examples as explicit tests.

Surfaces are too dark

Left: v0.0.5 / Right: v2+

@sritchie I dunno if this is a consequence of changes we've made in Mathbox, or a consequence of the ThreeJS upgrades. Do you have any idea? I think you've looked at more versions of ThreeJS than I have. Otherwise... I'll try to learn something about ThreeJS :)

RGBFormat removed from r137

Tried using recent THREE release (r149), and got the following error:

WARNING in ./node_modules/mathbox/build/esm/render/buffer/texture/datatexture.js 57:12-27 export 'RGBFormat' (imported as 'CONST') was not found in 'three' (possible exports: ACESFilmicToneMapping, ...

Per THREE r137, RGBFormat is removed:

Texture
Remove RGBFormat. mrdoob/three.js#23228, mrdoob/three.js#23201, mrdoob/three.js#23205, mrdoob/three.js#23211, mrdoob/three.js#23223, mrdoob/three.js#23218, mrdoob/three.js#23219, mrdoob/three.js#23367 (@Mugen87)

As this is only used in 1 class, a simple fix could be to just replace it with RGBAFormat, per this recommendation.

Add "Who is using mathbox?" docs

So far, I know of:

Update the jupyter notebook example to use current version

See discussion in #17

camelcase node ids do not work

To reproduce:

In examples/test/curve.html, change id="mySampler" to id="mySampler", and change all #sampler to #mySampler.
Open the file.

Expected: Should work fine

Actual Errors with

Could not find source `#mySampler`

Comments

Mathbox delegates to an external library for most CSS selections, but NOT for id-based selection, iirc

Update v1 mathbox readme to point here (not gitgud)

The README at https://github.com/unconed/MathBox.js still points to gitgud.

The build directory should be gitignored

Current situation:

the build/ directory contains build mathbox (a bundle for the web, and a esm version transpiled from typescript)
the build directory in version control is NOT used by npm** because the prepack script rebuilds.

It would be nice to not have to manually update / deal with the build directory.

Option 1: remove the build directory from version control; reference some other build version (e.g., from a CDN) in the examples
Option 2: keep the build directory in VC, but somehow automatically build-and-commit when PRs are merged to master.

Are there other options?

Any example code to make a 3D numbered spiral?

Hello,

I am researching Mathbox now along with Mathics and am interested to know if there is any example code to make a 3D spiral with numbers along the curve.

Additionally, I want to try an overlay some other simple curves on the 3D spiral as well. Sort of using the 3D spiral as a type of cone axis to overlay other curves.

Do you have anything that might lead me in the right direction or some type of simple template that I can use to get started?

Thanks and have a good day.

Cannot select root

Steps to reproduce

Open examples/test/curve.html
In dev console, mathbox.select('root')

Expected

root node is returned

Actual

Empty selection is returned

This is a regression that was introduced in https://gitgud.io/unconed/mathbox/-/merge_requests/25

mathbox.debug throws an error

Open one of the examples and run mathbox.debug() in the console. Some useful info is printed, but the last piece is:

api.js:218 Uncaught TypeError: Cannot read properties of null (reading '1')
    at getName (api.js:218:1)
    at API.debug (api.js:222:1)
    at <anonymous>:1:9

Note: Probably all of the examples? But definitely curve.html and data.html

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.