5 ms·

Show HN: Realtime GPU-powered implicit function plotter in your browser

41 points by timokoesters 4y ago

Mizza 4y ago
Dang, that's really pretty. Could do with a little interface polish, but really nice visualizations. How does 't' work? Would love to be able to feed an audio waveform into a fullscreen mode and some palette options.
- timokoesters 4y ago
  t is just a time variable that's loaded from the CPU to the GPU every frame, so it's possible to use all sorts of other data as well.
  - nextaccountic 4y ago
    Could the shader just compute the t by itself, without loading it every frame?
farcaster 4y ago
I've been meaning to do some project in the browser involving the GPU and can't decide on a framework to use. What would you recommend? The cool kids seem to be using pure webGPU
- timokoesters 4y ago
  This was made in Rust using WGPU and their WGSL shading language. It still needs more documentation and tutorials, but the results are great and port to many platforms.
c1ccccc1 4y ago
Here's some more examples: cos((x - t)) + cos(0.5877852522924731*y + 0.8090169943749475*(x - t)) + cos(0.9510565162951535*y + 0.30901699437494745*(x - t)) + cos(0.9510565162951536*y - 0.30901699437494734*(x - t)) + cos(0.5877852522924732*y - 0.8090169943749473*(x - t)) = z 10.0*(pow(sin(0.1*(x*x-y*y)), 2.0) + pow(sin(0.2*x*y), 2.0))/sqrt(x*x + y*y) = z x*x+y*y+z*z=2.0+cos(t+10.0*x+24.0*y)+cos(t - 10.0*x+24.0*y+16.0*z)+sin(t+x+y+2.0*z)+cos(3.0*t+y-z)+sin(2.0*t+x*y)+cos(t+3.0*x*y)+sin(0.1*t+y*z + 7.0*x*y)+cos(0.5*t+x*y*z)+cos(5.0*z)+cos(1.618*t+7.0*z)+cos((x+2.0*y)*(2.0\*z-y))
- contravariant 4y ago
  You escaped an * one time too many in the last one.
gpm 4y ago
Did you publish the source as well?
jayhoon 4y ago
Adding a periodic unbounded function of time (like tan) makes the plot to "explode": (6.0*(0.04*x*x - 1.0)*pow(0.2*x, 2.0) + pow(0.02*x*x - 1.0, 2.0) + 6.0*(0.04*y*y - 1.0)*pow(0.2*y, 2.0) + pow(0.04*y*y - 1.0, 2.0) + 6.0*(0.04*z*z - 1.0)*pow(0.2*z, 2.0) + pow(0.04*z*z - 1.0, 2.0)) = tan(t) Adding more non-linearity makes the plot is more dynamic: (6.0*(0.04*x*x - 1.0)*pow(0.2*x, 2.0) + pow(0.02*x*x - 1.0, 2.0) + 6.0*(0.04*y*y - 1.0)*pow(0.2*y, 2.0) + pow(0.04*y*y - 1.0, 2.0) + 6.0*(0.04*z*z - 1.0)*pow(0.2*z, 2.0) + pow(0.04*z*z - 1.0, 2.0)) = tan(t*cos(t)) Edit: Escaping.
ausydi 4y ago
This is a truly impressive achievement in real-time browser rendering. The utilization of GPU power to plot implicit functions in real-time is a testament to the capabilities of modern web technologies. The ability to interactively explore and visualize these complex mathematical functions in the browser will undoubtedly prove to be a valuable tool for both researchers and students alike. The seamless integration of this technology into a web-based platform also makes it easily accessible to a wide audience, further increasing its impact. I am eager to see what other groundbreaking developments will come out of this field in the future.
- ausydi 4y ago
  A browser-based plotter, with GPU power to boot, A tool for math students, a treasure to loot. Implicit functions, once hard to explore, Now with this tool, easily to deplore. Real-time rendering, a sight to behold, A new way to understand, the stories these functions have told. Interactive and accessible, to all with a browser, A true game-changer, like the discovery of a new rover. No longer a struggle, to see and to know, The beauty of math, it can now show. This technology, a democratizer, A bright future, it will inspire. So let us embrace, this new way to see, The complexity of math, now easy to be.
  - ausydi 4y ago
    :)
  - bembo 4y ago
    :0
memalign 4y ago
This project is so cool! Please copy some of the UI ideas from my 2D graphing calculator (which itself copied nearly all of the UI of graphtoy.com): https://memalign.github.io/m/formulagraph/index.html https://memalign.github.io/m/formulagraph/index.html - Buttons to load examples - Quick way to share a link to the current plot - Buttons that show what functions are supported

