Introduction to Leshy Fractal Explorer

Posted by Doug Haber on 2012-12-27
Leshy Fractal Explorer is an HTML5 fractal browser. It has many features for fractal browsing, zooming, and audio generation. This program is designed to be usable quickly by beginners, but it also has many advanced features and a lot of customizable settings.

This document provides information on how to use this program. If you are more interested in details on each parameter and control, then the documentation may contain more of what you are looking for. There is also a (very outdated) video introduction to the program.

This document was updated on December 16, 2014 to better describe features in the new release. More Details

Click here to launch Leshy Fractal Explorer

Basic Fractal Browsing


The default fractal is the classic Mandelbrot
When first loading Leshy Fractal Explorer the default view is a normal mandelbrot fractal. From this view it is possible to navigate the fractal in many ways.

Panning
The viewport can be panned using the arrow keys or with the mouse by holding the right mouse button down over the fractal and dragging.

Zooming
Zooming in and out can be done with the + or - keys on the keyboard, or with the scroll wheel on the mouse. When using the keyboard the zoom is towards or away from the center of the viewport. When using the mouse it is away or towards the mouse cursor.

Rectangle Zooming
The left mouse button can be held down to draw a rectangle on the fractal. When the button is released the viewport will be adjusted to zoom in, and the position will be set to that rectangle as best is possible.

When zooming or panning the fractal draws in a notably lower quality in order to maintain performance. The quality used is referred to as the "Low Quality Scale" and can be customized so that faster systems can show more detail while doing these actions.

Using the Keyboard

Many keys can be used to cycle through options. For example, the C key will cycle through different coloring modes. Each press of the C key will move to the next coloring mode.

Some keys can have their behavior reversed by pressing the SHIFT key along with them. For example, SHIFT and C will cycle to the previous coloring mode.

Here are some useful keys:
Key Description Key Description
Arrow Keys Move the view port in a direction + or - Zoom in or Out
F Cycle through the available fractals C Cycle through the available color modes
Z Cycle through the available z-color modes D Cycle through some detail levels
R Reset the view modes to their defaults H Toggle the display of the help / settings area.
I Invert the final iteration value G Toggle the grayscale filter
X Cycle through the available zoom-color modes S Save a screenshot
CTRL+M Share the current fractal view ALT+ENTER Toggle Fullscreen mode
P Toggle playing fractal audio Spacebar Play the current note
V Toggle stripe average coloring Q Toggle color cycling

There are many other keys and key combinations supported. The full list along with more details can be found in the documentation.

The keys are laid out so that the common ones are accessible with the left hand on the home keys. This is intentional and it allows advanced users to quickly use the keyboard controls with their left hand and the mouse controls with their right. This isn't in anyway required, but can helpful.

Understanding Modes

There are a number of modes and filters supported. When calculating a final color each mode and filter can be used in combination.

Color Mode
Each color mode takes the number of iterations for a pixel and using some algorithm converts it into a color.

Z-Color Mode
The Z-Color modes modify the number of iterations, often using the final 'Z' value for the pixel. These modes can be very sensitive to final color mode, type of fractal, number of iterations, and other factors. A z-color mode may produce no useful fractal image in some conditions, but under other conditions may yield interesting results.

Zoom-Color Mode
The Zoom-Color modes modify the number of iterations using the level of zoom into the fractal. This makes it possible to achieve zooming effects where colors shift or features change as the zoom progresses.

Grayscale Filter
This filter converts the final color value to grayscale for each pixel, resulting in a grayscale image.

Invert Iterations Filter
This filter takes the final iterations value and inverts it. This often causes a shift or inversion of the colors used, but in some conditions it may greatly alter the view.

Losing Detail while Zooming?

When zooming sometimes features begin to smooth out and sometimes solid colored holes may appear. This may be because the "iterations" value is too low. It can be raised through the settings, or by pressing the 'D' key. The 'D' key causes causes it to cycle through some different values for the field. Raise the value up high, and the patterns will remain much more detailed far deeper into the fractal.

If you zoom much further into a fractal eventually things will get blocky. This is due to running out of floating point precision. There isn't much that can be done here. Some fractal programs support what is called "deep zooming" which allows the zooms to go way beyond this limitation by supporting larger precision floats. This was attempted, but the performance wasn't nearly good enough to release.

