-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathmandelplot.html
138 lines (127 loc) · 5.36 KB
/
mandelplot.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!DOCTYPE html>
<html>
<head>
<title>Alexander Mead | Mandelplot</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="scripts/script.js"></script>
<script type="text/javascript" src="scripts/menu.js"></script>
<script type="text/javascript" src="scripts/mandelbrot.js"></script>
<!-- Mathjax with GitHub pages: https://stackoverflow.com/questions/34347818/using-mathjax-on-a-github-page -->
<script
type="text/javascript"
id="MathJax-script"
async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
></script>
<script>
MathJax = { tex: { inlineMath: [["$", "$"]] } };
</script>
<!--[if IE]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="page-wrapper">
<div class="nav-container clearfix" id="nav-home">
<div class="nav-logo">
<p class="logo"><a href="index.html">AM</a></p>
</div>
<nav class="nav-menu">
<ul>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#publications">Publications</a></li>
<li>
<a href="https://github.com/alexander-mead/HMcode">HMcode</a>
</li>
<li><a href="orbits.html">Orbits</a></li>
<li><a href="gravity.html">Gravity</a></li>
<li><a href="maths.html">Maths</a></li>
<li><a href="#" class="selected">Mandelplot</a></li>
<li><a href="universe.html">Universe</a></li>
<li><a href="index.html#contact">Contact</a></li>
</ul>
</nav>
</div>
<div class="intro">
<h3>Mandelplot: Plot from the Mandelbrot Set</h3>
</div>
<div class="subpage-wrapper">
<div class="content-wrapper clearfix">
<div class="subpage-left">
<p>
Here you can plot part of the
<a href="https://en.wikipedia.org/wiki/Mandelbrot_set"
>Mandelbrot Set</a
>, which is a fun thing to do if you cannot sleep at night. The
set is a good example of how a simple mathematical equation can
produce extraordinarily complex behaviour. Explore the set by
changing the image centre, depth, and zoom level. The depth
controls the number of iterations that are used to determine
whether a point is in the set or not. Zoom is how many factors of
two to zoom in by. Points are coloured according to the number of
iterations required to determine whether they are in the set or
not, with black being points that are in the set, and the colour
intensity indicating how long it took a point to diverge.
</p>
<br />
<p>Some coordinates to try are:</p>
<ol>
<br />
<li>･ $(-0.75, 0.00)$</li>
<li>･ $(-1.40, 0.00)$</li>
<li>･ $(-0.60, -0.40)$</li>
<li>･ $(0.25, 0.00)$</li>
</ol>
<br /><br />
<label for="real">Image centre (real): </label>
<input id="real" type="number" value="-0.5" /><br /><br />
<label for="imag">Image centre (imaginary): </label>
<input id="imag" type="number" value="0.0" /><br /><br />
<label for="zoom">Image zoom: </label>
<input id="zoom" type="number" value="0.0" /><br /><br />
<label for="depth">Image depth:</label>
<select name="depth" id="depth">
<option value="64" selected>Very low</option>
<option value="128">Low</option>
<option value="256">Medium</option>
<option value="512">High</option>
<option value="1024">Very high</option></select
><br /><br />
<label for="color">Colour scheme:</label>
<select name="color" id="color">
<option value="binary_r" selected>Black & white</option>
<option value="cubehelix">Cubehelix</option>
<option value="afmhot">Lava</option>
<option value="bone">Cool</option></select
><br /><br />
<button id="clickButton" onClick="image()">Generate image</button>
</div>
<div class="subpage-right">
<div class="image-container">
<img
id="image"
src="images/mandelbrot.png"
alt="Image of the Mandelbrot Set"
title="Mandelbrot"
download="mandelbrot.png"
/>
<div id="spinner" class="spinner"></div>
<div id="overlay" class="overlay"></div>
</div>
</div>
</div>
</div>
<footer>
<p>
© 2025 Alexander Mead. Website by
<a href="http://www.jenbayne.com" target="_blank">Jen Bayne</a>.
</p>
</footer>
</div>
</body>
</html>