7 ms·

Graph Toy, an interactive graph visualizer using mathematical functions

194 points by netule 6y ago

netule 6y ago
This is based on the original work by Inigo Quilez [1], but adds support for time and custom constants. [1] http://www.iquilezles.org/apps/graphtoy/ http://www.iquilezles.org/apps/graphtoy/
- wetmore 6y ago
  Do you know if the technique for rendering the graphs is similar to the one he outlines at the end of this article? https://www.iquilezles.org/www/articles/distance/distance.htm https://www.iquilezles.org/www/articles/distance/distance.ht...
  - dahart 6y ago
    It's not the same technique. That article is describing how to plot functions when drawing them using fragment shaders, via the vertical y-axis distance to the function. So to get a constant width line you have to compensate for the slope of the line. Graph Toy is using line drawing to render the function plots, and samples the function once for every pixel horizontally, so the line width issue it taken care of. It's very easy to pop open your dev tools panel and read the source code, BTW, it's not minified or obfuscated. The drawing routine is called draw().
petrocrat 6y ago
Is this a custom <Canvas/> widget or is it using a library to create the canvas? If so, which library?
- Impossible 6y ago
  It likely uses piLibJS https://www.iquilezles.org/code/piLibsJS/piLibsJS.htm https://www.iquilezles.org/code/piLibsJS/piLibsJS.htm, a small framework created by Inigo Quilez and used by Shadertoy
symplee 6y ago
This is awesome! Anyone discover any cool graphs to share? For example, the simplest one producing something interesting I've found so far is: t%x Which creates a growing jagged triangular graph when you press "play" for the "t" constant. Naturally, this can be built upon to make weirder and weirder graphs, ex: sin(t%x)
- ggoo 6y ago
  inversesqrt(t%x)
- zw123456 6y ago
  I kind of like this one sin(8x)/2x
  - tartoran 6y ago
    try sin(8 * x)/2 * x/sin(t) or even sin(b * x * t/clamp(b/10,x/t,t)) * x * clamp(b/40 * t,x/10,t) or sin(b * x * t/clamp(b/10,x / t,t)) * x * clamp(b/40,x/10,t) or sin( b * x * t/clamp(b/10,x/t,t)) * x * (x-x * x) * clamp(b/4,sin (x * t) * x/10,t)
    - zw123456 6y ago
      hehe, nice. I can see I have a new way of wasting time :)
- boxfire 6y ago
  noise(t*x)*(x+1) There was a hypnotic graphic effect on my phone. As the wave phased between modes it appears to be a smooth wave after a threshold (graph sample aliasing?), a cyclic standing envelope like angular frequency, in t. Quite nice.
  - prionassembly 6y ago
    Stochastic resonance?
TeMPOraL 6y ago
This reminds me of my favourite Windows application ever: EvalDraw. It's like this, except that beyond drawing single-argument f(x) -> y functions, it also draws f(x, y) -> z heatmaps, f(x, y) -> (R, G, B) colored heatmaps, f(x, y, z) -> (R, G, B) volumetric 3D graphics, and all these have also a f(..., t) -> ... variant for animations. And then you dig in and discover it somehow also has keyboard & mouse input handling, can play sounds (and can be used for live procedural music), simulate a piano keyboard, and probably a bunch of other stuff I'm forgetting. It was my go-to tool for visualizing any kind of math back during the university years. In fact, I just took a look at it again (after not using it for years) and I discovered it has networking capability, IDE features, and - I kid you not - it seems to compile the scripts down to native code, offering a helpful x86 ASM output in the built-in debugger. It can dump executables, has bindings to OpenGL and support for old-school VR (colored stereoscopic, NVidia 3DVision). All in an executable that weighs 746 KB. It's hands-down one of the most impressive pieces of software I have ever seen. http://advsys.net/ken/download.htm#evaldraw http://advsys.net/ken/download.htm#evaldraw EDIT: And if you give it a try, be sure to check some of the ridiculous amount of examples it comes bundled with, which include games, explorable explanations, infinite calendars, optical systems simulations, and a whole host of other stuff.
- enos_feedler 6y ago
  This is insanely cool. Thanks for sharing
- westoncb 6y ago
  Apparently John Carmack thought highly of Ken's programming, too: "Carmack: Well there's a big difference between who I consider the most talented and who I would necessarily hire, because you have to hire people that fit right. If I had to pick who I think is just the most talented, it would probably be Ken Silverman, the guy that did the BUILD engine. He does engines and tools. He's great as an editor. He writes all the code for everything, and he's just extremely talented. I think it was 3D Realms' worst decisions not to coddle him, or whatever it took, to keep him on board. I think if he was still working directly for 3D Realms, they would have a Quake-type game shipped by now, just because he's extraordinarily good." http://advsys.net/ken/carmken.htm http://advsys.net/ken/carmken.htm —and he's now working on the voxel display project that was on HN yesterday: https://news.ycombinator.com/item?id=25549717 https://news.ycombinator.com/item?id=25549717
