Close

Mandelbrot
Help

Manual page that explains how to use the Mandelbrot Viewer web app

Basic Usage

Selection (Mouse, 1 Finger or Stylus)

Drag to zoom

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.

Double-Tap ...and drag

You can also double-tap on a point in the set to zoom in – or double-tap and drag down to zoom in, or drag up to zoom out.

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)

Dark theme (default)
Spectral Color theme
Royal theme

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 'esc', touch with three fingers or simply reload the page in your browser.

Fullscreen

To enter fullscreen mode, press

To exit fullscreen mode, press '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

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.

DeviceSystem Setupms/MP
2019 iPhone 11 ProiOS 15.4, Landscape~1060
2020 iPad Air (4th Gen)iOS 15.4, Landscape~880
2021 MacBook Pro 14"macOS 12.3, Safari 15.4, Studio Display~450
2022 Mac StudiomacOS 12.3, Safari 15.4, Studio Display~190

CPU vs GPU

The current implementation of Mandelbrot Viewer is not using native graphics acceleration. Therefore the benchmark will only tell you something about classic (multi-core) CPU performance. Implementing GPU support would be nice but is currently not in scope.

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:

theme=[theme name] specifies the theme (dark, color, royal)
theme=[hex value] uses a six character hex RGB value (without #) as background color
workers=[number] can be used to specify the number of workers

Embedding

Embedding into another website using an iframe:

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

Mandelbrot Gallery

The Mandelbrot Gallery shows a collection of nice areas of the Mandelbrot set.

Spiral and Black Hole
Benchmark

About

Mandelbrot Viewer is a universal (desktop and mobile) vanilla JS implementation of a plain Mandelbrot set renderer – supporting mouse, touch and keyboard interaction.

A minimal design, superior UX and fast rendering performance are the main objectives of this project.

Using icons instead of text, the app should be easily usable by anyone – and by implementing divide and conquer, web workers and caching it delivers fast rendering times.