5 ms·

Graphtoy

237 points by based2 6y ago

mikewarot 6y ago
It seems broken on Chrome Version 87.0.4280.88 (Official Build) (64-bit)
- amelius 6y ago
  Examples work but function-buttons seem broken on Firefox 84.0 (Linux, 64bit)
jhncls 6y ago
See also https://news.ycombinator.com/item?id=25574661 https://news.ycombinator.com/item?id=25574661 of a few days ago.
deleted 6y ago
[deleted]
lligallo 6y ago
Checkout this video by the author. It makes a full 3d complex scene out of a math formula, with step by step explanation https://youtu.be/8--5LwHRhjk https://youtu.be/8--5LwHRhjk
- tconley 6y ago
  maybe i should have paid more attention in math class
  - Edmond 6y ago
    not quite the same but if you're into math as art, try desmos: https://www.desmos.com/calculator/ccoiiocfbw https://www.desmos.com/calculator/ccoiiocfbw
    - rantwasp 6y ago
      this will blow your mind: https://reddit.com/r/desmos/comments/gccqty/a_b%C3%A9zier_night/ https://reddit.com/r/desmos/comments/gccqty/a_b%C3%A9zier_ni... source: https://www.desmos.com/calculator/nhyta2fb68 https://www.desmos.com/calculator/nhyta2fb68
- dmix 6y ago
  Watching this reminds me of trying to use the 'golden ratio' and other mathy formulas in CSS typography and column grids to get "perfect" alignments from scratch. For ex from film: arranging the body to the min(d1, d2) alignment to the head sphere. But obviously this is on a whole other level of knowledge and complexity.
- devmunchies 6y ago
  He links to shadertoy[1] with the code. it looks like the code is in C? how is it rendering in the browser? [1]: https://www.shadertoy.com/view/WsSBzh https://www.shadertoy.com/view/WsSBzh
  - detaro 6y ago
    It's not C, it's GLSL shader language, which is used in the browser through WebGL.
    - coldtea 6y ago
      >it looks like the code is in C? how is it rendering in the browser? Plus, C could be compiled into WASM with emscripten, and be hooked to render on a Canvas or WebGL or something.
  - Netcob 6y ago
    You write GLSL, which is a shader language. Specifically, in this case, you write code that determines the color of a pixel given its coordinates (and some other input variables). On Shadertoy, they use WebGL to create a little rendering pipeline that in the simplest configuration renders two triangles to form a rectangle, using your GLSL code. Since it's WebGL (should be supported by all modern browsers, mobile included), that code is executed directly on your GPU. In more complex Shadertoy scenarios, you can do multiple passes where you render to different buffers and then use those buffers as textures in other passes. One of the uses of that is keeping state between frames, which would not be possible in a purely shader-based system otherwise. For example, if you have some sort of player character you move around the world, you may use one pixel to store the position, another to store the rotation and so on. Or you can use the image output from the previous frame as the input for the next frame to compute IIR functions, simulate cellular automatons and so on. I think by now you can even render to cube maps and multiple viewports (for VR). There's even a "sound" shader you can write that is called once and then renders a waveform for one minute and then plays that back while displaying the regular shader.
- AceJohnny2 6y ago
  Oh, it's Inigo Quilez He's known as "iq" in Shader circles and is basically a god. He's also the (co?)creator of Shadertoy.com
