Fractal Explorer

Fractal explorer is a Processing sketch created for touch interaction on Cyber-Commons, a large format display device. Although the sketch is intended to be run on Cyber-Commons, where users interact either by touch or with a mouse, it can also be run on a common computer for mouse only interaction. The Mandelbrot Set is explored in the sketch through categorized parameters of a touch menu. Touch menu interaction is assisted by a state textbox, positioned horizontally where the user last touched, that displays messages informing available actions based on the previous action. The goal of the sketch is to allow users unfamiliar with fractal properties to gain an intuitive understanding through interaction.

• Fractals
  The Mandelbrot Set is defined as:
  
  
  z = z² + c
  
  Where both z and c are complex numbers and so have a real and imaginary component. The real and imaginary components can be mapped to the complex plane where the x-axis contains real numbers and the y-axis imaginary. Each pixel is mapped to the complex plane as well and each pixel’s position then represents c (Figure 1). The number of iterations z could be assigned would ideally be infinite for a perfect visualization but obviously that is not possible on a computer. Instead maximum iterations is defined and z is assigned at most maximum iterations times. A pixel that does not belong to the Mandelbrot Set will cause z’s assignments to take on values with a magnitude that tends towards infinity. Once z’s magnitude goes beyond a threshold (traditionally 2.0) it will tend to infinity and the associated pixel is assigned a color by mapping the number of iterations z used (Figure 2).
  

  Figure 1 shows the relation between the Mandelbrot Set and the complex plane.	Figure 2 shows the color bar in its default grayscale state causing low iteration pixels to be black and high iteration pixels to be white.

  
  
• Shaders
  Traditionally a sequential program would perform the mappings and iterations required per pixel to create an image and so both maximum iterations and the number of pixels affect the speed of the program. Cyber-Commons has a pixel resolution of 8160 * 2304 (18.8 megapixels) and the traditional method took about 45 seconds to update the display once when maximum iterations was set as 1000. Initially I experimented with skipping over pixels in passes to cause new images to fade in but the result was being able to see an image that has unbearably slow interaction due to other pixels still being rendered. Instead I wrote a few shader programs, a new feature to Processing that allows control over GPU, dropping the time to about a second (a shader for the Mandelbrot Set, another for the Julia Set, and a much faster one for the color bar). Processing maintains the state of a fractal, the complex plane window, and color bar information to send to the fractal shaders and update the display. Unfortunately this is still too slow for animation but is acceptable for “on click” or “on touch” fractal interaction.

The sketch’s menu is a recursive class that maintains a list of children of type itself and appears where the user touches. What differentiates one menu from another is its title, list of children, and associated action. It was designed to be able to add or remove sections based on the current fractal being displayed in addition to updating the state textbox. An example is Julia / Mandelbrot Mode, an option that can be selected to bring up new relevant actions.

• Fractal Color
  This menu opens WidgetColor, a class designed to manage color selection between Processing and the shaders. Color is managed in each shader by determining the two closest neighboring color nodes from a sorted list to a particular pixel and interpolating their colors. WidgetColor displays the color bar as well as 4 options that take control away from the menu when selected:
  
  • Color: This mode causes touched color nodes to toggle selection bars for updating their color (Figure 3). This feature is multi-user friendly as multiple color nodes can be updated at the same time. While a color node is being updated by an “on drag” event the color bar updates in real time but the fractal does not due to the limitations described in Shaders. Newly opened selection bars that overlap the menu or other selection bars hide the previously interacted elements (Figure 4).
    

    Figure 3 shows 2 selection bars opened.	Figure 4 does not show a menu because a selection bar is hiding it.

    
    
  • Move: This mode causes a touched node to be selected and then moved by an “on drag” event. As the node moves the color bar updates in real time but the fractal does not due to the limitations described in Shaders.
    
    
  • Add: While this mode is active touching will place a new color node at the same x position as the touch but vertically on the color bar. As this is a single event per touch, the fractal can be updated immediately after a color node is added. The number of color nodes that can be placed in total is 32 due to nodes being sent to the shader, but fractals tend to look quite ugly with this many colors and so the limitation is (hopefully) not reached in practice.
    
    
  • Remove: While this mode is active touching a node will remove it from the color bar. A limitation is placed to prevent removing color nodes if only 2 remain.
  
  
• Fractal Options
  This menu’s children may be added or removed if Julia / Mandelbrot Mode is active. The purpose of its children are to demonstrate concepts that are more mathematical than intuitive:
  
  • Display Complex Grid: This state can be toggled while performing other actions to overlay the complex grid for reference (Figure 1).
    
    
  • Display Orbit Traps: This mode causes a touched pixel to be mapped to the complex plane as c in the Mandelbrot / Julia Set algorithms. As the algorithm iterates, all of the values z takes are shown with connected lines. If z belongs to the Mandelbrot / Julia Set, then it will form either a closed or spiraling shape (Figure 5). If z does not belong to the Mandelbrot / Julia Set it will leave the screen and tend towards infinity (Figure 6).
    

    Figure 5 shows the orbit trap of a point inside the Mandelbrot Set and near its boundary.	Figure 6 shows a point outside the Mandelbrot Set and near its boundary tending to infinity.

    
    
  • Julia / Mandelbrot Mode: This state can be toggled to interpret c as a constant user specified value instead of a pixel mapping. When entering Julia Mode for the first time a suggested value for the constant from a list the viewer can see is displayed (Figure 7).
    

    Figure 7 shows the list of suggested Julia constant values.	Figure 8 shows the result of having assigned c as (-0.88, 0.0i).

    
    
  • Set Constant: This mode causes a touch to be mapped to the complex plane as c modifying the current Julia Set. The complex grid overlay is show while this mode is active for reference (Figure 8).
    
    
  • Suggested Constants: This list exists for users to quickly cycle though interesting Julia Sets (Figure 7). Selecting a Julia Set without any knowledge of good values generally produces uninteresting Julia Sets.
  
  
• Navigation This menu’s children all map touches to the complex plane to manipulate the complex plane window. Because the complex plane window is a square and Cyber-Commons’s display is a long rectangle cropping and centering are required. The expected behavior is to move the user to the center of the display when being used on Cyber-Commons:
  
  • Pan: This mode maintains the length of the complex plane window but repositions its top-left corner so that the location the user touched becomes the new center.
    
    
  • Reset: Touching this resets the complex plane window without modifying the current navigation mode. If the Mandelbrot Set is being displayed then the center of the complex plane window is (-0.5, 0.0i) to center the fractal.
    
    
  • Zoom In: This mode halves the length of the complex plane window and repositions its top-left corner so that the location the user touched becomes the new center.
    
    
  • Zoom Out: This mode doubles the length of the complex plane window and repositions its top-left corner so that the location the user touched becomes the new center.

Processing sketch with required shader files: AlexFractal.zip.

This sketch requires Omicron for touch interaction on Cyber-Commons. If the “OmicronAPI” directory is located where Processing is configured to look for libraries then the sketch will run without modification. If Omicron is not used the touchDown(), touchMove(), and touchUp() functions could be renamed as the built-in Processing functions for mouse interaction and mouse position.

• This sketch was written using Processing.
  
  
• The sketch relies on Omicron for touch interaction on Cyber-Commons.