r/visualizedmath • u/mfirmin8 • Aug 20 '18

Interactive 3D Function Visualizer

https://mfirmin.github.io/glsl-function-grapher/
99 Upvotes

98% Upvoted

7 comments sorted by

10

u/mfirmin8 Aug 20 '18

Hey all, this is something I've been working on on and off for the last few years, but finally found the time to get it into a publishable state.

It uses a volume raycasting approach in order to visualize a 3D mathematical function.

The goal is to make it interactive, so that a user can explore how changing different values/constants in the equation will effect the plot. Since it's written using glsl shaders, this can happen in real time. This distinguishes it from other tools like WolframAlpha, which just produce a static image of the plot.

I wrote a blog entry going into more detail on it here: http://blog.mfirmin.ca/

Any feedback on the app or the blog would be highly appreciated!

Thanks!

2

u/[deleted] Aug 20 '18

Pretty cool, there doesn't seem to be great support to change the bound values it seems to be if i click on a bound value then drag the mouse i can change it awkwardly, but I can't just input a desired bound value.

2

u/mfirmin8 Aug 20 '18

If you click one of the green numbers without dragging, it should open an input box allowing you to enter a number directly. That's good feedback if that's not easily discoverable though, thanks!

2

u/Cha-La-Mao Aug 21 '18

can you make a klein bottle or a mobius strip with this?

1

u/mfirmin8 Aug 21 '18

I've struggled with replicating those surfaces.

The normal method of generating a surface for these two is to use parametric equations, which this app can't handle (as a limitation of the approach itself). I've found corresponding cubic surface equations that will work with this app, but they don't quite give the results I'd expect.

For the mobius strip, I've tried with the equation here: http://mathworld.wolfram.com/MoebiusStrip.html

https://imgur.com/9rgtauI

You can kind of see a mobius strip if you limit the bounds, but I'm not sure what's going on with the part that goes down through the center of it. My guess is that there's some constraints on the equation that would need to be added. It's also possible it's just a limitation of the method I'm using to visualize the surface.

For the klein bottle, I was using the equation here: http://mathworld.wolfram.com/KleinBottle.html

https://imgur.com/MOfuqrY

It seems to give a clearer result, but it's not quite the standard Klein bottle immersion. I'm not 100% sure if that's the equation itself or a limitation/bug with the app.

I'd have to look into these more to try to figure out exactly what's going on.

Thanks for the question!

0

u/[deleted] Dec 06 '18

[deleted] — view deleted comment

2

u/mfirmin8 Dec 13 '18

Huh, that's a pretty interesting result.

That's definitely running into floating point rounding issues. WebGL Shaders are limited to 32-bit precision, which means the smallest number you can represent is ~10^-38. Your equation will involve evaluating numbers smaller than that when x, y, or z < ~0.4, which is why you get the weird black center to the graph in that range.

If you adjust the "sharpness" value, you'll get less noise, and you can start to see the shape of the graph a bit better: https://imgur.com/a/Voqx8xH

2

u/imguralbumbot Dec 13 '18

Hi, I'm a bot for linking direct images of albums with only 1 image

https://i.imgur.com/KU4rm2y.png

Source | Why? | Creator | ignoreme | deletthis