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>
|
2022-07-05 05:47:37 +00:00
|
|
|
<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>
|
