5 ms·

The Mandelbrot set in JavaScript

62 points by andradejr 10y ago

cwmma 10y ago
a fractal is much more fun when you can zoom http://calvinmetcalf.github.io/leaflet-fractal/#255/-0.37/0.6/mandlebrot/2/-17.5/-86.1 http://calvinmetcalf.github.io/leaflet-fractal/#255/-0.37/0.... course that's MUCH more then 25 lines
- swietlik 10y ago
  Good point! I was able to add the zoom capability without TOO much code: http://slicker.me/fractals/zoom.htm http://slicker.me/fractals/zoom.htm
oneeyedpigeon 10y ago
First code example is missing a closing brace on the innermost for loop.
- swietlik 10y ago
  I corrected it now. Thanks for the good catch!
xem 10y ago
Related: an interactive (zoomable) HTML/JS mandelbrot with detailed (but not long) source code + a super tiny (200 bytes) Mandelbrot tracer: https://github.com/xem/miniMandelbrot https://github.com/xem/miniMandelbrot Also related: ASCII Mandelbrot (111b): http://www.p01.org/128b_mandelbrot/ http://www.p01.org/128b_mandelbrot/
- swietlik 10y ago
  Wow, I'm impressed! This takes coding to a whole new level...
ewalk153 10y ago
What does this title mean? Why 51? Looks like a simple Mandelbrot set in Javascript.
hanoz 10y ago
Where are the other 50?
- dang 10y ago
  We changed the title from "51 Fractals – tutorial (only 25 lines of code)".
csl 10y ago
The next step is smooth coloring. I've written a post explaining it here: https://csl.name/post/mandelbrot-rendering/ https://csl.name/post/mandelbrot-rendering/ The js code can be tested on https://csl.name/mandelbrot https://csl.name/mandelbrot
- hanoz 10y ago
  Did you forget renew a domain name? The demo link in your post's opening paragraph is now leading to some kind of Japanese Bra company.
  - csl 10y ago
    Haha, thanks for spotting that! It should lead to the link in the above comment of course.
staplung 10y ago
Also related...Newton's method fractal: http://deathray.us/newton/ http://deathray.us/newton/ The JS source is longer.
greydius 10y ago
Nice writeup. I did a mandelbrot viewer in javascript like 5 years ago. In fact, it was the only thing I ever wrote in Javascript besides dom manipulation crap. I wanted to try the canvas tag when it was first introduced, and this was the first project that came to mind. My version had color and let you click on the image to zoom. After about 20 clicks, it would run out of precision and the pixels would turn into larger and larger blocks. It was also slow as dirt back then. I'd bet it would probably run pretty good nowadays.
foobarrio 10y ago
Such a small code snippet! I wrote coloring using the triangle inequality in JS a couple years ago for someone on reddit: http://codepen.io/anon/pen/Ircav http://codepen.io/anon/pen/Ircav Amazing that we can write these things up so quickly in a browser.
potterrawr 10y ago
Here is another one. click to zoom. modify hash for antialiasing and higher iteration count. http://jonathan-potter.github.io/Mandelbrot/ http://jonathan-potter.github.io/Mandelbrot/

62 points by andradejr 10y ago

cwmma 10y ago

a fractal is much more fun when you can zoom http://calvinmetcalf.github.io/leaflet-fractal/#255/-0.37/0.6/mandlebrot/2/-17.5/-86.1 http://calvinmetcalf.github.io/leaflet-fractal/#255/-0.37/0.... course that's MUCH more then 25 lines

swietlik 10y ago
Good point! I was able to add the zoom capability without TOO much code: http://slicker.me/fractals/zoom.htm http://slicker.me/fractals/zoom.htm

oneeyedpigeon 10y ago

First code example is missing a closing brace on the innermost for loop.

swietlik 10y ago
I corrected it now. Thanks for the good catch!

xem 10y ago

Related: an interactive (zoomable) HTML/JS mandelbrot with detailed (but not long) source code + a super tiny (200 bytes) Mandelbrot tracer: https://github.com/xem/miniMandelbrot https://github.com/xem/miniMandelbrot Also related: ASCII Mandelbrot (111b): http://www.p01.org/128b_mandelbrot/ http://www.p01.org/128b_mandelbrot/

swietlik 10y ago
Wow, I'm impressed! This takes coding to a whole new level...

ewalk153 10y ago

What does this title mean? Why 51? Looks like a simple Mandelbrot set in Javascript.

hanoz 10y ago

Where are the other 50?

dang 10y ago
We changed the title from "51 Fractals – tutorial (only 25 lines of code)".

csl 10y ago

The next step is smooth coloring. I've written a post explaining it here: https://csl.name/post/mandelbrot-rendering/ https://csl.name/post/mandelbrot-rendering/ The js code can be tested on https://csl.name/mandelbrot https://csl.name/mandelbrot

hanoz 10y ago
Did you forget renew a domain name? The demo link in your post's opening paragraph is now leading to some kind of Japanese Bra company.
- csl 10y ago
  Haha, thanks for spotting that! It should lead to the link in the above comment of course.

staplung 10y ago

Also related...Newton's method fractal: http://deathray.us/newton/ http://deathray.us/newton/ The JS source is longer.

greydius 10y ago

Nice writeup. I did a mandelbrot viewer in javascript like 5 years ago. In fact, it was the only thing I ever wrote in Javascript besides dom manipulation crap. I wanted to try the canvas tag when it was first introduced, and this was the first project that came to mind. My version had color and let you click on the image to zoom. After about 20 clicks, it would run out of precision and the pixels would turn into larger and larger blocks. It was also slow as dirt back then. I'd bet it would probably run pretty good nowadays.

foobarrio 10y ago

Such a small code snippet! I wrote coloring using the triangle inequality in JS a couple years ago for someone on reddit: http://codepen.io/anon/pen/Ircav http://codepen.io/anon/pen/Ircav Amazing that we can write these things up so quickly in a browser.

potterrawr 10y ago

Here is another one. click to zoom. modify hash for antialiasing and higher iteration count. http://jonathan-potter.github.io/Mandelbrot/ http://jonathan-potter.github.io/Mandelbrot/