Auto-Zooming

Auto-zooming allows the fractal to be zoomed into or out of at a fixed speed and framerate. When auto-zooming the mouse does the steering, so if you see a feature you would like to go towards, just move the cursor onto it.

To begin auto-zooming press the 'A' key. To go the opposite direction press SHIFT+A. To stop, just press the key again.

The auto-zoom speed, quality, and target frames per second can be customized. This will be covered in the Advanced Settings section.

Settings

In the upper right corner of the fractal viewport there is normally a box labeled "Settings / Help / About". If the left mouse button is clicked on this, then a settings dialog appears. The settings information can be toggled in visibility with the 'H' key.

A number of the settings are also controllable through the keyboard or the button bar. In some cases (such as iterations) the settings dialog allows for further customization than can be done with just the keyboard.

The settings dialog has the tabs: General, Fractal, Audio, Advanced and About. The documentation goes into full details of each setting. Here we will discuss some that may be useful in the sections that follow.

Fractal Settings

The "Fractal" settings tab allows for configuring all of the modes and filters associated with the current fractal view. In addition to this it provides some special fields that allow customization of fractal attributes that can greatly alter their appearance.

Bailout
The "Bailout" setting defines a Z value that is considered the maximum to check against for escape in escape-time fractals. This will effect all Mandelbrot and Julia fractals as well as their variants. Making the number smaller generally can have notable effects, though with some modes (especially z-color modes) larger numbers can have an impact as well.

Here are some links to examples of low bailout settings:


Newton Fractal Settings
Towards the end of the fractal tab there are a number of settings that only effect Newton fractals. As a warning, the technique used to create Newton fractals is notably slower than the Mandelbrot and Julia fractals. Using them takes longer to render and may make the browser less responsive.

A newton fractal using Novaify and a custom alpha setting

The first Newton-only setting in the fractal tab is "Novaify". This provides two options for modifying the process to create Nova fractals. Technically something may not be quite perfect, since they don't look exactly like Nova fractals should. Still, they are interesting and can be worth exploring.

The "Newton Step Size" and "Newton Accuracy" are used when calculating each pixel with the Newton fractal. Increasing or decreasing these values can greatly alter the fractal generated.

The last two settings are for "Newton Alpha". This is a complex number and so there is a real and an imaginary portion. Changing these values can cause all sorts of new modifications to the fractal occur. Similar to with the "Novaify" parameter, something doesn't seem quite perfect here, and equivalent values don't always result in equivalent renderings to other fractal programs.

Experimental Features

Stripe Average Coloring

Stripe average coloring modes use a smooth coloring technique that produces very different views of fractals, with some amazing possible results. To toggle stripe average coloring, use the V key. This technique is much slower than other ways of coloring a fractal, but the results make it worthwhile.

These features are experimental and may change in the future. Options were added under the "Fractal" tab, and some details are found in the documentation.

Settings can be randomized with the 1 key. More extreme settings can be randomly chosen with the 2 key. Color weights can be randomly chosen with the 3 key.

Here are some links to examples of stripe average colored fractals:

Color Cycling

Color cycling dynamically changes the color of each pixel based on color cycle settings. It is toggled on and off by pressing Q or SHIFT+Q for reverse. Settings aren't yet available in the user interface, but they can be randomized by pressing the 9 key. Color cycling is effected by other modes, so results can vary greatly based on color and zColor settings.

Unfortunately, color cycling isn't performant enough this way to do at a good speed, and so it is only done in low quality drawing mode. When exiting color cycle modes all colors are restored to their default.

Toggling Full Screen

Leshy Fractal Explorer can toggle full-screen mode either by pressing the "Full Screen" button on the control's button-bar beneath the viewport, or by pressing ALT+ENTER. In IE10 the "Full Screen" button must be used, since ALT+ENTER is handled by the browser itself to make the browser full screen. To exit the full-screen mode just press ALT+ENTER again, or the ESCAPE key.

