7 ms·

How to Fold a Julia Fractal

325 points by drudru11 14y ago

archivator 14y ago
The actual graphics flash and disappear on my Linux Chrome 23 machine. The header 3D shift works fine though.
- DuskStar 14y ago
  For me, it fails in both Chrome Canary (26.0.1378.2) and Firefox says I do not have a compatible graphics card. (Possibly just hates my Optimus setup) And, of course, IE9 lacks webGl in the first place, so it doesn't even get to the point of causing a process hang like Canary did. All Windows 7. Once I did find a browser that worked with the site, though- that's the best explanation of both fractals and complex numbers I've ever seen!
- Cogito 14y ago
  I had to start chrome with primus [0] to get the visualisations working for me. I'm running Debian Testing. primusrun google-chrome --ignore-gpu-blacklist [0] https://github.com/amonakov/primus https://github.com/amonakov/primus
- ekimekim 14y ago
  Works fine in Chromium 23.0.1271.97 on my Arch machine.
metafunctor 14y ago
If anyone is wondering how the visualizations were made, he has another article about that here: http://acko.net/blog/making-mathbox/ http://acko.net/blog/making-mathbox/
daeken 14y ago
Wow. I "understood" complex numbers, in that I could use them in specific contexts in the past and got that they represented rotation, but this really drove it home in a way that I could've used a decade ago. Great article.
dizzystar 14y ago
Wow, simply incredible work. Stuff like this offers a glimpse into the future of what the web can be and how it can be used to pass knowledge on. I knew some of the concepts presented here, but I never knew what it all meant. Nice touch in adding the equations as well. Beautiful presentation.
altrego99 14y ago
The square root animation, slide 29-30, is incorrect. It should not tear at -i, it should tear at the direction of 1 instead. Other than that everything else looks fine. Amazing work.
- unconed 14y ago
  By that point, the grid has been rotated 90 degrees, with the real axis on top. This is mentioned in the notes. I did this because it fits the letterbox layout more in the later transitions. Edit: I changed it so this is made obvious.
0x0 14y ago
This is the best use of 3d/svg(?)/html5 I've seen. Incredibly effective and really beautiful. Certainly did make my macbook air fan spin up like in the old days of flash though ;)
- mars 14y ago
  this is webgl (at least the mathematical visualizations)
  - sp332 14y ago
    For some reason the Mandelbrot fractal (slides 30 and 31 in the second part) didn't render in Firefox but they worked in Chrome. Everything else seemed to work fine.
    - eric-hu 14y ago
      Thanks for pointing that out! I just accepted the black panes in stride because the caption said "...this is not so easy to visualize" I also noticed that the text of the page was angled away on page load in Chrome, but not in FF
    - unconed 14y ago
      Oddly enough, it works fine if you open the iframe in a new tab. I think it may just be Firefox denying my admittedly greedy requests for video memory.
the1 14y ago
every time i visit webgl page, Xorg goes craz: (EE) [mi] EQ overflowing. Additional events will be discarded until existing ev ents are processed.
- stuaxo 14y ago
  It may be worth working out what gfx driver you're using + posting a bug in the relevant place.
monochromatic 14y ago
Based on the comments, this sounds like a great article that I'll have to check out later... for the moment, however, all it does is crash Safari on my ipad.
- drudru11 14y ago
  Yes, I suspect the mobile devices will not have the ability to display this content. However, if you enable WebGL on Safari via the Developer menu, the page will render really well on a Mac.
