6 ms·

WebGL Julia Set

70 points by roombarampage 10y ago

roombarampage 10y ago
This project was built using code I wrote previously for this pure javascript fractal renderer: http://jonathan-potter.github.io/Mandelbrot/ http://jonathan-potter.github.io/Mandelbrot/ Jamie Wong's post on hacker news earlier this week was a massive help in allowing me to switch to using WebGL for the rendering portion. His post can be found here: http://jamie-wong.com/2016/07/06/metaballs-and-webgl/ http://jamie-wong.com/2016/07/06/metaballs-and-webgl/
- robin_reala 10y ago
  Nothing showing up on iOS. Is it missing some extensions?
  - roombarampage 10y ago
    mobile was working earlier... not sure what is going on. looking into it now. works on desktop though >_<
    - trollied 10y ago
      Works fine on iOS 10/Safari
    - roombarampage 10y ago
      I got mobile fixed on my ios devices. I don't really have the tools for testing android at home. anyone want to confirm for me?
      - gelatocar 10y ago
        No luck on android 5.1.0 with Chrome 47.0.2526.83 for me, just a black screen. No errors in the console either. Sorry I can't give you a more helpful description. edit: that's for the submitted link, http://jonathan-potter.github.io/Mandelbrot/ http://jonathan-potter.github.io/Mandelbrot/ works fine.
        pjmlp 10y ago
        Also works fine on Android 4.3 with the latest Chrome version.
- fdim 10y ago
  Blank screen on Android as well
- andrelaszlo 10y ago
  That's funny. I spent the weekend making a Mandelbrot set renderer using the same tutorial: https://github.com/andrelaszlo/webgl/ https://github.com/andrelaszlo/webgl/ It needs a little refactoring, and probably only works in Chrome.
  - roombarampage 10y ago
    very cool :) that tutorial was very helpful
jacobolus 10y ago
There are a lot of noisy visual artifacts over time. Seems like just one sample per pixel? You also may want to look at https://linas.org/art-gallery/escape/smooth.html https://linas.org/art-gallery/escape/smooth.html
personjerry 10y ago
If you zoom in, then the oscillations get amplified and it because rather difficult to see anything.
grenoire 10y ago
You should add a stop button for the animation, and also fix the back button. Using URL fragments for this is ridiculous.
- roombarampage 10y ago
  I like the stop button idea, but there are some considerations that I need to work through before I can add it in. the intention behind using the url hash for application state is to allow sections to be debugged and sent as links. that said, I may rip it out in place of a smooth zoom when I get time.
  - andrewaylett 10y ago
    You could adjust the URL hash without pushing the change onto the history stack -- that gets you the best of both worlds.
    - jordanwallwork 10y ago
      Looks like this has been implemented now, but I can't find any way to zoom back out!
  - coldcode 10y ago
    Looking at it moving for more than 3 seconds made me quite nauseous if I zoomed in.
cies 10y ago
I like fractal renderers, I made one in Haskell[1] once. In only 41 lines of code (23 if you strip white lines and type sigs). It also makes a post of its output combined with the code[3]; warning 18MB PDF (sorry Github). [1] https://github.com/cies/haskell-fractal https://github.com/cies/haskell-fractal [2] https://github.com/cies/haskell-fractal/blob/master/fractal.hs https://github.com/cies/haskell-fractal/blob/master/fractal.... [3] https://github.com/cies/haskell-fractal/blob/master/poster.pdf https://github.com/cies/haskell-fractal/blob/master/poster.p...
- phkahler 10y ago
  I made one in one line of python: for a in range(900):print"\n.x"[(a%30>0)+(abs(reduce(lambda z,c:zz+c,[a%30.1-2+1j(a/30.1-1.5)]*30))<2)], For a code golf on stackoverflow
  - tgb 10y ago
    I like this a lot! Well done. Some * symbols for eaten by HN though, you can put spaces around them.
deepnet 10y ago
Complex numbers offer an orthogonal dimension to the integer number line , where multiplication aquires a rotational element. This allows intermediate 90° (π/2) multiplication and Julia's Set is shown to be a map to Madelbrot's Fractal. https://acko.net/blog/how-to-fold-a-julia-fractal/ https://acko.net/blog/how-to-fold-a-julia-fractal/ Also the fourier transform is much more obvious in the imaginary plane. https://acko.net/tv/toolsforthought/ https://acko.net/tv/toolsforthought/
- deepnet 10y ago
  That the Julia set and the Mandelbrot set are covariant maps on the 2D complex plane hints at the higher dimensional shape that surface Z^x + c = 0 describes.
