4 ms·

WebGL Equation Plot

63 points by jseip 13y ago

jreimers 13y ago
Cool! I made half a sphere with 0.5+sqrt(0.2-((x-0.5)^2+(y-0.5)^2)). If there was a way to do a mirroring on the xy plane (as in a +/- z value) it could be a full one.
- vicapow 13y ago
  that's so cool! btw, you can link to your equation here http://vicapow.github.io/equation-plot-webgl/index.html#0.5%2Bsqrt(0.2-((x-0.5)%5E2%2B(y-0.5)%5E2)) edit: but HN seems to be messing up the urls :(
- Laremere 13y ago
  I managed to modify yours to make a full sphere with a bad hack: http://vicapow.github.io/equation-plot-webgl/index.html#0.5%2Bsqrt(0.2-((x-0.5)%5E2%2B(y-0.5)%5E2))%20*%20(round(random())%20*%202%20-%201)%20 http://vicapow.github.io/equation-plot-webgl/index.html#0.5%... There's probably a better way to choose which points go above and below than random(), but it works. Edit: Got it to work non-randomly. Adjacent dots alternate above and below: http://vicapow.github.io/equation-plot-webgl/index.html#0.5%2Bsqrt(0.2-((x-0.5)%5E2%2B(y-0.5)%5E2))%20*%20((0%20%3D%3D%20((x%20*%2040)%20%25%202))*%202%20-%201)%20%20*%20((0%20%3D%3D%20((y%20*%2040)%20%25%202))*%202%20-%201)%20%20 http://vicapow.github.io/equation-plot-webgl/index.html#0.5%...
  - deleted 13y ago
    [deleted]
  - bemmu 13y ago
    It seems the result is a complex number. Fiddled around with it a bit until I got lucky and got the plane to disappear. http://vicapow.github.io/equation-plot-webgl/index.html#0.48-re((sqrt(0.15-((x-0.5)%5E2%2B(y-0.5)%5E2))*i*100%20%2B%20(sqrt(0.15-((x-0.5)%5E2%2B(y-0.5)%5E2))%20*%20(round(random())%20*%202%20-%201)))) http://vicapow.github.io/equation-plot-webgl/index.html#0.48...)
elwell 13y ago
Half-cone and triangle. http://vicapow.github.io/equation-plot-webgl/#sqrt(-(x*x)%2B(x*y))
- vicapow 13y ago
  very cool!
- Gravityloss 13y ago
  This produces a nice flared tube or "neck" http://vicapow.github.io/equation-plot-webgl/#0.1*cos%286.28*x%29*tan%283.14*y%29 http://vicapow.github.io/equation-plot-webgl/#0.1*cos%286.28... 0.1cos(6.28x)tan(3.14y)