sp4rki 14y ago
I'm impressed with the explanations and everything... but what really got my panties in a bunch is the visualization technology. That is one of the prime examples I've seen of actually leveraging current web tech to communicate actual content instead of just doing fancy stuff just because. I was initially annoyed by the 3D header movement effect, but the content, graphs, and animations of the actual content made me completely forget that and allowed me to be bewildered by what we can do this day and age on the web. Congrats to the maker!
- unconed 14y ago
  Consider the fancy header to be the first answer to: what happens when you put a 3D engine inside a webpage. This article is what happens 12 months later...
  - sp4rki 14y ago
    Hah I can relate to that! I will clarify something though, the effect is really cool and I actually like it. What annoyed me is that I had initially opened it and moved it to another pane (dwm here) and then when I moved it the main panel I was using a smaller window than usual and when I scrolled I couldn't hit any links, animation looked weird, and then I couldn't scroll past the header. I browsed it again in a floating window in a different tab (or space if you wanna call it that way) where I keep a maximized chromium and I was no longer annoyed :) Good job on being on the cutting edge though, that is something I completely can appreciate.
    - unconed 14y ago
      Sigh, every time my site hits hacker news or reddit I have to mention this... it's a Webkit bug. I reported it 5 releases ago, it sits unloved and unfixed. I imagine i'll just redo the site before they address it.
      - sp4rki 14y ago
        Ohh that makes sense, I also wondered if it was Chromium in Linux thing so I opened it up in Chrome in my work iMac and I noticed the same thing, albeit less pronounced. It's very pretty when it does work so that kinda balances it out. In any case your content is worth it, thanks again for the awesome sauce.
jheriko 14y ago
good stuff. :)
paulgb 14y ago
> If there's interest, a future post could cover topics like: the nature of e^ix, [...] I'm sure I'm not the only one who would be very interested. Great work!
- xerula 14y ago
  I really enjoyed this too. Would love to see quaternions presented with a similar treatment.
- TheSisb2 14y ago
  I'd love to see more of this. Very impressive work.
- i2pi 14y ago
  Here's my humble attempt: http://blog.i2pi.com/index.cgi?p=182 http://blog.i2pi.com/index.cgi?p=182
tim_hutton 14y ago
Related: visualizing how the Mandelbrot maps onto itself: http://code.google.com/p/mandelstir/ http://code.google.com/p/mandelstir/
vincentperes 14y ago
wow! I heard many times that great mathematician can picture theories in their mind... and that for some theories only few people on earth are able to picture them. I always wondered if that's true and for people using math on daily basis (mathematician or others) it's very important to picture what you are trying to achieve or only numbers matter? Thanks!
- JonnieCache 14y ago
  It's more the case that the numbers and the mental picture are the same thing. When I manage that kind of insight (rarely) that's what it's like anyway.
jcdavison 14y ago
Really nice post, design and approach!
deleted 14y ago
[deleted]
mturmon 14y ago
Beautiful work. This is a great marriage of medium and subject matter. I particularly liked some of the the interpretations of the wave equation, which were new to me.
iharris 14y ago
I would absolutely love to see more visualizations like this in e-textbooks. I think it would assist with the readers' understanding, particularly in secondary school math or physics where students may have difficulty grasping new concepts in geometry, algebra, and the like. As a math tutor, having something to show my students really helps things. Well done!
IheartApplesDix 14y ago
Awful website. Completely unnecessary design over substance, I couldn't even change the URL to get away, I had to close the tab.
- dasil003 14y ago
  I was reading interestedly until my laptop fan got so loud I couldn't concentrate anymore and had to shut it down. The room is now a degree or two warmer.
  - IheartApplesDix 14y ago
    I got down voted to hell for saying this. what the fuck is wrong with this community? I was looking at the website in Chrome with a powerful desktop, and it was shit. 0 to circlejerk in record time.
