unconed / mathbox Goto Github PK
View Code? Open in Web Editor NEWPresentation-quality WebGL math graphing
License: MIT License
Presentation-quality WebGL math graphing
License: MIT License
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 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
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.
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.
Current situation:
build/
directory contains build mathbox (a bundle for the web, and a esm version transpiled from typescript)prepack
script rebuilds.It would be nice to not have to manually update / deal with the build directory.
Are there other options?
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.
To reproduce:
examples/test/curve.html
, change id="mySampler"
to id="mySampler"
, and change all #sampler
to #mySampler
.Expected: Should work fine
Actual Errors with
Could not find source `#mySampler`
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.
The README at https://github.com/unconed/MathBox.js still points to gitgud.
#25 Introduced infrastructure for typings. Remaining TODOs:
mathBox
optionstypes.js
types.spec.ts
. Since that test file is written in typescript, if its tests pass, we can be confident in my manual typings.examples/test/curve.html
mathbox.select('root')
root node is returned
Empty selection is returned
This is a regression that was introduced in https://gitgud.io/unconed/mathbox/-/merge_requests/25
So far, I know of:
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
--------------------------------------------------------------------------------
--------------------------------------------------------------------------------
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
See discussion in #17
The new types latch
introduced in #32 has no entry in src/docs/primitives.js
, which seems to have broken docs generation.
I had an issue with mathbox in my website, and I managed to trace it down to this line over here:
const l = (target.length = size ? size : value.length);
It seems like there might have been a mistake in the code, where a =
was used instead of ==
or ===
.
I beliebe this is the reason behind the issue in my website: Cannot assign to read only property 'length' of string 'xyz'
- const l = (target.length = size ? size : value.length);
+ const l = (target.length === size ? size : value.length);
@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:
three/src
. For example, import { Color } from "three/src/math/Color.js";
( example)instanceof
checks like value instanceof Color
(example)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.
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
that sort of thing. We might also link in the README to your new react project and the demo project.
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 :)
Hi I discovered this initially using mathbox under Emmy-viewers, i.e. a Clojurescript bridge to mathbox.
Subsequently I discovered all mathbox applications behave like this. They behave just fine in most Browsers under Linux/Mac/Windows. However, Android has problems: The initial logo/gimbal is displayed, then maybe a background, Interactive axes are displayed (and work) and also movable points. Nothing else though, no graph whatsoever.
The Browser is Chrome Version 125.06422.165 under Android 11 (tablet)
also Chrome Version 125.06422.053 under Android 12 (phone)
Here is an example from maria.cloud (Small Clojure Interpretter)
https://2.maria.cloud/gist/fa29042a2fd078e2ad8744daf2e19766
And also using Clojure's Clerk:
https://sritchie.github.io/strange-loop-2023/notebooks/stl/phase_portrait
but also mathbox's own examples:
https://mathbox.org/test/network.html
https://mathbox.org/math/hyperbolic.html
All of the above display the problems described on the Android systems I tried them on.
Some internal mathbox functions query Mathbox's DOM using invalid CSS selector queries.
For example:
https://gitgud.io/unconed/mathbox/-/blob/master/src/model/model.js#L322
to console.log
its first argument, a css selector query.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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.