ellis0n 6y ago
Happy New Year! Amazing beautiful formulas, I'm surprised! Thanks to Inigo and Rafæl for a new cool tool! PS: why do designers prefer gray colors UI, but there is no alternative?
Buttons840 6y ago
Anyone know of graphing software on the computer that can graph arbitrary inequalities and logical expressions like the HP Prime's advanced graphing can? [0] For example, if you say x^2 = y it will draw a sideways parabola, top and bottom (yes, it's not a function). Or if you say 10 = x^2 + y^2 it will draw a circle without any gaps. Or if you say sin((1+sin(x+y))*asin(.5*(sin(x)+sin(y)))+(1+sin(x-y))*asin(.5*(cos(x)+cos(y))))=0 it draws something like a chain link fence. [1] It works well on a battery operated calculator, so a desktop computer should have no trouble with it, but does the software exist? [0]: https://www.youtube.com/watch?v=GAVqjBxFyXA https://www.youtube.com/watch?v=GAVqjBxFyXA [1]: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.techpoweredmath.com%2Fimg%2Fhp-prime-advanced-graphing.jpg&f=1&nofb=1 https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F...
- maxwelljoslyn 6y ago
  On HN a few days ago, I saw a Windows program which seemed like it would do as you describe (and much more.) But - curses - I didn't bookmark it, at least not in the normal place. I'll look a little harder for you. If I don't update/follow up on this comment, assume I didn't find it. :( EDIT: Aha. It's called "EvalDraw." Cheers to user 'TeMPOral for sharing. https://news.ycombinator.com/item?id=25575775 https://news.ycombinator.com/item?id=25575775
  - TeMPOraL 6y ago
    Yup, I usually used EvalDraw in (x,y) mode to graph inequalities. You have to remember though that equations like x=y or x-y = 0 represent a line - an infinitely thin object - so EvalDraw will likely not draw you anything given such input. You have to translate your equation into something that has thickness. E.g. an f(x) = 0 into abs(f(x)) < 0.01 For instance, GP's example: (x,y) abs(sin((1+sin(x+y))asin(.5(sin(x)+sin(y)))+(1+sin(x-y))asin(.5(cos(x)+cos(y)))))<0.01 Draws a beautiful red chain-link fence on blue background. If you can rewrite your formula to give you a value between 0 and 1, you'll get a nice color gradient. And then you can have more direct control over colors using some of the things I described in the linked comment.
- mojomark 6y ago
MichaelMoser123 6y ago
thanks! fun to multiply every function by sin(t), makes it come alive.
timvisee 6y ago
Man this is fun! Dusted off my graphical calculator to give this formula a try. https://www.youtube.com/watch?v=97T-Zw5Nyf0 https://www.youtube.com/watch?v=97T-Zw5Nyf0 Its interesting to see how fast the browser is versus this calculator. Sorry for the unprofessional video.
adriancooney 6y ago
I absolutely adore this space. Adding the time dimension to graphing tools is crazy powerful. I've done something similar a while back that allows you to produce sound (shameless plug): https://noise.sh https://noise.sh (and previous discussion: https://news.ycombinator.com/item?id=24441518 https://news.ycombinator.com/item?id=24441518)

Graphtoy

237 points by based2 6y ago

mikewarot 6y ago

It seems broken on Chrome Version 87.0.4280.88 (Official Build) (64-bit)

amelius 6y ago
Examples work but function-buttons seem broken on Firefox 84.0 (Linux, 64bit)

jhncls 6y ago

See also https://news.ycombinator.com/item?id=25574661 https://news.ycombinator.com/item?id=25574661 of a few days ago.

deleted 6y ago

[deleted]

lligallo 6y ago

Checkout this video by the author. It makes a full 3d complex scene out of a math formula, with step by step explanation https://youtu.be/8--5LwHRhjk https://youtu.be/8--5LwHRhjk

tconley 6y ago
maybe i should have paid more attention in math class
- Edmond 6y ago
  not quite the same but if you're into math as art, try desmos: https://www.desmos.com/calculator/ccoiiocfbw https://www.desmos.com/calculator/ccoiiocfbw
  - rantwasp 6y ago
    this will blow your mind: https://reddit.com/r/desmos/comments/gccqty/a_b%C3%A9zier_night/ https://reddit.com/r/desmos/comments/gccqty/a_b%C3%A9zier_ni... source: https://www.desmos.com/calculator/nhyta2fb68 https://www.desmos.com/calculator/nhyta2fb68
dmix 6y ago
Watching this reminds me of trying to use the 'golden ratio' and other mathy formulas in CSS typography and column grids to get "perfect" alignments from scratch. For ex from film: arranging the body to the min(d1, d2) alignment to the head sphere. But obviously this is on a whole other level of knowledge and complexity.
devmunchies 6y ago
He links to shadertoy[1] with the code. it looks like the code is in C? how is it rendering in the browser? [1]: https://www.shadertoy.com/view/WsSBzh https://www.shadertoy.com/view/WsSBzh
- detaro 6y ago
  It's not C, it's GLSL shader language, which is used in the browser through WebGL.
  - coldtea 6y ago
    >it looks like the code is in C? how is it rendering in the browser? Plus, C could be compiled into WASM with emscripten, and be hooked to render on a Canvas or WebGL or something.
- Netcob 6y ago
  You write GLSL, which is a shader language. Specifically, in this case, you write code that determines the color of a pixel given its coordinates (and some other input variables). On Shadertoy, they use WebGL to create a little rendering pipeline that in the simplest configuration renders two triangles to form a rectangle, using your GLSL code. Since it's WebGL (should be supported by all modern browsers, mobile included), that code is executed directly on your GPU. In more complex Shadertoy scenarios, you can do multiple passes where you render to different buffers and then use those buffers as textures in other passes. One of the uses of that is keeping state between frames, which would not be possible in a purely shader-based system otherwise. For example, if you have some sort of player character you move around the world, you may use one pixel to store the position, another to store the rotation and so on. Or you can use the image output from the previous frame as the input for the next frame to compute IIR functions, simulate cellular automatons and so on. I think by now you can even render to cube maps and multiple viewports (for VR). There's even a "sound" shader you can write that is called once and then renders a waveform for one minute and then plays that back while displaying the regular shader.
AceJohnny2 6y ago
Oh, it's Inigo Quilez He's known as "iq" in Shader circles and is basically a god. He's also the (co?)creator of Shadertoy.com

ellis0n 6y ago

Happy New Year! Amazing beautiful formulas, I'm surprised! Thanks to Inigo and Rafæl for a new cool tool! PS: why do designers prefer gray colors UI, but there is no alternative?

Buttons840 6y ago

Anyone know of graphing software on the computer that can graph arbitrary inequalities and logical expressions like the HP Prime's advanced graphing can? [0] For example, if you say x^2 = y it will draw a sideways parabola, top and bottom (yes, it's not a function). Or if you say 10 = x^2 + y^2 it will draw a circle without any gaps. Or if you say sin((1+sin(x+y))*asin(.5*(sin(x)+sin(y)))+(1+sin(x-y))*asin(.5*(cos(x)+cos(y))))=0 it draws something like a chain link fence. [1] It works well on a battery operated calculator, so a desktop computer should have no trouble with it, but does the software exist? [0]: https://www.youtube.com/watch?v=GAVqjBxFyXA https://www.youtube.com/watch?v=GAVqjBxFyXA [1]: https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Fwww.techpoweredmath.com%2Fimg%2Fhp-prime-advanced-graphing.jpg&f=1&nofb=1 https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2F...