__jack__ 10y ago
version 8467

70 points by roombarampage 10y ago

This project was built using code I wrote previously for this pure javascript fractal renderer: http://jonathan-potter.github.io/Mandelbrot/ http://jonathan-potter.github.io/Mandelbrot/ Jamie Wong's post on hacker news earlier this week was a massive help in allowing me to switch to using WebGL for the rendering portion. His post can be found here: http://jamie-wong.com/2016/07/06/metaballs-and-webgl/ http://jamie-wong.com/2016/07/06/metaballs-and-webgl/

robin_reala 10y ago
Nothing showing up on iOS. Is it missing some extensions?
- roombarampage 10y ago
  mobile was working earlier... not sure what is going on. looking into it now. works on desktop though >_<
  - trollied 10y ago
    Works fine on iOS 10/Safari
  - roombarampage 10y ago
    I got mobile fixed on my ios devices. I don't really have the tools for testing android at home. anyone want to confirm for me?
    - gelatocar 10y ago
      No luck on android 5.1.0 with Chrome 47.0.2526.83 for me, just a black screen. No errors in the console either. Sorry I can't give you a more helpful description. edit: that's for the submitted link, http://jonathan-potter.github.io/Mandelbrot/ http://jonathan-potter.github.io/Mandelbrot/ works fine.
      - pjmlp 10y ago
        Also works fine on Android 4.3 with the latest Chrome version.
fdim 10y ago
Blank screen on Android as well
andrelaszlo 10y ago
That's funny. I spent the weekend making a Mandelbrot set renderer using the same tutorial: https://github.com/andrelaszlo/webgl/ https://github.com/andrelaszlo/webgl/ It needs a little refactoring, and probably only works in Chrome.
- roombarampage 10y ago
  very cool :) that tutorial was very helpful

jacobolus 10y ago

There are a lot of noisy visual artifacts over time. Seems like just one sample per pixel? You also may want to look at https://linas.org/art-gallery/escape/smooth.html https://linas.org/art-gallery/escape/smooth.html

personjerry 10y ago

If you zoom in, then the oscillations get amplified and it because rather difficult to see anything.

grenoire 10y ago

You should add a stop button for the animation, and also fix the back button. Using URL fragments for this is ridiculous.

roombarampage 10y ago
I like the stop button idea, but there are some considerations that I need to work through before I can add it in. the intention behind using the url hash for application state is to allow sections to be debugged and sent as links. that said, I may rip it out in place of a smooth zoom when I get time.
- andrewaylett 10y ago
  You could adjust the URL hash without pushing the change onto the history stack -- that gets you the best of both worlds.
  - jordanwallwork 10y ago
    Looks like this has been implemented now, but I can't find any way to zoom back out!
- coldcode 10y ago
  Looking at it moving for more than 3 seconds made me quite nauseous if I zoomed in.

cies 10y ago

I like fractal renderers, I made one in Haskell[1] once. In only 41 lines of code (23 if you strip white lines and type sigs). It also makes a post of its output combined with the code[3]; warning 18MB PDF (sorry Github). [1] https://github.com/cies/haskell-fractal https://github.com/cies/haskell-fractal [2] https://github.com/cies/haskell-fractal/blob/master/fractal.hs https://github.com/cies/haskell-fractal/blob/master/fractal.... [3] https://github.com/cies/haskell-fractal/blob/master/poster.pdf https://github.com/cies/haskell-fractal/blob/master/poster.p...

phkahler 10y ago
I made one in one line of python: for a in range(900):print"\n.x"[(a%30>0)+(abs(reduce(lambda z,c:zz+c,[a%30.1-2+1j(a/30.1-1.5)]*30))<2)], For a code golf on stackoverflow
- tgb 10y ago
  I like this a lot! Well done. Some * symbols for eaten by HN though, you can put spaces around them.

deepnet 10y ago

Complex numbers offer an orthogonal dimension to the integer number line , where multiplication aquires a rotational element. This allows intermediate 90° (π/2) multiplication and Julia's Set is shown to be a map to Madelbrot's Fractal. https://acko.net/blog/how-to-fold-a-julia-fractal/ https://acko.net/blog/how-to-fold-a-julia-fractal/ Also the fourier transform is much more obvious in the imaginary plane. https://acko.net/tv/toolsforthought/ https://acko.net/tv/toolsforthought/

deepnet 10y ago
That the Julia set and the Mandelbrot set are covariant maps on the 2D complex plane hints at the higher dimensional shape that surface Z^x + c = 0 describes.

__jack__ 10y ago

version 8467