Welcome to Fractal Forums

Yesterday I decided to draw a Mandelbrot to learn javascipt / canvas, but I am running into some problems.

- My smoothing looks crappy. Is this because I am using RGB averaging or is it because the fractions are wrong or to simple?
- When I zoom in, the x and y steps between pixels run out of precision before I'm hitting the maximum iterations. Is there a way to scale up the formula and parameters, so I can continue zooming?
- The edges look really hectic. Any tips on that?
- If I am zoomed in and I know it will take a least 20 iterations for any pixel to escape is there a more compact formula to skip really iterating trough the first 20. (I know this is unlikely but had to ask :) )

http://pythonkings.nl/ai/mb/
(click to zoom, full screen is slow, render size is decided on page-load)

example
(http://pythonkings.nl/ai/mb/mandel.jpg)

you can get smoother smooth colouring by increasing the escape radius - i tend to use 512 instead of 2


You might be able to use double-double technique to increase precision, but that would only postpone the inevitable - alternatively find a js arbitrary-precision floating point library.

libqd here is for C++/Fortran-90 but you might translate the functions you need to javascript http://crd-legacy.lbl.gov/~dhbailey/mpdist/


super-sampling can make them look smoother, alternatively look into distance estimate rendering


with perturbation techniques something like this is achievable with series approximation - you iterate one reference point at high precision generating coefficients for a polynomial approximation to initialize all the pixels after some iterations - see superfractalthing (java), kalles fraktaler (written in C I think), mandelmachine (source not available?)

Thank you for your advice. The first was a quick fix and I will look into the rest. :)

So what is keeping me from getting the detail like the pictures on wikipedia?

(http://pythonkings.nl/ai/mb/detail.png)
compared to
(http://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/Mandel_zoom_03_seehorse.jpg/800px-Mandel_zoom_03_seehorse.jpg)

This doesnt seem to come from super-sampling, distance estimate, float precision or iteration count.

My function:
    var xx = 0.0;
    var yy = 0.0;
    var iter = 0;
    while (xx * xx + yy * yy <= 512.0 && iter < MAXIT) {
        var temp = xx * xx - yy * yy + x;
        yy = 2 * xx * yy + y;
        xx = temp;
        iter++;
    }
    
    if ( iter < MAXIT ) {
        zn = Math.sqrt(xx*xx + yy*yy );
        nu = Math.log( Math.log(zn) / Math.log(2) ) / Math.log(2);
        iter = iter + 1 - nu;
    }
    
    return iter;

If I slow the gradient with higher iterations I am getting more detail.
( it / sqrt(it)*3 )
But I guess there is a better way to do this.
(http://pythonkings.nl/ai/mb/detail2.png)

slowing down the gradient is quite a method, for your case you now need to apply the supersampling per pixel, the chaotic nature of the fractals produce random like pixel coloring because the color can be quite different to the current one compared to the neighbour pixel, espceially in the higher density regions, if you apply super sampling this dimishes out and produces the fine structures you see in the other pic

Don't worry. Your code is correct for supersampling, but the combination of Javascript+Browser makes the edges look hectic.

Just check www.mandelbrot-set.com as you can see the same problem.

If you could make an export to PNG with high resolution and then scale back, your code would give the same sharp details as the wikipedia image. Or since you wanted to learn some code, maybe do the supersampling yourself?

Hello! I have similar (or the same) problem. I wrote the program to plot Mandelbrot set (in C language, escape time algorithm). I want to plot images like in Wikipedia  :embarrass: Other aim - make the program fast as possible.  Unfortunately, at the border of the set there are "trash" instead small beautiful details (as in the images from Wikipedia). Please, help me. How to modify the program?
My image, scaled to 640x512.
P.S. Excuse me for my terrible English.

did you supersample that image?  it doesnt really look like it.  theres no such thing as a free lunch.  if you want beautiful perfectly detailed images you will have to pay the appropriate price to get them.

I will try to apply supersampling today. I think it is incompatible with my aim to get fast program...

another way to look at it is that once you start paying the extra fees of admission to get higher quality images, you will appreciate that much more any efficiency and optimization improvements you make  :D

maybe try adaptive supersampling - for flat regions where colour doesn't change much you don't need to supersample as much as dense regions where the colour changes rapidly

also consider interior checking (even if you don't want to use distance estimate colouring): http://mathr.co.uk/blog/2014-11-02_practical_interior_distance_rendering.html

You really need both quality and speed. Otherwise go for non-AA images no higher then 160x120px or something like that, fast as hell.

For speed, you need to optimize every little detail of every step of the calculation and data storage and retrieval. This is black magic to me, but I know who've been there before. K.I. Martin, Karl Runmo and Botond Kósa. They made the following highly optimized (with perturbation theory) mandelbrot programs:

http://www.superfractalthing.co.nf/
http://www.chillheimer.de/kallesfraktaler/
http://web.t-online.hu/kbotond/mandelmachine/

All 3 have lots of details discussed here on the forums.

It's hard work. Good luck.

smooth(er) colouring in SFTC is done something like this after approximation...

calculate iterations for mandelbrot...
after the above iterations are done, straighten out warped bands...
then before returning the count value...

equivalent colour structure (transitions cover the same distance) with less banding
for an image with a palette of 1024 colours and colorSpread = radius (4.0 in this case)
the palette size can be increased to 4096 and the colorSpread muliplied by the same factor, colorSpread = 16
this gives a very smooth transition and doesn't seem to have much impact on rendering speed

Thank you very much, dear friends!

Thanks again! I have added to my program supersampling 4x4(jittered), median filter, color=log(n). Now fractal is much more beautiful!