Full-screen mode actually is full-window mode. It increases the viewport to the size of the window. To fully increase the size to cover the entire monitor, just full screen the browser window. In most browsers this can be entered by pressing F11 and exited by pressing it again.

With the new release, full-screen is the default. When leaving this mode a controls button-bar becomes visible, which may make the program a little easier to use for beginners.

Full-screen mode does provide an improved viewing experience, but it also can be a lot slower since there is a lot more to render. See the performance section below for advice on how to get things more responsive.

Making Fractal Music

There is an experimental music mode which can be used to produce fractal audio and music. With the current implementation getting good sounds does take some work and a lot of trial and error.

Audio works to varying to degrees in different browsers. To generate audio, Leshy SFMaker is used. Internet Explorer 10 does not support WAVE audio, and so no sound will be produced when using it. Google Chrome usually is the best browser to use, but when it comes to audio it can have some serious issues. In Linux especially, Chrome's issues often crash the application. At the time of writing this Firefox seems to be the best at generating audio with this application, though this will likely change and may vary on different platforms.

Audio data is generated by reading the fractal at a position and using that value. Coloring modes have no effect, but z-color modes will alter the sound. The interesting music generally comes from the more noisy parts of the fractal, though this could vary based on the settings.

There are two ways of playing music:

Viewport Scanning
With this technique the application begins at the top left corner of the viewport and scans to the right to generate audio. Every time it reaches the right end of the viewport it moves down and starts at the left again. A little red dots appears to show where in the fractal the player is currently getting audio from.

The red dot acts as a needle that reads information from the fractal at that position. If the fractal is moving or changing it will respond immediately. This means fractals can be browsed and each time the needle moves whatever is in the viewport at the new position will determine what audio gets generated.

This mode is started by pressing the 'P' key. Pressing the 'P' again will stop the playing.

Fractal Instrument
The fractal can also be played as if it were an instrument. This is done by holding down the space bar while the mouse is over the fractal, or by pressing the middle mouse button down (in browsers that support it.)

The cursor position determines where to read from, and that is then used to determine what audio gets generated. This makes it possible to move the cursor along areas to generate predictable sounds.

It is possible to use either of the techniques for playing music, or both of them together. They determine where audio data is read from. The "Music Mode" setting, found in the Audio tab of the settings determines what happens next.

There are currently three options in "Music Mode". The "Noise Maker" option produces a droning sound. The other two "Synth" options convert the fractal data into notes and then use defined instruments to play those notes. There are two "Synth" modes. One is weighted, and it makes recently played notes more likely to be played again. The other "Direct Note" mode takes the fractal data and converts it into a specific note so that the same data will always result in the same note.

There are a large number of instruments to choose from. They don't all generate the same length sound and so the best settings to use with each instrument can greatly vary.

The "Min. Note Space" setting defines the minimum space between notes in milliseconds. This is actually the minimum space between playing notes, and so if one note is 300ms long and the value here is 200ms, there will be an overlap between notes. Negative values are allowed. The space between notes is generated randomly using this value as a guide, unless "Fixed Time" is enabled, in which case all notes start this many milliseconds after the prior notes. This setting will work in "Noise Maker" mode as well as synth modes.

Sharing Fractals

When not in full-screen mode, beneath the fractal browser are links that allow sharing of Leshy Fractal Explorer on various social networks. These links will share the application itself.

If you wish to share a link into a particular fractal view along with its settings, this can be done by through the "Share" button on the button-bar beneath the fractal viewport. Alternatively, the sharing dialog can be accessed by pressing CTRL+M. This dialog gives a direct link which can be copied and pasted or bookmarked, as well as links for various popular social networking sites.

Advanced Settings

The advanced settings tab contains global settings. These are all either performance related or preferences. Each setting has a checkbox to the left of it. At the bottom of the tab there is a "Save to LocalStorage" button. When pressed, all checked items are saved into the browser's LocalStorage. This means when the same web browser returns to the page it will be able to remember the preferences and performance settings.

Some of these settings can destroy performance if misused. Settings should always be well tested before saving to make sure that they leave the application in a usable state.

This article will go over some of the more important settings.. Be sure to look into the documentation for details on every settings including the ones not mentioned here.

