This is a fractal generator application that will run everywhere, in any modern web browser. Browser technology has advanced far enough to allow efficient, intense number-crunching of the calculations required to create fractals right in the browser. The application currently renders the Mandelbrot set and variations.
This is a web-based application, so the browser matters! It currently works best in Google Chrome. Though this application is standards-compliant, other browsers tend to have various issues:
- Chrome will throttle performance, especially in the background (though this has improved).
- The old Internet Explorer 11 and the old Edge compiler is not as optimized and will swamp your CPU.
- Mobile WebKit browsers may not render the fractal (blank screen).
- Mac Safari may display artifacts as the rendered fractal slices are assembled.
- Firefox will now also throttle performance. See Performance Notes, below.
The link below will bring you to the full version, the same version that I use to create the pieces in the gallery. A painter uses paints; I use a CPU. I am giving you access to my paints! Please be aware that this is always a work in progress. It will change at a whim.
By using this application you agree to the following terms. This application is provided “as-is” and “at your own risk” without warranty as to suitability of use. I am sharing access without asking for compensation. No support is provided. I retain complete ownership and copyright on the code. The application does not track usage in any way above the normal web-host statistics typical of any and all other web sites. Your clicks and results within the application are not recorded. Any images produced are the sole property of the user under international copyright law. It is the user’s sole responsibility to store and preserve any results. This CPU-intensive application will place a high demand on your battery. If your tablet overheats from CPU load, contact the manufacturer, not me.
Performance Notes
Browsers are taking steps to reduce the impact of CPU-intensive web pages on your web browsing experience. If you plan on performing some serious rendering in this application, you should consider disabling the CPU throttling in your browser.
- Firefox: Enter “about:config” into the address bar and accept the warning that comes up. Search for dom.ipc.processPriorityManager.enabled. If you don’t see it, you can right-click on the list and create it. Set it to false.
- Chrome no longer allows control of this feature. However, its task management has improved greatly. When rendering, keep the rendering tab frontmost and active for top performance. Other windows and tabs will be de-prioritized, but they will render. Chrome handles multiple tasks very nicely now.
To draw the most performance from your CPU, enable the Performance item under the Options menu. This is off by default.
Fractal Variations
There are multiple interesting variations of the Mandelbrot set that arise through modifications to the underlying formula. You may switch the formula in use under the Control pane.
Mandelbar creates a three-lobed figure by using the complex conjugate of the traditional formula, which calculates the real portion minus the imaginary portion.
Burning Ship calculates the absolute value (positive only) of the formula. The result looks like a ship at sea, on fire. Magnifying behind the “ship” reveals some tall ships, also seemingly on fire. This pattern appears to the left of the Multibrot set rendered with the y-axis mapped to the exponent instead of to the imaginary component. (See Multibrot Slice, below.)
Cubed raises the power of the formula to three, instead of two. This creates a mirrored-image of the set, with some interesting differences.
Multibrot* allows you to set the exponent of the formula to something other than the traditional second power. Larger numbers create a fringed circle effect, while non-integer values add some interesting complications. Negative values change the behavior altogether, and utilizes period mapping instead of the traditional escape method.
Multibrot Slice* takes a cross-section, or “slice,” of the multibrot set rendered in three-dimensions. The real and imaginary components are still mapped to the x- and y-axes, and the exponent is added for the z-axis. To take a “slice” of this form, extra parameters are available to define the plane of a cross-section.
This is a superset of almost all variations presented on this page. There is so much to explore, even without changing the parameters!
First, an Offset defines the distance of the center of the plane from the origin (0,0,0). Angle determines the angle of the plane from the z-axis (the exponent). Rotation specifies the rotation of the plane around the z-axis. Angles are in degrees, (0,0) facing “down” at a traditional multibrot rendering, in which case the offset is equivalent to the exponent.
It is very easy to get lost and end up with a blank screen! If this happens, zoom out, or reduce your offset to single digits, or Reset the parameters to start over. The active set is a narrow, vertical column. Keep in mind that you are rotating your thin render plane around the column, and not all solutions intersect. At this time, the parameters rotate around the origin (0,0,0).
Negabrot shows what occurs when the exponent is changed to -2. This implementation utilizes the same escape method as the Mandelbrot (though technically incorrect and somewhat unstable).
Negabrot (Periodic) is the Negabrot variant above rendered “correctly” using period mapping.
Tower of Powers* is a little different. It calculates the initial value c raised to the power of the result z over and over again, z = cz, starting with z = 1. You would think that this would quickly escape to infinity, but there are some stable areas that produce interesting results. This is very similar to what appears when you render the Multibrot with a very high exponent.
Newton* fractal illustrates the chaotic nature of the Newton method for iteratively discovering the roots of a complex equation. By default, it renders in the Julia set, but things get interesting using other rendering options. This fractal is essentially a Multibrot formula divided by its derivative.
Select an image to go directly to the live rendering.
* Some of the formulas are more calculation-intensive than others, and will take more time to render.
More Details
Here are some more details on this application. First, it is designed for functionality, not to be pretty. If you’re using a tablet or mobile device, touch support is rudimentary. The primary goals are flexibility, quality of output, and calculation speed (more below). I am always tweaking it with these goals in mind.
Flexibility A strong, customizable theming engine is built in for theoretically unlimited color theming of the fractals. It supports traditional gradient (ramp) themes, sinewave- based (wave) themes, and more complicated (and hard to manage) interference matrices. Many presets are provided to get you started. You can also build your own, which are saved in your browser’s local storage. Note that if you clear your browser’s storage, you will lose your themes! The theme can be applied as a linear, logarithmic, or exponential progression (see the Render menu) to control complexity. For finished work, the resolution can be changed to create print-quality results. There are many other parameters that can be fine-tuned.
The depth controls the maximum iterations allowed before the point is considered “escaped.” Without such a maximum, the calculation would take forever. This is automatically determined based upon the magnification. Several presets are provided, Moderate being the typical setting. You can also specify this number manually in the Details pane.
Quality. Oversampling performs multiple calculations per pixel to create a high-quality image. You can choose from Fast calculation with no oversampling to Fine 8×8 oversampling. For most exploration, you will probably stay in Good 2×2 oversampling for a balance of speed and quality. The calculation overruns by three extra iterations to smooth out banding artifacts that are typically created by an iterated process. Preview mode temporarily turns off calculation-intensive enhancements for quicker rendering.
For extra detail on your screen, you can enable Subpixel Rendering . Most LCD screens are set up with red, green, and blue elements arranged side-by-side on each pixel. This option takes the positions of these elements into consideration when rendering, effectively tripling the resolution of your display on the Detailed and Fine quality settings. The oversampling adjusts slightly to 6×4 and 9×8, respectively. Note that you should turn this off when rendering for print or web.
Speed. The calculation engine is fully-optimised to run in the browser’s asm.js compiler. This means that the browser distills the core calculation into native machine code (really fast)! The application contains its own benchmark, which I’ve used to fine-tune the performance. You can adjust certain performance parameters in the options. This application is multi- threading, and will automatically adjust to your device’s capabilities, even if you’re using a tablet.
Many factors will affect the overall speed of the rendering, CPU power being the primary constraint. The deeper you go into a portion of the fractal set, the more iterations are usually required to render a result. Oversampling quality and smoothing also increase demand. You can temporarily turn off all calculation-intensive enhancements with the Preview option under the Quality menu.
The Performace option under the Options menu will attempt to utilize the full capability of your CPU. Note that some browsers (ahem, Internet Explorer) will be extra aggressive when allocating your system’s resources. By default, this option is not turned on to give your system some breathing room to operate other tasks.
Extended Precision for Deep Zoom
This application supports double-double-precision math for zooming in beyond the CPU’s double-precision limit. Normally, the image will degrade into blocks if you zoom in too far; you’ve hit the precision limit of your computer when this happens. This application will automatically switch to extended precision when you hit this limit. This requires extra computation, however, and results in the calculation slowing down dramatically. You will see a brief notification when this occurs, and there is a “Precision” indicator in the “Details” panel that will switch from “Standard” to “Extended.” I’d recommend lowering the quality setting to “Fast” when exploring this deep. Expect long render times for finished fractals.
At this time, the formulas that require trigonometry don’t yet support extended precision. The application will notify you if it can’t do it. You can currently zoom deep into the Mandelbrot, Mandelbar, Burning Ship, and Cubed variations. Eventually it will have support for all variations.
Various Tips
You can save the browser’s URL at any time to a bookmark in your web browser to remember the current fractal displayed. The displayed coordinates are compatible with any other Mandelbrot set application, however, the options in the URL are unique to this application. The Save Location option under the Options menu will automatically remember where you were when you come back later. Note that a saved URL (bookmark) will override this option.
Printing a rendering usually requires higher resolution output than your screen. You can manually set the pixel width and height through the Resolution setting on the Details pane. You will want to calculate the target width and height by multiplying the paper size by the desired DPI. Gamma is usually set to 1. If you are rendering for a print, you may wish to change this to around 1.2.
Resolution defaults to your web browser window size, or the screen size of your mobile device. With Auto Render enabled under the Options, your fractal will automatically re-render if your window size changes. This includes any bars that appear along the bottom of the window. To prevent this, click on the Set or Screen link under the Resolution setting to fix the resolution, ignoring resize events.
Saving your rendering is best achieved by right-clicking on the image and selecting the option to save the image from the menu. If your browser responds to the right-click by sending a regular click to the application, click Lock Coords above the coordinates first. A Save Image link appears on the Details pane when rendering completes, but this is memory-intensive and has limited support by the browsers. Note that some browsers will show a status bar at the bottom once you save an image, triggering a resize (and re-render) on the window. On mobile devices, use the Full Screen and Hide Controls options to clear all user interface elements, then take a screenshot.
Settings and custom themes are saved in your browser’s local storage. If you clear this, all of your customization will disappear. There is no export function. However, custom themes are copied into the URL on the Coordinates link, so if you have saved a bookmark, your theme will be preserved. I take pains during development to honor older bookmarks so they always work.