41 points by timokoesters 4y ago

Dang, that's really pretty. Could do with a little interface polish, but really nice visualizations. How does 't' work? Would love to be able to feed an audio waveform into a fullscreen mode and some palette options.

timokoesters 4y ago
t is just a time variable that's loaded from the CPU to the GPU every frame, so it's possible to use all sorts of other data as well.
- nextaccountic 4y ago
  Could the shader just compute the t by itself, without loading it every frame?

farcaster 4y ago

I've been meaning to do some project in the browser involving the GPU and can't decide on a framework to use. What would you recommend? The cool kids seem to be using pure webGPU

timokoesters 4y ago
This was made in Rust using WGPU and their WGSL shading language. It still needs more documentation and tutorials, but the results are great and port to many platforms.

c1ccccc1 4y ago

Here's some more examples: cos((x - t)) + cos(0.5877852522924731*y + 0.8090169943749475*(x - t)) + cos(0.9510565162951535*y + 0.30901699437494745*(x - t)) + cos(0.9510565162951536*y - 0.30901699437494734*(x - t)) + cos(0.5877852522924732*y - 0.8090169943749473*(x - t)) = z 10.0*(pow(sin(0.1*(x*x-y*y)), 2.0) + pow(sin(0.2*x*y), 2.0))/sqrt(x*x + y*y) = z x*x+y*y+z*z=2.0+cos(t+10.0*x+24.0*y)+cos(t - 10.0*x+24.0*y+16.0*z)+sin(t+x+y+2.0*z)+cos(3.0*t+y-z)+sin(2.0*t+x*y)+cos(t+3.0*x*y)+sin(0.1*t+y*z + 7.0*x*y)+cos(0.5*t+x*y*z)+cos(5.0*z)+cos(1.618*t+7.0*z)+cos((x+2.0*y)*(2.0\*z-y))

contravariant 4y ago
You escaped an * one time too many in the last one.

gpm 4y ago

Did you publish the source as well?

jayhoon 4y ago

Adding a periodic unbounded function of time (like tan) makes the plot to "explode": (6.0*(0.04*x*x - 1.0)*pow(0.2*x, 2.0) + pow(0.02*x*x - 1.0, 2.0) + 6.0*(0.04*y*y - 1.0)*pow(0.2*y, 2.0) + pow(0.04*y*y - 1.0, 2.0) + 6.0*(0.04*z*z - 1.0)*pow(0.2*z, 2.0) + pow(0.04*z*z - 1.0, 2.0)) = tan(t) Adding more non-linearity makes the plot is more dynamic: (6.0*(0.04*x*x - 1.0)*pow(0.2*x, 2.0) + pow(0.02*x*x - 1.0, 2.0) + 6.0*(0.04*y*y - 1.0)*pow(0.2*y, 2.0) + pow(0.04*y*y - 1.0, 2.0) + 6.0*(0.04*z*z - 1.0)*pow(0.2*z, 2.0) + pow(0.04*z*z - 1.0, 2.0)) = tan(t*cos(t)) Edit: Escaping.

ausydi 4y ago

This is a truly impressive achievement in real-time browser rendering. The utilization of GPU power to plot implicit functions in real-time is a testament to the capabilities of modern web technologies. The ability to interactively explore and visualize these complex mathematical functions in the browser will undoubtedly prove to be a valuable tool for both researchers and students alike. The seamless integration of this technology into a web-based platform also makes it easily accessible to a wide audience, further increasing its impact. I am eager to see what other groundbreaking developments will come out of this field in the future.

ausydi 4y ago
A browser-based plotter, with GPU power to boot, A tool for math students, a treasure to loot. Implicit functions, once hard to explore, Now with this tool, easily to deplore. Real-time rendering, a sight to behold, A new way to understand, the stories these functions have told. Interactive and accessible, to all with a browser, A true game-changer, like the discovery of a new rover. No longer a struggle, to see and to know, The beauty of math, it can now show. This technology, a democratizer, A bright future, it will inspire. So let us embrace, this new way to see, The complexity of math, now easy to be.
- ausydi 4y ago
  :)
- bembo 4y ago
  :0

memalign 4y ago

This project is so cool! Please copy some of the UI ideas from my 2D graphing calculator (which itself copied nearly all of the UI of graphtoy.com): https://memalign.github.io/m/formulagraph/index.html https://memalign.github.io/m/formulagraph/index.html - Buttons to load examples - Quick way to share a link to the current plot - Buttons that show what functions are supported