danpalmer 6y ago
This reminds me of Grapher on macOS, which I had expected would have been removed by now, but no, it's still there on Big Sur!
- perryprog 6y ago
  Not only that, but it's extraordinarily capable as a graphing app (and comes with examples demonstrating its features), too! It also has a pretty crazy history: https://news.ycombinator.com/item?id=1584501 https://news.ycombinator.com/item?id=1584501
  - wtallis 6y ago
    The current macOS Grapher app is an unrelated replacement for that Graphing Calculator app, which Apple no longer has a deal to distribute.
    - perryprog 6y ago
      Ah, you're correct. I confused it with Curvus Pro X: https://appleinsider.com/articles/04/09/15/apple_acquires_curvus_pro_x_to_power_new_mac_os_x_tiger_application https://appleinsider.com/articles/04/09/15/apple_acquires_cu...
- sgerenser 6y ago
  Interesting, I had no idea that Grapher existed. Looks like it is only the spiritual successor to the classic MacOS Graphing Calculator, not an actual continuation by the original developers: https://en.wikipedia.org/wiki/Grapher https://en.wikipedia.org/wiki/Grapher
dahart 6y ago
If the author is here -- the extra features compared to IQ's version are nice! I might make this my bookmarked default version. If interested, here are a few thoughts: - It might be good to link directly to IQ's version of GraphToy, rather than his homepage. - I dig the white background option! - The create link feature is a bit smoother than the original. - The download image button is a great idea, though I just realized with both versions you can right click to save the image, without needing a new tab. One thing that occurred to me -- it would be killer if the download image version popped up an SVG render with a higher sampling rate, instead of pixels! A little text or UI could clarify how to save a pixel version vs a vector rendering. - I like the escalator function used to demo the time variable! I've used that very function on ShaderToy. - It would be super nice if the plot window used a flexbox or grid layout to stretch to fill the window. It's currently a bit smaller than IQ's and doesn't resize. - Might also be nice to have the help box be a popup you can click (the way it works in ShaderToy), and maybe put the variables underneath the plot, to allow the plot to expand to basically full screen?
zw123456 6y ago
It would be fun if it could play the wave form as audio.
akerr 6y ago
Reminds me of desmos.com which is aimed for education but is quite powerful, e.g. audio support for accessibility.
nwotnagrom 6y ago
this is great....
nayuki 6y ago
Reminds me of "(t,i,x,y) => creative code golfing" https://tixy.land/ https://tixy.land/ ; "Minimal 16x16 Dots Coding Environment" https://news.ycombinator.com/item?id=24974534 https://news.ycombinator.com/item?id=24974534 .

194 points by netule 6y ago

This is based on the original work by Inigo Quilez [1], but adds support for time and custom constants. [1] http://www.iquilezles.org/apps/graphtoy/ http://www.iquilezles.org/apps/graphtoy/

wetmore 6y ago
Do you know if the technique for rendering the graphs is similar to the one he outlines at the end of this article? https://www.iquilezles.org/www/articles/distance/distance.htm https://www.iquilezles.org/www/articles/distance/distance.ht...
- dahart 6y ago
  It's not the same technique. That article is describing how to plot functions when drawing them using fragment shaders, via the vertical y-axis distance to the function. So to get a constant width line you have to compensate for the slope of the line. Graph Toy is using line drawing to render the function plots, and samples the function once for every pixel horizontally, so the line width issue it taken care of. It's very easy to pop open your dev tools panel and read the source code, BTW, it's not minified or obfuscated. The drawing routine is called draw().

petrocrat 6y ago

Is this a custom <Canvas/> widget or is it using a library to create the canvas? If so, which library?

Impossible 6y ago
It likely uses piLibJS https://www.iquilezles.org/code/piLibsJS/piLibsJS.htm https://www.iquilezles.org/code/piLibsJS/piLibsJS.htm, a small framework created by Inigo Quilez and used by Shadertoy

symplee 6y ago

This is awesome! Anyone discover any cool graphs to share? For example, the simplest one producing something interesting I've found so far is: t%x Which creates a growing jagged triangular graph when you press "play" for the "t" constant. Naturally, this can be built upon to make weirder and weirder graphs, ex: sin(t%x)

ggoo 6y ago
inversesqrt(t%x)
zw123456 6y ago
I kind of like this one sin(8x)/2x
- tartoran 6y ago
  try sin(8 * x)/2 * x/sin(t) or even sin(b * x * t/clamp(b/10,x/t,t)) * x * clamp(b/40 * t,x/10,t) or sin(b * x * t/clamp(b/10,x / t,t)) * x * clamp(b/40,x/10,t) or sin( b * x * t/clamp(b/10,x/t,t)) * x * (x-x * x) * clamp(b/4,sin (x * t) * x/10,t)
  - zw123456 6y ago
    hehe, nice. I can see I have a new way of wasting time :)
boxfire 6y ago
noise(t*x)*(x+1) There was a hypnotic graphic effect on my phone. As the wave phased between modes it appears to be a smooth wave after a threshold (graph sample aliasing?), a cyclic standing envelope like angular frequency, in t. Quite nice.
- prionassembly 6y ago
  Stochastic resonance?

