-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (85 loc) · 4.26 KB
/
index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
body {
padding: 0;
margin: 0;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: grey;
color: white;
text-align: center;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.10.0/p5.min.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<div id="parameters" style="width:100%">
<form action="javascript:plotLimitSet();">
<label for="drawing">Choose a predefined drawing:</label>
<select onchange="setPredefinedDrawing();" name="drawing" id="drawing">
<option value="None">None</option>
<option value="fig_7_1">Apollonian gasket (Fig 7.1)</option>
<option value="fig_8_1">Snails (Fig 8.1)</option>
<option value="fig_8_2_5">t_a = t_b = 2.2 (Fig 8.2 (v))</option>
<option value="fig_8_5_3">t_a = t_b = 2+0.5i (Fig 8.3(iii))</option>
<option value="fig_8_11">Spirals (Fig 8.11)</option>
<option value="fig_8_14">Cusp group t_a = 3 (Fig 8.14 right)</option>
<option value="fig_8_15_1">Cusp group t_a = 2+0.05i (Fig 8.15 (i))</option>
<option value="fig_8_15_4">Cusp group t_a = 1.887+0.05i (Fig 8.15 (iv))</option>
<option value="fig_8_23">Triple spiral (Fig 8.23)</option>
<option value="fig_9_1">Double cusp 1/15 (Fig 9.1)</option>
<option value="fig_9_3">Double cusp 2/5 (Fig 9.3)</option>
<option value="fig_9_15_4">Double cusp 2/19 (Fig 9.15 (iv))</option>
<option value="fig_11_1">Non-free with (abAB)^2 = 1 (Fig 11.1)</option>
<option value="fig_11_3">Non-free with (abAB)^2 = 1 (Fig 11.3 top)</option>
<option value="fig_11_4">a^10 = b^10 = 1 (Fig 11.4)</option>
<option value="doubly_parabolic_-1">t_a=2, t_b=2, t_[a,b]=-1</option>
<option value="doubly_parabolic_1">t_a=2, t_b=2, t_[a,b]=1</option>
</select>
or enter parameters directly below. Then click <input type="submit" id="submit" value="Plot!">
<br>
ta: <input type="text" id="taRe" size="6" placeholder="re ta">
+ i <input type="text" id="taIm" size="6" placeholder="im ta">
tb: <input type="text" id="tbRe" size="6" placeholder="re tb">
+ i <input type="text" id="tbIm" size="6" placeholder="im tb">
tabAB: <input type="text" id="tabAB" size="3" value="-2">
sign: <input type="radio" name="sign" id="plusSign" checked><label for="plusSign">+</label>
<input type="radio" name="sign" id="minusSign"><label for="minusSign">-</label>
special words: <input type="text" id="specialWords" pattern=" *([abAB]+[, ]*)*" placeholder="special parabolic words" title="Enter a comma separated list of words in a,b,A,B">
<br>
<label for="xMin">x range:</label>
<input type="text" size="6" id="xMin">
<label for="xMax">to</label>
<input type="text" size="6" id="xMax">
<label for="yMin">y range:</label>
<input type="text" size="6" id="yMin">
<label for="yMax">to</label>
<input type="text" size="6" id="yMax">
<label for="terminationThreshold">Epsilon:</label><input type="text" size="6" id="terminationThreshold">
<label for="maxDepth">Max depth:</label><input type="number" size="6" id="maxDepth" min="1">
<label for="fsa">FSA:</label>
<select name="fsa" id="fsa">
<option value="none">None</option>
<option value="comm2">(abAB)^2=1</option>
<option value="two10">a^10=b^10=1</option>
<option value="comm3">(abAB)^3=1</option>
<option value="comm3b">(abAB)^3=1, ...</option>
</select>
<br>
To understand the mathematics behind this, see the book <a href="http://klein.math.okstate.edu/IndrasPearls/">Indra's Pearls</a> (figure references in the predefined drawings come from that book).
</form>
</div>
<div class="footer">
Questions or comments? Email Ted Hwa at <a href="mailto:[email protected]">[email protected]</a>.
<A HREF="https://github.com/hwatheod/once-punctured-torus">Github repository</A> for this page.
</div>
</body>
</html>