studio816 14y ago
A hit of DMT will show you the world of complex numbers/geometric patterns/higher dimensions that you can't even imagine in this 3D world.
mattmoss 14y ago
This page was educational and interesting until it locked up my computer with the CPU pegged full. Force power off/on "fixed" the problem.
lexy0202 14y ago
Once you get over the 3D header this article is amazing.. the visualisations are incredible.
iamjochem 14y ago
I am overwhelmed and feeling somewhat inadequate, such is often the case when reading material posted on HN (I can't be the only one!). truly a beautiful 'story', fantastic execution. bravo!
crazygringo 14y ago
I am blown away by this intuitive explanation of why Julia sets look the way they do. I was obsessed with the Mandelbrot and Julia sets waaaay back in high school, with writing programs to produce them in real time, back on my 386. But I never had the slightest understanding of why they looked the way they do. So to discover that now, almost 20 years later, is just amazing.
- randlet 14y ago
  I could have easily written this comment! My favourite programming memory of all time was finally succeeding in turning the pseudo-code at the back of a book[1] that my mom had bought me into a Turbo Pascal program that would generate a Mandlebrot set. It was exhilarating! [1] http://www.amazon.ca/gp/product/0671742175/tag=canaamp-20 http://www.amazon.ca/gp/product/0671742175/tag=canaamp-20
  - yesbabyyes 14y ago
    Me too - among my first, and best, programming experiences was turning pseudo-code into QBASIC and marvel at the fractals and strange attractors growing on the screen.
    - crazysaem 14y ago
      I did so as well. I was fascinated that such a simple formula could produce an infinitely complex image. To build it, I used Lazarus/Freepascal and Wikipedia. It’s actually still hosted on Google code.
- mbreckon 14y ago
  Me too - I wrote a Mandlebrot generator on the Amstrad CPC 6128 (3.7MHz Z80 based computer with 128kb RAM) after reading a copy of "Chaos" by James Gleick that I found in the school library. It took 3-4 hours to generate a 16 colour image of 160x120 (Mode 0?) and used some undocumented calls into the BASIC interpreter ROM for the floating point calculations. I'm sure I could have made it faster but I was producing it as a static image for a demo (demo scene).
fallous 14y ago
I can only imagine this kind of excellent visualization combined with this book: http://www.amazon.com/Mathematics-Birth-Numbers-Jan-Gullberg/dp/039304002X/ http://www.amazon.com/Mathematics-Birth-Numbers-Jan-Gullberg... I'm pretty sure the result would be the utter destruction of my productivity for a few years.
Crake 14y ago
I loved this so much. The visualizations were beautiful, and I'm appreciative of the effort that must have gone into such clear illustrations. The only thing I would suggest would be to make the slide progression arrows somewhat more eye-catching--I almost missed their presence entirely when I was quickly scrolling down the page trying to parse whether or not I was going to read the whole thing. As a result, I almost missed out on the defining part of the experience.

325 points by drudru11 14y ago

archivator 14y ago

The actual graphics flash and disappear on my Linux Chrome 23 machine. The header 3D shift works fine though.

DuskStar 14y ago
For me, it fails in both Chrome Canary (26.0.1378.2) and Firefox says I do not have a compatible graphics card. (Possibly just hates my Optimus setup) And, of course, IE9 lacks webGl in the first place, so it doesn't even get to the point of causing a process hang like Canary did. All Windows 7. Once I did find a browser that worked with the site, though- that's the best explanation of both fractals and complex numbers I've ever seen!
Cogito 14y ago
I had to start chrome with primus [0] to get the visualisations working for me. I'm running Debian Testing. primusrun google-chrome --ignore-gpu-blacklist [0] https://github.com/amonakov/primus https://github.com/amonakov/primus
ekimekim 14y ago
Works fine in Chromium 23.0.1271.97 on my Arch machine.

metafunctor 14y ago

If anyone is wondering how the visualizations were made, he has another article about that here: http://acko.net/blog/making-mathbox/ http://acko.net/blog/making-mathbox/

daeken 14y ago

Wow. I "understood" complex numbers, in that I could use them in specific contexts in the past and got that they represented rotation, but this really drove it home in a way that I could've used a decade ago. Great article.

dizzystar 14y ago

Wow, simply incredible work. Stuff like this offers a glimpse into the future of what the web can be and how it can be used to pass knowledge on. I knew some of the concepts presented here, but I never knew what it all meant. Nice touch in adding the equations as well. Beautiful presentation.

altrego99 14y ago

The square root animation, slide 29-30, is incorrect. It should not tear at -i, it should tear at the direction of 1 instead. Other than that everything else looks fine. Amazing work.

unconed 14y ago
By that point, the grid has been rotated 90 degrees, with the real axis on top. This is mentioned in the notes. I did this because it fits the letterbox layout more in the later transitions. Edit: I changed it so this is made obvious.

0x0 14y ago

This is the best use of 3d/svg(?)/html5 I've seen. Incredibly effective and really beautiful. Certainly did make my macbook air fan spin up like in the old days of flash though ;)

mars 14y ago
this is webgl (at least the mathematical visualizations)
- sp332 14y ago
  For some reason the Mandelbrot fractal (slides 30 and 31 in the second part) didn't render in Firefox but they worked in Chrome. Everything else seemed to work fine.
  - eric-hu 14y ago
    Thanks for pointing that out! I just accepted the black panes in stride because the caption said "...this is not so easy to visualize" I also noticed that the text of the page was angled away on page load in Chrome, but not in FF
  - unconed 14y ago
    Oddly enough, it works fine if you open the iframe in a new tab. I think it may just be Firefox denying my admittedly greedy requests for video memory.

the1 14y ago

every time i visit webgl page, Xorg goes craz: (EE) [mi] EQ overflowing. Additional events will be discarded until existing ev ents are processed.

stuaxo 14y ago
It may be worth working out what gfx driver you're using + posting a bug in the relevant place.

monochromatic 14y ago

Based on the comments, this sounds like a great article that I'll have to check out later... for the moment, however, all it does is crash Safari on my ipad.

drudru11 14y ago
Yes, I suspect the mobile devices will not have the ability to display this content. However, if you enable WebGL on Safari via the Developer menu, the page will render really well on a Mac.

sp4rki 14y ago

I'm impressed with the explanations and everything... but what really got my panties in a bunch is the visualization technology. That is one of the prime examples I've seen of actually leveraging current web tech to communicate actual content instead of just doing fancy stuff just because. I was initially annoyed by the 3D header movement effect, but the content, graphs, and animations of the actual content made me completely forget that and allowed me to be bewildered by what we can do this day and age on the web. Congrats to the maker!

unconed 14y ago
Consider the fancy header to be the first answer to: what happens when you put a 3D engine inside a webpage. This article is what happens 12 months later...
- sp4rki 14y ago
  Hah I can relate to that! I will clarify something though, the effect is really cool and I actually like it. What annoyed me is that I had initially opened it and moved it to another pane (dwm here) and then when I moved it the main panel I was using a smaller window than usual and when I scrolled I couldn't hit any links, animation looked weird, and then I couldn't scroll past the header. I browsed it again in a floating window in a different tab (or space if you wanna call it that way) where I keep a maximized chromium and I was no longer annoyed :) Good job on being on the cutting edge though, that is something I completely can appreciate.
  - unconed 14y ago
    Sigh, every time my site hits hacker news or reddit I have to mention this... it's a Webkit bug. I reported it 5 releases ago, it sits unloved and unfixed. I imagine i'll just redo the site before they address it.
    - sp4rki 14y ago
      Ohh that makes sense, I also wondered if it was Chromium in Linux thing so I opened it up in Chrome in my work iMac and I noticed the same thing, albeit less pronounced. It's very pretty when it does work so that kinda balances it out. In any case your content is worth it, thanks again for the awesome sauce.

