mandelbrot-viewer-js

Explore the Mandelbrot set using this HTML5 + Javascript viewer.

Check out the live demo!

Features

• Click & drag zooming.
• 'Checkered' and 'Checkered B&W' color schemes.
• Control the render using the 'Cancel' and 'Repaint' buttons.
• Zoom-in and zoom-out buttons.
• 'Reset' button to return to initial settings.

Quick start

Options to add mandelbrot-viewer-js to your project:

• Install with npm: npm install mandelbrot-viewer-js
• Download the latest release
• Clone the repo: git clone https://github.com/llop/mandelbrot-viewer-js.git

Basic use

Include 'mandelbrot-viewer.js' in your HTML file.

<script src='mandelbrot-viewer.js'></script>

Add the viewer's HTML elements:

<canvas id='mandelbrot-canvas' width='1000' height='562'>Your browser does not support canvas.</canvas>
<div id='mandelbrot-params'>
  Center @ (, i); &nbsp; Width: ; &nbsp; Height:
</div>
<div>
  <label for='color-select'>Color scheme:</label>
  <select id='color-select' name='color-select'>
    <option value='0' selected>Checkered</option>
    <option value='1'>Checkered B&amp;W</option>
  </select>
  <button id='repaint-btn' type='button'>Repaint</button>
  <button id='zoom-in-btn' type='button'>Zoom in</button>
  <button id='zoom-out-btn' type='button'>Zoom out</button>
  <button id='reset-btn' type='button'>Reset</button>
  <button id='cancel-btn' type='button'>Cancel</button>
</div>

A circle of radius 2 and centered at (0, 0i) is initially fitted in the canvas regardless of its dimensions. All elements are, of course, customizable via CSS.

Start the viewer with the following code:

<script>
window.addEventListener('load', event => {
  const canvas = document.getElementById('mandelbrot-canvas');
  const mandelbrot = new Mandelbrot(canvas);
  const mandelbrotControls = new MandelbrotControls(mandelbrot, {
    colorSelect: document.getElementById('color-select'),
    repaintButton: document.getElementById('repaint-btn'),
    resetButton: document.getElementById('reset-btn'),
    cancelButton: document.getElementById('cancel-btn'),
    zoomInButton: document.getElementById('zoom-in-btn'),
    zoomOutButton: document.getElementById('zoom-out-btn'),
    paramsText: document.getElementById('mandelbrot-params')
  });
  mandelbrotControls.start();
});
</script>

A working example can be found in index.html.

Advanced use

Specify the coloring function for the Mandelbrot:

const mandelbrot = new Mandelbrot(canvas, {
  colorFuncId: Mandelbrot.COLOR_CHECKERED
});

Available options are Mandelbrot.COLOR_CHECKERED and Mandelbrot.COLOR_CHECKERED_BW.

Events are dispatched whenever a scan starts or ends. To add listeners:

// Attach listeners before calling mandelbrotControls.start()
mandelbrotControls.on('scan-start', event => {
  console.log('scan-start', event);
});
mandelbrotControls.on('scan-end', event => {
  console.log('scan-end', event);
});
mandelbrotControls.start();

License

mandelbrot-viewer-js is released under the MIT License. See LICENSE for details.