Mandelbrot Explorer Instructions
Introduction
The Mandelbrot Explorer allows you to delve deep into the Mandelbrot set using an interactive web interface.
The interface is augmented with Javascript, but the application should still be useable (through the form interface) if your browser doesn't support it, or if it's turned off.
Please feel free to use the resulting images for any purpose. However, if you do intend to use any of them on another website I'd be
really grateful if you would take a copy of the images rather than link directly to the images on the server. The images are rendered dynamically, so if you link directly to them it'll be eating up the server processor power unneccessarily.
Apart from producing some pretty images, Mandelbrots are also a fascinating area of mathematics. There's lots of good Mandelbrot and fractal related information available scattered around the web. The
MathWorld Mandelbrot set entry is probably a good place to start.
Finally, if for any reason you want to contact me about the application or would like the source, please feel free to
email me.
Starting up
When you arrive at the start page, you should be presented with a render of the entire Mandelbrot set. In addition, there are a number of form fields, plus some buttons: Show area, Zoom out and Restart.
If you're not using Javascript, you'll have to control everything using the form fields. If you do have Javascript, you can use the fields as well, but there are also easier ways to control things, which we'll come to shortly.
Briefly, the fields are as follows.
| x | The co-ordinates of the left hand edge of the image. This represents the real value on the complex plain of the left hand edge. |
| y | The co-ordinates of the top edge of the image. This represents the imaginary value on the complex plain of the top edge. |
| w | The width of the image to be rendered in the complex plain. Since the image is square, this also represents the height. |
| i | The number of iterations to perform at each point when rendering the image. The higher the number, the more accurate the image, but the longer the image will take to render. If you set this value too high, the server will time-out when rendering and you unfortunately won't get an image back. |
| col | The colour scheme to use for the image. There are a number of pre-defined palettes to choose from, each of which has been helpfully provided with a cryptic name. |
| Show area | Clicking this will render the image based on the values in the fields just described. |
| Zoom out | Clicking this will zoom out of the image by a factor of 1.5, with the centre of the zoom at the centre of the co-ordinates in the fields described above. |
| Restart | Click this to return to the original image showing the full Mandelbrot set. |
| Permalink | This provides a permanent link to the page showing the image currently being displayed. |
| Large render | Clicking on this link will generate a 1280 × 1024 pixel render of the current image. This will open in the same browser window, unless you tell your browser to do something else. |
Everything can be controlled using the fields described in the table. However, the two most common tasks you're likely to want to do are zooming in to the image, and zooming out again. For these two actions, there is a slightly easier method that you can use, and which we will now describe.
Zooming in
If you have Javascript, there is a very simple way to zoom in to the image: by creating a boxed area to zoom in to.
This is achieved in two steps. First you draw a box to indicate the area you want to zoom in to. Second you tell the computer that this is the area you want to select.
To draw the box, all you need to do is click anywhere in the Mandelbrot image, and drag across with the mouse button held down to draw out a box. This box represents the area that the computer will zoom in to.
Once you've draw a box, you can reposition it by clicking inside it, and then dragging it to a new location. Alternatively, if the box is not of the right dimensions, simply click and drag somewhere outside of the box to create a new box.
Note that the images the program renders are square. Hence when you drag a box out like this it will also remain square.
Once you've created a box that you're happy with, you can zoom in to the area by either double clicking inside the box, or by hitting the 'Show area' button. The box will acquire a red border to highlight the fact that you've selected it, and a new image will be loaded.
Zooming out
Zooming out of the image is quite straightforward. As descibed above, you can hit the 'Zoom out' and this will zoom out by a factor of 1.5. If you have a box drawn on the image, the outward zoom will be centred on the centre of the box.
As an alternative method, double clicking anywhere on the mandelbrot image, except inside any box that you have drawn, will also zoom out by a factor of 1.5
Other actions
All of the other actions are as described in the table above. Whenever the browser is attempting to get data from the server, an animated bar will appear in the top left hand corner of the Mandelbrot image to indicate that something is going on.
Hopefully all of this should be straightforward, but if not, please do feel free to
get in contact.
The technical stuff that I find interesting, but no one else will
The web application uses a combination of web technologies to allow interactive exploration. For example, it uses Javascript for the client side dynamic web interface and the Common Gateway Interface (CGI) for server side processing.
It's not quite AJAX, since although it does use Javascript to dynamically obtain data direct from the server across the network, there's no XML used in the protocol. It's a somewhat subtle distinction, as the end-user result is pretty much the same. Perhaps it could be called
AJACS instead?!
The other neat thing about the application is that although the interface is made richer using Javascript, it will still work perfectly well if Javascript is not supported or turned off. It's not quite so easy to navigate without it, but it is possible using the basic form entries.