jheriko 14y ago

good stuff. :)

paulgb 14y ago

> If there's interest, a future post could cover topics like: the nature of e^ix, [...] I'm sure I'm not the only one who would be very interested. Great work!

xerula 14y ago
I really enjoyed this too. Would love to see quaternions presented with a similar treatment.
TheSisb2 14y ago
I'd love to see more of this. Very impressive work.
i2pi 14y ago
Here's my humble attempt: http://blog.i2pi.com/index.cgi?p=182 http://blog.i2pi.com/index.cgi?p=182

tim_hutton 14y ago

Related: visualizing how the Mandelbrot maps onto itself: http://code.google.com/p/mandelstir/ http://code.google.com/p/mandelstir/

vincentperes 14y ago

wow! I heard many times that great mathematician can picture theories in their mind... and that for some theories only few people on earth are able to picture them. I always wondered if that's true and for people using math on daily basis (mathematician or others) it's very important to picture what you are trying to achieve or only numbers matter? Thanks!

JonnieCache 14y ago
It's more the case that the numbers and the mental picture are the same thing. When I manage that kind of insight (rarely) that's what it's like anyway.

jcdavison 14y ago

Really nice post, design and approach!

deleted 14y ago

[deleted]

mturmon 14y ago

Beautiful work. This is a great marriage of medium and subject matter. I particularly liked some of the the interpretations of the wave equation, which were new to me.

