6 ms·

XaoS.js - a real-time fractal zoomer

40 points by m_for_monkey 15y ago

jayferd 15y ago
awesome. Does get blurry after a while though :(
- eridius 15y ago
  Yeah, I managed to hit the limit where it stopped being fractal. Damn these limited-precision floating point numbers!
  - m_for_monkey 15y ago
    No, it's because the maximum number of iterations is too low for that zoom level.
    - nkoren 15y ago
      That won't cause it to be "blurry" -- that just causes it to be black. "Blurriness" is indeed due to floating-point errors in the coordinates system.
      - m_for_monkey 15y ago
        For me, in the browser, the edges just smooth out to a straight line, and seem blurry only because of the color scheme. In the desktop version, however, I see this when zoomed in maximally: http://i.imgur.com/ryhai.png http://i.imgur.com/ryhai.png.
        eridius 15y ago
        Ah, fair enough. It's probably the iterations then.
        deleted 15y ago
        [deleted]
        artursapek 15y ago
        This is what I maxed out at. It did start to look blurry right before it started lagging, and these staggered lines were revealed, but they look much different from yours. http://i.imgur.com/R5PbQ.jpg http://i.imgur.com/R5PbQ.jpg
- dustywusty 15y ago
  After a while? Seems like it does it fairly quickly in both directions. Neat concept, though.
djtriptych 15y ago
...i'm not sure these guys understand the difference between "fractal" and "not a fractal"
- nkoren 15y ago
  Er... did you mean to leave this comment on some other article? I've seen the term "fractal" misused recently, but this is very much a fractal.
  - djtriptych 15y ago
    OK I concede it meets a definition of fractal. I'm recalling having seen Mandelbrot speak at my high school and identify a property of his eponymous set in particular: that no matter how closely you zoom, no part of it ever appears to be a straight line, unlike, for instance, a circle. I just feel cheated. But sure, it's a fractal capped at a disappointingly low number of iterations. Kinda like how an equilateral triangle is a sierpinski's gasket at zero iterations.
    - m_for_monkey 15y ago
      Try the desktop version, this is a very limited alpha. But no, not even the desktop version offers unlimited precision. http://wmi.math.u-szeged.hu/xaos/doku.php http://wmi.math.u-szeged.hu/xaos/doku.php
pronoiac 15y ago
Would using WebGL could give smoother animation or use less CPU?
- thristian 15y ago
  Probably not. The XaoS algorithm depends on nearest-neighbour scaling and recalculating just the interpolated rows/columns. You could do that in a texture then scale the texture to the screen with WebGL, but it probably wouldn't be any more efficient than just doing it in a non-accellerated frame-buffer. If there was a way to offload the Mandelbrot calculations to the GPU, that might make things faster, depending on how tedious it would be to composite them back onto the framebuffer afterward. Here's a Mandelbrot zoomer implemented entirely with WebGL: http://learningwebgl.com/lessons/example01/ http://learningwebgl.com/lessons/example01/ It doesn't use the XaoS algorithm, it recalculates the entire frame from scratch on the GPU. On my machine at least, it's noticeably choppier than the XaoS version, and at a smaller frame-size, too.
ninjo 15y ago
Listen to this while zooming: http://www.youtube.com/watch?v=MWqdO74iApc http://www.youtube.com/watch?v=MWqdO74iApc
program 15y ago
I've seen tons of different Mandelbrot implementations in Javascript and Processing.js (it's a pretty popular example of the ImageData object) and I can say that this particular one is indeed fast considering that is using 128 iterations on a relatively big canvas.

40 points by m_for_monkey 15y ago

jayferd 15y ago

awesome. Does get blurry after a while though :(

eridius 15y ago
Yeah, I managed to hit the limit where it stopped being fractal. Damn these limited-precision floating point numbers!
- m_for_monkey 15y ago
  No, it's because the maximum number of iterations is too low for that zoom level.
  - nkoren 15y ago
    That won't cause it to be "blurry" -- that just causes it to be black. "Blurriness" is indeed due to floating-point errors in the coordinates system.
    - m_for_monkey 15y ago
      For me, in the browser, the edges just smooth out to a straight line, and seem blurry only because of the color scheme. In the desktop version, however, I see this when zoomed in maximally: http://i.imgur.com/ryhai.png http://i.imgur.com/ryhai.png.
      - eridius 15y ago
        Ah, fair enough. It's probably the iterations then.
      - deleted 15y ago
        [deleted]
      - artursapek 15y ago
        This is what I maxed out at. It did start to look blurry right before it started lagging, and these staggered lines were revealed, but they look much different from yours. http://i.imgur.com/R5PbQ.jpg http://i.imgur.com/R5PbQ.jpg
dustywusty 15y ago
After a while? Seems like it does it fairly quickly in both directions. Neat concept, though.

djtriptych 15y ago

...i'm not sure these guys understand the difference between "fractal" and "not a fractal"

nkoren 15y ago
Er... did you mean to leave this comment on some other article? I've seen the term "fractal" misused recently, but this is very much a fractal.
- djtriptych 15y ago
  OK I concede it meets a definition of fractal. I'm recalling having seen Mandelbrot speak at my high school and identify a property of his eponymous set in particular: that no matter how closely you zoom, no part of it ever appears to be a straight line, unlike, for instance, a circle. I just feel cheated. But sure, it's a fractal capped at a disappointingly low number of iterations. Kinda like how an equilateral triangle is a sierpinski's gasket at zero iterations.
  - m_for_monkey 15y ago
    Try the desktop version, this is a very limited alpha. But no, not even the desktop version offers unlimited precision. http://wmi.math.u-szeged.hu/xaos/doku.php http://wmi.math.u-szeged.hu/xaos/doku.php

pronoiac 15y ago

Would using WebGL could give smoother animation or use less CPU?

thristian 15y ago
Probably not. The XaoS algorithm depends on nearest-neighbour scaling and recalculating just the interpolated rows/columns. You could do that in a texture then scale the texture to the screen with WebGL, but it probably wouldn't be any more efficient than just doing it in a non-accellerated frame-buffer. If there was a way to offload the Mandelbrot calculations to the GPU, that might make things faster, depending on how tedious it would be to composite them back onto the framebuffer afterward. Here's a Mandelbrot zoomer implemented entirely with WebGL: http://learningwebgl.com/lessons/example01/ http://learningwebgl.com/lessons/example01/ It doesn't use the XaoS algorithm, it recalculates the entire frame from scratch on the GPU. On my machine at least, it's noticeably choppier than the XaoS version, and at a smaller frame-size, too.

ninjo 15y ago

Listen to this while zooming: http://www.youtube.com/watch?v=MWqdO74iApc http://www.youtube.com/watch?v=MWqdO74iApc

program 15y ago

I've seen tons of different Mandelbrot implementations in Javascript and Processing.js (it's a pretty popular example of the ImageData object) and I can say that this particular one is indeed fast considering that is using 128 iterations on a relatively big canvas.