munchor 13y ago
This is really nice, already sent in a pull request! I've been meaning to learn about WebGL for a while, I think I'll give it a try this weekend.
danmaz74 13y ago
This reminds me my biggest hobby project when in high school; I was so fascinated with 3D plots that I spent I don't know how much time to create a compiler from math formulas to to machine code so that I could plot this kind of things on my Amiga (without a math coprocessor). What amazes me the most is not that you can now animate that in real time in an interpreted language in a browser, but how easy is to learn all these things through the internet, instead of having to find a book in the bookstore and hope that it could have what you needed...
vicapow 13y ago
for comparison, here's a version in SVG: http://vicapow.github.io/dz/example/equation-plot.html http://vicapow.github.io/dz/example/equation-plot.html
- twotwotwo 13y ago
  Weird question, but, did you possibly, by chance, develop/debug this in part in a café in Berkeley on Saturday with a copy of Think Bayes on the table? 'Cause I may have been sitting at the next table if so.
  - vicapow 13y ago
    omg! yeah, i was. small world. do you go to Berkeley?
    - twotwotwo 13y ago
      Freakish--I don't go to Berkeley, hadn't been to that cafe before! Anyway, woot, very cool hack! (And cool enough for the glance at it to stick in one's memory for a few days, apparently.)
defen 13y ago
I'm getting "Uncaught TypeError: Cannot call method 'getExtension' of null" in Chrome 32.0.1700.55 beta - anyone know what that's about? My chrome://flags/ are all set to default.
siddboots 13y ago
If anyone is interested in a full-featured library for this sort of thing, see MathBox.js https://github.com/unconed/MathBox.js https://github.com/unconed/MathBox.js
bemmu 13y ago
http://vicapow.github.io/equation-plot-webgl/#number(%22001111100111100011110011110010000000011000111000111001001110011100110011111111000010000110011100110011001110011111111001000100100111110010000011110000001111001111100100000000010011001110011111111001111100100111110010011100110011111111001111100100111110010011110010000000011111111111111111111111111111111111111111100000011100000001100111110010000000011001111001001111100100011100010011111111001111111001111100100001000010011111111100000011001111100100100010010000001111111111001001111100100111110010011111111001111001001111100100111110010011111111100000011100000001100111110010000000011111111111111111111111111111111111111111000000001001111100100100111100110000001111001111001111100100100011100100111100111001111001111100100100001100100111111111001111000000000100100100100100111000111001111001111100100100110000100111100111001111001111100100100111000100111100111001111001111100100100111100110000001111111111111111111111111111111111111111111000000001110000000011100111111111111111001111100110011111001100111111111111111001111100110011111001100111111111111111000000001110000000011100111111111111111001111111110011111111100111111111111111001111111110011111111100111111111111111001111111110011111111100000000111111111111111111111111111111111111111111111100111111001111000111100111100100000000100110011001110010011100011100111100111100110011001100111001100001100111100111100110011001001111100100100100111100111100110011001000000000100110000111100111100110011001001111100100111000111100111110001100011001111100100111100111100111111111111111111111111111111111111111111111111111111111111111111111111111111111111%22(floor(x*39)%2Bfloor(y*40)*39%2B1))*10%2B0.2 http://vicapow.github.io/equation-plot-webgl/#number(%220011...
deleted 13y ago
[deleted]

63 points by jseip 13y ago

Cool! I made half a sphere with 0.5+sqrt(0.2-((x-0.5)^2+(y-0.5)^2)). If there was a way to do a mirroring on the xy plane (as in a +/- z value) it could be a full one.

vicapow 13y ago
that's so cool! btw, you can link to your equation here http://vicapow.github.io/equation-plot-webgl/index.html#0.5%2Bsqrt(0.2-((x-0.5)%5E2%2B(y-0.5)%5E2)) edit: but HN seems to be messing up the urls :(
Laremere 13y ago
I managed to modify yours to make a full sphere with a bad hack: http://vicapow.github.io/equation-plot-webgl/index.html#0.5%2Bsqrt(0.2-((x-0.5)%5E2%2B(y-0.5)%5E2))%20*%20(round(random())%20*%202%20-%201)%20 http://vicapow.github.io/equation-plot-webgl/index.html#0.5%... There's probably a better way to choose which points go above and below than random(), but it works. Edit: Got it to work non-randomly. Adjacent dots alternate above and below: http://vicapow.github.io/equation-plot-webgl/index.html#0.5%2Bsqrt(0.2-((x-0.5)%5E2%2B(y-0.5)%5E2))%20*%20((0%20%3D%3D%20((x%20*%2040)%20%25%202))*%202%20-%201)%20%20*%20((0%20%3D%3D%20((y%20*%2040)%20%25%202))*%202%20-%201)%20%20 http://vicapow.github.io/equation-plot-webgl/index.html#0.5%...
- deleted 13y ago
  [deleted]
- bemmu 13y ago
  It seems the result is a complex number. Fiddled around with it a bit until I got lucky and got the plane to disappear. http://vicapow.github.io/equation-plot-webgl/index.html#0.48-re((sqrt(0.15-((x-0.5)%5E2%2B(y-0.5)%5E2))*i*100%20%2B%20(sqrt(0.15-((x-0.5)%5E2%2B(y-0.5)%5E2))%20*%20(round(random())%20*%202%20-%201)))) http://vicapow.github.io/equation-plot-webgl/index.html#0.48...)

elwell 13y ago

Half-cone and triangle. http://vicapow.github.io/equation-plot-webgl/#sqrt(-(x*x)%2B(x*y))

vicapow 13y ago
very cool!
Gravityloss 13y ago
This produces a nice flared tube or "neck" http://vicapow.github.io/equation-plot-webgl/#0.1*cos%286.28*x%29*tan%283.14*y%29 http://vicapow.github.io/equation-plot-webgl/#0.1*cos%286.28... 0.1cos(6.28x)tan(3.14y)

munchor 13y ago

This is really nice, already sent in a pull request! I've been meaning to learn about WebGL for a while, I think I'll give it a try this weekend.

danmaz74 13y ago

This reminds me my biggest hobby project when in high school; I was so fascinated with 3D plots that I spent I don't know how much time to create a compiler from math formulas to to machine code so that I could plot this kind of things on my Amiga (without a math coprocessor). What amazes me the most is not that you can now animate that in real time in an interpreted language in a browser, but how easy is to learn all these things through the internet, instead of having to find a book in the bookstore and hope that it could have what you needed...

vicapow 13y ago

for comparison, here's a version in SVG: http://vicapow.github.io/dz/example/equation-plot.html http://vicapow.github.io/dz/example/equation-plot.html

twotwotwo 13y ago
Weird question, but, did you possibly, by chance, develop/debug this in part in a café in Berkeley on Saturday with a copy of Think Bayes on the table? 'Cause I may have been sitting at the next table if so.
- vicapow 13y ago
  omg! yeah, i was. small world. do you go to Berkeley?
  - twotwotwo 13y ago
    Freakish--I don't go to Berkeley, hadn't been to that cafe before! Anyway, woot, very cool hack! (And cool enough for the glance at it to stick in one's memory for a few days, apparently.)

defen 13y ago

I'm getting "Uncaught TypeError: Cannot call method 'getExtension' of null" in Chrome 32.0.1700.55 beta - anyone know what that's about? My chrome://flags/ are all set to default.

siddboots 13y ago

If anyone is interested in a full-featured library for this sort of thing, see MathBox.js https://github.com/unconed/MathBox.js https://github.com/unconed/MathBox.js

bemmu 13y ago

http://vicapow.github.io/equation-plot-webgl/#number(%22001111100111100011110011110010000000011000111000111001001110011100110011111111000010000110011100110011001110011111111001000100100111110010000011110000001111001111100100000000010011001110011111111001111100100111110010011100110011111111001111100100111110010011110010000000011111111111111111111111111111111111111111100000011100000001100111110010000000011001111001001111100100011100010011111111001111111001111100100001000010011111111100000011001111100100100010010000001111111111001001111100100111110010011111111001111001001111100100111110010011111111100000011100000001100111110010000000011111111111111111111111111111111111111111000000001001111100100100111100110000001111001111001111100100100011100100111100111001111001111100100100001100100111111111001111000000000100100100100100111000111001111001111100100100110000100111100111001111001111100100100111000100111100111001111001111100100100111100110000001111111111111111111111111111111111111111111000000001110000000011100111111111111111001111100110011111001100111111111111111001111100110011111001100111111111111111000000001110000000011100111111111111111001111111110011111111100111111111111111001111111110011111111100111111111111111001111111110011111111100000000111111111111111111111111111111111111111111111100111111001111000111100111100100000000100110011001110010011100011100111100111100110011001100111001100001100111100111100110011001001111100100100100111100111100110011001000000000100110000111100111100110011001001111100100111000111100111110001100011001111100100111100111100111111111111111111111111111111111111111111111111111111111111111111111111111111111111%22(floor(x*39)%2Bfloor(y*40)*39%2B1))*10%2B0.2 http://vicapow.github.io/equation-plot-webgl/#number(%220011...

deleted 13y ago

[deleted]