TeMPOraL 6y ago

This reminds me of my favourite Windows application ever: EvalDraw. It's like this, except that beyond drawing single-argument f(x) -> y functions, it also draws f(x, y) -> z heatmaps, f(x, y) -> (R, G, B) colored heatmaps, f(x, y, z) -> (R, G, B) volumetric 3D graphics, and all these have also a f(..., t) -> ... variant for animations. And then you dig in and discover it somehow also has keyboard & mouse input handling, can play sounds (and can be used for live procedural music), simulate a piano keyboard, and probably a bunch of other stuff I'm forgetting. It was my go-to tool for visualizing any kind of math back during the university years. In fact, I just took a look at it again (after not using it for years) and I discovered it has networking capability, IDE features, and - I kid you not - it seems to compile the scripts down to native code, offering a helpful x86 ASM output in the built-in debugger. It can dump executables, has bindings to OpenGL and support for old-school VR (colored stereoscopic, NVidia 3DVision). All in an executable that weighs 746 KB. It's hands-down one of the most impressive pieces of software I have ever seen. http://advsys.net/ken/download.htm#evaldraw http://advsys.net/ken/download.htm#evaldraw EDIT: And if you give it a try, be sure to check some of the ridiculous amount of examples it comes bundled with, which include games, explorable explanations, infinite calendars, optical systems simulations, and a whole host of other stuff.

enos_feedler 6y ago
This is insanely cool. Thanks for sharing
westoncb 6y ago
Apparently John Carmack thought highly of Ken's programming, too: "Carmack: Well there's a big difference between who I consider the most talented and who I would necessarily hire, because you have to hire people that fit right. If I had to pick who I think is just the most talented, it would probably be Ken Silverman, the guy that did the BUILD engine. He does engines and tools. He's great as an editor. He writes all the code for everything, and he's just extremely talented. I think it was 3D Realms' worst decisions not to coddle him, or whatever it took, to keep him on board. I think if he was still working directly for 3D Realms, they would have a Quake-type game shipped by now, just because he's extraordinarily good." http://advsys.net/ken/carmken.htm http://advsys.net/ken/carmken.htm —and he's now working on the voxel display project that was on HN yesterday: https://news.ycombinator.com/item?id=25549717 https://news.ycombinator.com/item?id=25549717

danpalmer 6y ago

This reminds me of Grapher on macOS, which I had expected would have been removed by now, but no, it's still there on Big Sur!

perryprog 6y ago
Not only that, but it's extraordinarily capable as a graphing app (and comes with examples demonstrating its features), too! It also has a pretty crazy history: https://news.ycombinator.com/item?id=1584501 https://news.ycombinator.com/item?id=1584501
- wtallis 6y ago
  The current macOS Grapher app is an unrelated replacement for that Graphing Calculator app, which Apple no longer has a deal to distribute.
  - perryprog 6y ago
    Ah, you're correct. I confused it with Curvus Pro X: https://appleinsider.com/articles/04/09/15/apple_acquires_curvus_pro_x_to_power_new_mac_os_x_tiger_application https://appleinsider.com/articles/04/09/15/apple_acquires_cu...
sgerenser 6y ago
Interesting, I had no idea that Grapher existed. Looks like it is only the spiritual successor to the classic MacOS Graphing Calculator, not an actual continuation by the original developers: https://en.wikipedia.org/wiki/Grapher https://en.wikipedia.org/wiki/Grapher

dahart 6y ago

If the author is here -- the extra features compared to IQ's version are nice! I might make this my bookmarked default version. If interested, here are a few thoughts: - It might be good to link directly to IQ's version of GraphToy, rather than his homepage. - I dig the white background option! - The create link feature is a bit smoother than the original. - The download image button is a great idea, though I just realized with both versions you can right click to save the image, without needing a new tab. One thing that occurred to me -- it would be killer if the download image version popped up an SVG render with a higher sampling rate, instead of pixels! A little text or UI could clarify how to save a pixel version vs a vector rendering. - I like the escalator function used to demo the time variable! I've used that very function on ShaderToy. - It would be super nice if the plot window used a flexbox or grid layout to stretch to fill the window. It's currently a bit smaller than IQ's and doesn't resize. - Might also be nice to have the help box be a popup you can click (the way it works in ShaderToy), and maybe put the variables underneath the plot, to allow the plot to expand to basically full screen?

zw123456 6y ago

It would be fun if it could play the wave form as audio.

akerr 6y ago

Reminds me of desmos.com which is aimed for education but is quite powerful, e.g. audio support for accessibility.

nwotnagrom 6y ago

this is great....

nayuki 6y ago

Reminds me of "(t,i,x,y) => creative code golfing" https://tixy.land/ https://tixy.land/ ; "Minimal 16x16 Dots Coding Environment" https://news.ycombinator.com/item?id=24974534 https://news.ycombinator.com/item?id=24974534 .