WebWorkers
WebWorkers are used to divide up the labor of rendering a fractal. Today's computers often have multiple cores, and WebWorkers make it possible for the workload to be divided among them, which greatly improves performance. When using Leshy Fractal Explorer you may notice the fractal updating at multiple parts on the screen. Each WebWorker is assigned a percentage (by height) of the screen, and so the updates to drawing don't necessarily occur linearly.

One problem with WebWorkers is that there is no standard way to determine what the optimal number is. When the application initializes it attempts to test the system, but there is a lot that can go wrong here, and some browsers don't behave as well as others.

Generally the optimal setting is somewhere close to the number of cores in the system. In some cases, such as if another application is utilizing a lot of CPU, having a higher number of WebWorkers listed can be detrimental to performance.

If there is no saved setting for WebWorkers, then every time Leshy Fractal Explorer launches it will run a test to determine the setting. If a value is specified that will be used and initialization will be slightly faster.

Low Quality Scale
This value defines the scale used when doing low quality draws. This number is the denominator of a fraction where the numerator is 1, so if the value is 8, then the quality will be 1/8th, meaning only 1 out of every 8 pixels will be calculated and the results will be scaled to the viewport size.

The low quality drawing is used in many places including panning, auto-zooming, and auto-iterating. Users with fast computers may set this value to lower numbers which will render all those things at a higher quality. Setting this number too low or making it low on a slow computer will make the browser less responsive.

In most cases it is not recommended, but setting this to a 1 will cause the low quality draw to be done at full quality.

Anti Aliasing
Anti-aliasing is used to smooth out the fractal drawing. With anti-aliasing we take multiple samples for each pixel and average them to determine the color for that pixel. This tends to smooth out edges and noisy regions.

Anti-aliasing does not begin until after the full-quality render has completed. Since multiple samples are taken for each pixel it is the slowest of the rendering phases.

The value in this setting determines the number of samples. The application takes that number of random samples from within the pixel and averages them. Since sampling is random, very small numbers can actually lessen the quality. It probably isn't a good idea to use a value less than 4.

If the value 0 is used, then anti-aliasing will be disabled.

Improving Performance

Here are some notes on how to get the best performance out of Leshy Fractal Explorer:
  • Other applications including web browsers and pages running flash (and streaming video) could have a large and detrimental effect on performance. It could be worth trying to close these applications to see if performance improves.
  • The Advanced setting for WebWorkers determines how each rendering is broken up into multiple threads. This value by default is calculated automatically, but that process could be error prone or noisy (especially in certain browsers.) Figuring out the optimal value and saving it may notably effect how long it takes to render fractals.
  • Web browsers and releases can greatly impact performance. Generally, at the time of writing this, Google's Chrome browser performs the best. Make sure your web browser is up to date. Performance improvements happen regularly and older releases may be slower.
  • When running in full-screen mode there are a lot more pixels, and so everything takes longer. If you prefer to work full-screen, the "Low Quality Scale" and "Quick Draw Scale" settings could be modified to trade initial quality for performance to keep everything responsive.
  • The "Image Smoothing" setting (under the Advanced tab) will make low quality drawing take a little longer, and so disabling it may be helpful if there are performance issues.
  • With stripe average coloring, the "SAM Color Mix" option when not set to 1 requires calculating colors twice for each pixel. Once with the SAM method, and once without. For this reason, it can greatly slow down rendering when enabled.
  • Newton fractals are slower to calculate, and stripe average coloring is even slower. When using these modes it may be helpful to work at a lower resolution or outside of full-screen mode until ready to do a larger render. With stripe average mode when making changes to a fractal, it may be helpful to turn off stripe average coloring, make adjustments, and then reenable stripe average coloring.

Final Notes

To get started, launch Leshy Fractal Explorer, or take a look at some example fractal links.

Featured Apps


  • Leshy SpriteSheet Tool
  • Sprite Sheet Packer, Mapper, and Editor
  • Leshy SFMaker
    Sound FX Generator
  • Leshy Tuner
    HTML5 Chromatic Instrument Tuner
  • Leshy Fractal Explorer
    Web Based Fractal Browser
  • Leshy SpriteSheet Animator
    SpriteSheet Animation Manager