maxwelljoslyn 6y ago
On HN a few days ago, I saw a Windows program which seemed like it would do as you describe (and much more.) But - curses - I didn't bookmark it, at least not in the normal place. I'll look a little harder for you. If I don't update/follow up on this comment, assume I didn't find it. :( EDIT: Aha. It's called "EvalDraw." Cheers to user 'TeMPOral for sharing. https://news.ycombinator.com/item?id=25575775 https://news.ycombinator.com/item?id=25575775
- TeMPOraL 6y ago
  Yup, I usually used EvalDraw in (x,y) mode to graph inequalities. You have to remember though that equations like x=y or x-y = 0 represent a line - an infinitely thin object - so EvalDraw will likely not draw you anything given such input. You have to translate your equation into something that has thickness. E.g. an f(x) = 0 into abs(f(x)) < 0.01 For instance, GP's example: (x,y) abs(sin((1+sin(x+y))asin(.5(sin(x)+sin(y)))+(1+sin(x-y))asin(.5(cos(x)+cos(y)))))<0.01 Draws a beautiful red chain-link fence on blue background. If you can rewrite your formula to give you a value between 0 and 1, you'll get a nice color gradient. And then you can have more direct control over colors using some of the things I described in the linked comment.
mojomark 6y ago

MichaelMoser123 6y ago

thanks! fun to multiply every function by sin(t), makes it come alive.

timvisee 6y ago

Man this is fun! Dusted off my graphical calculator to give this formula a try. https://www.youtube.com/watch?v=97T-Zw5Nyf0 https://www.youtube.com/watch?v=97T-Zw5Nyf0 Its interesting to see how fast the browser is versus this calculator. Sorry for the unprofessional video.

adriancooney 6y ago

I absolutely adore this space. Adding the time dimension to graphing tools is crazy powerful. I've done something similar a while back that allows you to produce sound (shameless plug): https://noise.sh https://noise.sh (and previous discussion: https://news.ycombinator.com/item?id=24441518 https://news.ycombinator.com/item?id=24441518)