PNG Fractal

A long fascination with fractals, and love of the C programming language led to the publishing of mandelbrot.c. However, Javascript is the language of the internet, which prompted this release of a Client-side, PNG (pronounced ping as in ping-pong; for Portable Network Graphics) Fractal render Javascript.

I would like to thank Robert Eisele for his superb pnglib.js, library which I've had the pleasure in using to create PNG Fractal.

render (button)

Pressing the render button will generate the fractal specified in PNG Fractal's settings.

Once the render is complete the elapsed time required to render the fractal, and size of the down load file is shown. Elapsed time of PNG Fractal's render is a handy (if rough) CPU benchmark for applicable Internet of Things (IoT) devices.


Specifies the width of the fractal image. Height is calculated based on the width. Higher resolutions create larger down load files and effect elapsed time more then iteration. Care should be taken in this regard. Files that are too large could time out the browser session and/or be too large to actually download from a browser.


Specifies the maximum number of iterations PNG Fractal performs. A higher numbers leads to more detailed fractals and longer elapsed times.

xmin, xmax, ymin, ymax

These parameters collectively control bifurcation ratios. The values can be set, or one could just repeatedly hit the render button until a pleasing random fractal arises, and then incrementally tweak the values. Intuitive mathematics if you will☺

The nibbles

Yes those nibbles as in half-bytes. In this case the left and right half of the red, green, and blue (RGB) byte values that control color, in hexadecimal (ie 0123456789ABCDEF) format. Fortunately all 16 required values can be scrambled randomly until a pleasing color pattern arises... or (no pun intended) you could fiddle with them endlessly until you have created your own fractal masterpiece.

To scramble nibbles or not to scramble nibbles, that is the question...

Once your ingenious math intuition, and unparalleled knowledge of RGB saturation is revealed by repeatedly hitting the render button, and a scramble nibbles fractal masterpiece is in sight, but you want to play with the fractal color just a little bit more, DO NOT HIT THE RENDER BUTTON!!! Instead select the scramble nibbles "no" option, which freezes the nibble pattern. Then and only then begin your thereby undisturbed editing of nibble values.

random fractal?

Similar to the scramble nibbles warning, once a desired fractal is randomly generated, select "no" before editing resolution, iteration, xmin, xmax, etc, etc... After changing these values if random fractal is still set to "yes" all changes will be lost as PNG Fractal randomly writes over your settings, and generates a new random fractal.

select fractal

Select the type of fractal for PNG Fractal to generate, which can be downloaded by a right mouse click, or a prolonged finger press on the image.


Returns to this page, and resets PNG Fractal to it's pre-set defaults, a classic centered mandelbrot set in grey scale. Which just goes to show, "all nibbles being equal" is simply a grey area...

To get a feel for how to use PNG Fractal, press Help to reset PNG Fractal to it's default values, and then replace the first 4 left nibbles (red_l_nibbles) with FFFF, being sure to maintain the field's required length of 16 nibbles. The result of this edit should be FFFF456789ABCDEF. Now press the render button.