mandelbrot-viewer
Version:
A Mandelbrot set viewer for your browser
39 lines • 1.64 kB
HTML
<head>
<script src='mandelbrot-viewer.js'></script>
<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>
</head>
<body>
<div style='margin:0 auto; width:1000px;'>
<canvas id='mandelbrot-canvas' width='1000' height='562'>Your browser does not support canvas.</canvas>
<div id='mandelbrot-params'>
Center @ (, i); Width: ; 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&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>
</div>
</body>