iharris 14y ago

I would absolutely love to see more visualizations like this in e-textbooks. I think it would assist with the readers' understanding, particularly in secondary school math or physics where students may have difficulty grasping new concepts in geometry, algebra, and the like. As a math tutor, having something to show my students really helps things. Well done!

IheartApplesDix 14y ago

Awful website. Completely unnecessary design over substance, I couldn't even change the URL to get away, I had to close the tab.

dasil003 14y ago
I was reading interestedly until my laptop fan got so loud I couldn't concentrate anymore and had to shut it down. The room is now a degree or two warmer.
- IheartApplesDix 14y ago
  I got down voted to hell for saying this. what the fuck is wrong with this community? I was looking at the website in Chrome with a powerful desktop, and it was shit. 0 to circlejerk in record time.

studio816 14y ago

A hit of DMT will show you the world of complex numbers/geometric patterns/higher dimensions that you can't even imagine in this 3D world.

mattmoss 14y ago

This page was educational and interesting until it locked up my computer with the CPU pegged full. Force power off/on "fixed" the problem.

lexy0202 14y ago

Once you get over the 3D header this article is amazing.. the visualisations are incredible.

iamjochem 14y ago

I am overwhelmed and feeling somewhat inadequate, such is often the case when reading material posted on HN (I can't be the only one!). truly a beautiful 'story', fantastic execution. bravo!

crazygringo 14y ago

I am blown away by this intuitive explanation of why Julia sets look the way they do. I was obsessed with the Mandelbrot and Julia sets waaaay back in high school, with writing programs to produce them in real time, back on my 386. But I never had the slightest understanding of why they looked the way they do. So to discover that now, almost 20 years later, is just amazing.

randlet 14y ago
I could have easily written this comment! My favourite programming memory of all time was finally succeeding in turning the pseudo-code at the back of a book[1] that my mom had bought me into a Turbo Pascal program that would generate a Mandlebrot set. It was exhilarating! [1] http://www.amazon.ca/gp/product/0671742175/tag=canaamp-20 http://www.amazon.ca/gp/product/0671742175/tag=canaamp-20
- yesbabyyes 14y ago
  Me too - among my first, and best, programming experiences was turning pseudo-code into QBASIC and marvel at the fractals and strange attractors growing on the screen.
  - crazysaem 14y ago
    I did so as well. I was fascinated that such a simple formula could produce an infinitely complex image. To build it, I used Lazarus/Freepascal and Wikipedia. It’s actually still hosted on Google code.
mbreckon 14y ago
Me too - I wrote a Mandlebrot generator on the Amstrad CPC 6128 (3.7MHz Z80 based computer with 128kb RAM) after reading a copy of "Chaos" by James Gleick that I found in the school library. It took 3-4 hours to generate a 16 colour image of 160x120 (Mode 0?) and used some undocumented calls into the BASIC interpreter ROM for the floating point calculations. I'm sure I could have made it faster but I was producing it as a static image for a demo (demo scene).

fallous 14y ago

I can only imagine this kind of excellent visualization combined with this book: http://www.amazon.com/Mathematics-Birth-Numbers-Jan-Gullberg/dp/039304002X/ http://www.amazon.com/Mathematics-Birth-Numbers-Jan-Gullberg... I'm pretty sure the result would be the utter destruction of my productivity for a few years.

Crake 14y ago

I loved this so much. The visualizations were beautiful, and I'm appreciative of the effort that must have gone into such clear illustrations. The only thing I would suggest would be to make the slide progression arrows somewhat more eye-catching--I almost missed their presence entirely when I was quickly scrolling down the page trying to parse whether or not I was going to read the whole thing. As a result, I almost missed out on the defining part of the experience.