mandelbrot-js/index.html

50 lines
1.5 KiB
HTML
Raw Permalink Normal View History

2022-07-04 00:17:36 +00:00
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="index.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>HTML 5 Canvas Mandelbrot Demo</h1>
<h2>Programmed by Alexander Bass</h2>
<hr>
<p>Instructions:
<br> Click any point on the image to move to there.
<br> Adjust the zoom by using the zoom slider; Render by either clicking or pressing render button.
<br> Adjust iterations slider and other settings to satisfaction
</p>
<canvas class="canvas" id="viewport" width="800" height="800"></canvas>
<div class="subSection">
<h4>Zoom<h4> <span id="zoomer"></span>
<input id="zoom" type="range" min="-10" max="1000" value="-10" class="slider">
</div>
<input class="startButton" type="button" value="Render" onclick="render();" />
<div class="subSection">
<h4>Iterations<h4>
<input id="iterations" type="range" min="5" max="3000" value="200" class="slider">
2022-07-04 00:17:36 +00:00
</div>
<div class="subSection">
<div class="inline">
<h4>Color Mode</h4>
<select name="Color Mode" id="mode">
<option value="1">Mode 1</option>
<option value="2">Mode 2</option>
</select>
</div>
<span class="spacer"></span>
<div class="inline">
<h4>Fractal Type</h4>
<select name="Fractal Type" id="type">
<option value="1">Mandelbrot</option>
<option value="2">Burning Ship</option>
</select>
</div>
</div>
</div>
</body>
</html>