Mandelbrot
Help

Basic Usage

Selection (Mouse, 1 Finger or Stylus)

Click and drag the mouse (touch and drag with one finger or using a stylus) to select an area of interest in the Mandelbrot set. Alternatively you can also double-click (double-tap) on a point in the set.

Note: You need to be in 'Select' mode. (see Switch Mode)
In 'Move' mode, dragging moves the current view.

Pinch to Zoom and Pan (2 Fingers)

On a multi-touch device, using two fingers, you can pan and pinch to zoom the Mandelbrot set.

Scroll to Zoom (Mouse Wheel or Trackpad)

On a computer with a scroll wheel mouse (or with a trackpad supporting scroll gestures), you can use the scroll wheel or scroll (and pinch) gestures to zoom in and out.

Navigating Back and Home

To navigate back, press the back button on the top left.
To revert to the initial view, press the home button on the top right.

Additionally you can use the browser navigation (backward/forward) to navigate back and forth.

Switch Theme

To switch to another theme, choose one on the bottom left.
Available themes: dark (default), spectral color and royal (blue and gold)

Public Beta

To switch to the public beta version you can click on the toggle on to center top.

The beta version contains experimental features – e.g. GPU acceleration that will provide a speedup on most current hardware that has the required graphics capabilities (up to a certain zoom level).

Keyboard Usage

Keyboard Navigation

Use the arrow keys to navigate up, down, left and right.

Keyboard Zoom

To zoom in, press the or the i key.
To zoom out, press the the or the o key.

Modifier Keys

When using the keyboard to navigate or zoom, by default the view is moved by 5% and zoomed by a factor of 2.

Holding the alt key , steps are smaller (move 0.5% and zoom 1%)
Holding the shift key , steps are bigger (move half a screen and zoom by a factor of 4)

Advanced Features

Some additional features are hidden under the hamburger menu on the top right:

Switch Mode

When using a mouse or one finger on a touch device, Mandelbrot Viewer supports two modes: Select (Crop) and Move.

Press to switch to 'Move' mode.
Press to switch back to 'Select' mode (default).

Holding the alt key , you can temporarily switch modes.

Presentation

Mandelbrot Viewer features a minimal UI – still you might want to hide the controls, e.g. in a presentation. Press to switch to presentation mode.

To exit presentation mode, press the esc key esc, touch with three fingers or simply reload the page in your browser.

Fullscreen

To enter fullscreen mode, press

To exit fullscreen mode, press the esc key esc or

Reload

To reload the current screen, press
This can be useful for Benchmarking

Download Image (PNG)

To download a PNG image of your view, press

To download a high-resolution (and/or custom format PNG), hold the shift key while clicking and then select a size in the displayed prompt (e.g. "1000x1000" or a shorthand like "4K", "8K" or "16K").

Sharing

To share a view with friends, press

This feature is only available on certain platforms. Alternatively you can simply copy the URL from the address bar and send it by e-mail, messenger etc.

Benchmarking

Motivation

Computing the Mandelbrot set in a high resolution is a computationally intensive task. This makes it well suited for comparing the performance of different devices and/or different web browsers. It shows the performance of real-life web application execution using modern web browser features.

Milliseconds per Megapixel (Lower is Better)

Mandelbrot Viewer shows timing information for every calculated view on the bottom right that can be used for benchmarking. Due to device specific screen resolutions, it is best to compare the milliseconds per megapixel (ms/MP) in order to get a meaningful result.

Make sure to always use the same view (e.g. the Benchmark Example from the gallery) and the same or similar aspect ratio (preferably same screen/window size) for comparison.

Computing performance can vary heavily depending on various factors. Avoid running any other tasks in the background and repeat the benchmark calculation multiple times to get a realistic picture (e.g. by looking at the average ms/MP for multiple runs).

Examples

The following examples all use the Benchmark view from the gallery. Comparing ms/MP – lower is better.

CPU vs GPU

The current stable version of Mandelbrot Viewer is not using native graphics acceleration. Therefore the benchmark will only tell you something about classic (multi-core) CPU performance.

GPU support (public beta)

GPU support is available in the public beta.

However, due to some limitations (e.g. floating point number precision), GPU acceleration in the current implementation can only be used up to a certain zoom level. We therefore use the GPU up to approximately 30k zoom and switch to CPU for deeper zoom.

The Benchmark view at 97m zoom will therefore still be CPU only.

Benchmark Tool (public beta)

For more reproducable benchmarking (multiple cycles, CPU and GPU use and not depending on screen size), Mandelbrot Benchmark is the tool of choice.

This is an experimental tool currently in beta testing.

Installing – Progressive Web App (PWA)

On mobile devices and in Chromium browsers for desktop operating systems, Mandelbrot Viewer can be installed like an app:

On iOS: Use "Add to Home Screen" in the menu.
On Android: Install the app from Chrome.

In Chrome on a desktop computer: Use the Install icon in the address bar.

URL Parameters

Mandelbrot Viewer uses URL parameters for deep linking. These can be altered manually to change the view or to create a link.

Basic Parameters

https://mandelbrot.silversky.dev/?re=[re]&im=[im]&width=[width]

[re] defines the real axis (x-axis) center (default -0.5)
[im] defines the complex axis (y-axis) center (default 0)
[width] defines the visible width of the real axis (x-axis). The height cannot be specified and is always calculated according to the screen/window size.

Advanced Parameters

Additionally, there are some advanced parameters:

Embedding

Embedding into another website using an iframe:

<iframe src="https://mandelbrot.silversky.dev"
        title="Mandelbrot Viewer"
        width="800"
        height="600">
</iframe>