Introduction to Mandelbrot Viewer

Back in the early days of fractals the Mandelbrot fractal used to be an expensive set of equations to compute, but with modern computers it’s possible to run these calculations ridiculously fast. In the late 1980s a home computer could calculate a mandelbrot fractal… very slowly. 8 minutes for one frame back then.

In the 1990s I remember the speeds increasing so that it only took a few seconds to render the fractal, and eventually it became possible to render the mandelbrot in realtime, at low resolution, using a bunch of clever hacks. By the 2000s you could render a near-realtime fractal using a standard computer program with a tight loop written in C++. Today the same program runs at lightning speed on a GPU, but fast enough in javascript to be a very useable fractal viewer.

So here’s a quick screenshot of the fractal viewer I’ve put together for this website:

The mandlebrot viewer in action

To navigate the fractal you’ll need a mouse and keyboard (no touch controls yet). The keyboard controls are: Arrow keys to move around, Shift-Up or Shift-Down to zoom, numbers 1-5 to change the palette. The mouse controls are: Click and drag to move, mousewheel to zoom.

Once you’ve found your bearings there’s a few menus on the top left that allow you to tweak and view various things.

First up the settings menu:

The settings menu

At the top you have basic information about the canvas size, the mode (more later), the X and Y coordinates and the zoom level. The Settings panel largely controls the colouring of the fractal.

Smooth shading eliminates the bands you see in a basic mandelbrot fractal

aaEnabled multisamples each point on the screen to give a smoother resultant renderer

Offset and Multiplier control the gradient used to render the fractal. Increasing the multiplier will use the gradient multiple times, offset will change the starting point of the gradient (0->1).

Julia mode switches the whole system to a Julia rendered

The Max Iterations text input controls how many times we iterate the mandelbrot formula. Default is 256. Increasing this number increases the time it takes to render the fractal, but reveals more detail that you won’t have seen before.

Fullscreen is useful if you’re trying to render a specific size for instagram etc.

Next up we have the Julia Selector:

The Julia Selector Screen

The Julia selector screen is used to select the julia x/y parameters when changing the fractal viewer over to Julia Mode. If you zoom out on the mandelbrot you can run the mouse cursor around the edge of the mandelbrot set to see the different types of julia sets that correspond to those coordinates. I’ll talk about this in more detail another time.

And finally we have the Orbit Viewer:

The Orbit Viewer screen

The orbit viewer shows you visually what is happening during each iteration of the mandelbrot formula. The circle shows the circle of radius 1. We flag a point as having escaped when it exceeds the circle of radius 2.

You can click the “Select Orbit Mode” to toggle between orbit updates on click, or when you move the mouse. It’s quite interesting to explore when you zoom out on the fractal as the orbits show definite patterns which I’ll discuss in a seperate article.

Other Tricks

The mandelbrot viewer can also be linked to with a query string so that you can share a specific part of the mandelbrot fractal with other folks. As you navigate around the fractal the URL updates, so just copy and paste that into twitter if you’d like to share a specific location.

I’ll probably continue to tweak the application from time to time, so apologies if these instructions are slightly out of date.

Here’s a few links that take you to specific parts of the mandelbrot. Elephant Valley, Seahorse Valley, The Main Bulb and a sub-mandelbrot. Happy viewing!

Leave a Reply

Your email address will not be published.