# mandelbrot-viewer

> A Mandelbrot set viewer for your browser

Latest version **1.0.2** (published 2019-10-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install mandelbrot-viewer
pnpm add mandelbrot-viewer
yarn add mandelbrot-viewer
bun add mandelbrot-viewer
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2019-10-09 |
| First published | 2019-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Albert Lobo |
| Maintainers | llop |
| Keywords | mandelbrot-set, viewer, browser, front-end, web |

## Links

- npm: https://www.npmjs.com/package/mandelbrot-viewer
- Repository: https://github.com/llop/mandelbrot-viewer-js
- Homepage: http://albertlobo.com/fractals/mandelbrot-viewer
- Issues: https://github.com/llop/mandelbrot-viewer-js/issues
- npm.io page: https://npm.io/package/mandelbrot-viewer

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 1.0.2 (latest) — 2019-10-09
- 1.0.1 — 2019-10-09
- 1.0.0 — 2019-10-09

## README

mandelbrot-viewer-js
====================

Explore the [Mandelbrot set](https://en.wikipedia.org/wiki/Mandelbrot_set) using this HTML5 + Javascript viewer.

Check out the [live demo](http://www.albertlobo.com/fractals/mandelbrot-viewer)!

## 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](https://npmjs.org): `npm install mandelbrot-viewer-js`
* [Download the latest release](https://github.com/llop/mandelbrot-viewer-js/archive/master.zip)
* Clone the repo: `git clone https://github.com/llop/mandelbrot-viewer-js.git`

## Basic use


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

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

Add the viewer's HTML elements:

```html
<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:

```html
<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](index.html).

## Advanced use

Specify the coloring function for the Mandelbrot:

```javascript
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:

```javascript
// 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](LICENSE) for details.

---
_Source: https://npm.io/package/mandelbrot-viewer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._