The 4-D Mandelbrot Object: WebGL Explorer


Animation


Steps:

Plane


The text below represents the current position and display parameters. You can cut and paste this to save and reload locations.

Instructions

Below the image are six options that display different sets of controls to manipulate the image. Click on one of these to display those controls. They are:

Beneath the main controls there is a text box that contains the current image's parameters, you can copy these to a file and save them for reuse at a later date. Paste your saved text into the box and press the "Reload" button. The string is in JSON format, and can be edited.

Mode: There are two sets of options here.
  • The first set of buttons represents the five colouring modes: "Standard", "Stars", "Bands", "X-Bands" and "Y-Bands". These are the different algorithms that can be used to decide what colour to shade the non-divergent points.
  • The second row allows you to vary 'n' in the iteration equation z → zn + c, where 'z' and 'c' are complex numbers. For the standard Mandelbrot set n is 2. The buttons show the appearance of the generated fractals for 'n' values from 2 to 9.
Explore:

Once you have chosen the pattern and the mode of coloring you can pan around the image and move in and out. There are three sections.

  • "Zoom": allows you to zoom in and out, "+" is in, "-" is out. '1' will reset the zoom factor back to 1.
  • "Iterations": will increase the number of iterations of the equation that are carried out before the algorithm decides that a point isn't diverging and colours it black. "+" will use more iterations, "-" fewer. Using more iterations will make the calculation slower.
  • The direction arrows will allow you to pan around the image at a fixed zoom depth. Depending on which plane you are viewing two act as a pan and the other two change the fractal slice.
Colouring:

This allows you to adjust the colouring parameters within the five colouring modes introduced in the "Mode" section. There are 4 adjustable parameters:

  • The first option only applies to the standard colouring mode. Here colouring depends on how many iterations were required before the equation was confirmed to be on a divergent trajectory. The adjustment allows you to change how much the colour changs as the number of iterations increases. The top row makes the colour change smoother, the bottom row makes it more granular.
  • The second option only applies to the "stars" colouring mode. In this mode points are coloured based on how close the 'z' value got to the origin before the trajectory ultimately diverged. The options adjust the factor that converts this distance to a colour. You can use this to make the "stars" that this algorithm generates larger or smaller.
  • The third option applies to the "bands" and "x-bands" colouring modes. These bands are calculated based on how close the 'z' value got to the x (real) axis before the trajectory ultimately diverged. The options adjust the factor that converts this distance to a colour, which in turn determins how wide or narrow the bands appear.
  • The furth option applies to the "bands" and "y-bands" colouring modes. These bands are calculated based on how close the 'z' value got to the y (imaginary) axis before the trajectory ultimately diverged. The options adjust the factor that converts this distance to a colour, which in turn determins how wide or narrow the bands appear.
View plane:

This is chosen using one of the 4 buttons beneath the image.

The equation we are iterating, z → z = zn + c, has four potential variables, Zx, Zy, Cx and Cy.

When we create one of these fractal images we keep two of these constant and vary the two others over the range of value that defines the view are that we see on the screen.

To draw the standard Mandelbrot we set (Zx,Zy) to (0,0) and vary (Cx,Cy) over the view window.

To draw a Julia set we set (Cx,Cy) to a constant value and then vary the starting Z value (Zx,Zy) over the view window. When you choose the Julia plane the (Cx,Cy) value will be the centre point of the Mandelbrot image. If you pan around the Julia set and then switch back to the Mandelbrot plane the image will be constructed with the initial Z value being the centre of the Julia image. This will dispay a plane that is parallel to the standard Mandelbrot set but offset by the vector (0,0,Zx,Zy).

If you imagine the (Cx,Cy,Zx,Zy) as defining a 4-dimensional space then there are 4 other planes orthogonal to the Mandelbrot and Julia planes. You can view what the set looks like in these planes and pan around them. The caption immediately below the image will tell you where you are in this 4-D space.

Animation:

Animation allows you to vary the parameters and move between two images. They must both be on the same plane. Two set up the end-points you can use the two buttons "Set Start" and "Set End". Use the navigation controls to find an interesting position and then use one of these buttons to save it.

Once you have set the end-points you can use the buttons "To Start" and "To End" to review them. You can then set the number of iterations and press the start button to launch the animation.

WebGL:

This allows you to change the floating point precission value passed to the WebGL shaders. I was hoping that this would enable deeper zooms, but it appears to make no difference on any graphics card I've tried. Maybe I'm not doing it right.

Other pages

(c) John Whitehouse 2010 - 2023