-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
117 lines (77 loc) · 3.53 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
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
<!DOCTYPE html>
<html>
<head>
<title>Spiral Generator</title>
<link href="http://fonts.googleapis.com/css?family=Lato:400italic,900italic" rel="stylesheet" />
<link href="styles.css" rel="stylesheet" />
<script src="spiralgen.js"></script>
</head>
<body>
<div class="wrapper">
<h1>Spiral Generator <span>by <a href="http://andygrn.co.uk">Andy Green</a></span></h1>
<canvas id="canvas" width="956" height="536">
<p>Your browser doesn't support canvas, so you won't see anything. Update your software and we might be in business!</p>
</canvas>
<div id="compatibility-message">
<p>Unfortunately, your browser doesn't support range slider inputs, so you'll have to change the parameters yourself. Click on the black numbers below and type your own. There's no restriction, so you might break it!</p>
</div>
<fieldset id="controls">
<legend>Controls</legend>
<button id="control-draw">Draw</button>
<button id="control-save">Save</button>
<button id="control-clear">Clear</button>
</fieldset>
<fieldset id="params-spiral">
<legend>Spiral Shape</legend>
<div>
<label for="param-spiral-sharpness">Sharpness</label>
<input id="param-spiral-sharpness" type="range" value="35" step="1" min="1" max="50" />
<span id="param-spiral-sharpness-value"></span>
</div>
<div>
<label for="param-spiral-length">Length</label>
<input id="param-spiral-length" type="range" value="380" step="50" min="50" max="1000" />
<span id="param-spiral-length-value"></span>
</div>
<div>
<label for="param-spiral-inner-radius">Inner Radius</label>
<input id="param-spiral-inner-radius" type="range" value="7" step="1" min="0" max="10" />
<span id="param-spiral-inner-radius-value"></span>
</div>
<div>
<label for="param-spiral-outer-radius">Outer Radius</label>
<input id="param-spiral-outer-radius" type="range" value="5" step="1" min="1" max="10" />
<span id="param-spiral-outer-radius-value"></span>
</div>
<div>
<label for="param-spiral-spread">Spread</label>
<input id="param-spiral-spread" type="range" value="2" step="1" min="0" max="10" />
<span id="param-spiral-spread-value"></span>
</div>
</fieldset>
<fieldset id="params-line">
<legend>Line Appearance</legend>
<div>
<label for="param-line-initial-opacity">Initial Opacity</label>
<input id="param-line-initial-opacity" type="range" value="5" step="1" min="1" max="10" />
<span id="param-line-initial-opacity-value"></span>
</div>
<div>
<label for="param-line-fade-amount">Fade Amount</label>
<input id="param-line-fade-amount" type="range" value="2" step="1" min="0" max="10" />
<span id="param-line-fade-amount-value"></span>
</div>
<div>
<label for="param-line-thickness">Thickness</label>
<input id="param-line-thickness" type="range" value="1" step="1" min="1" max="10" />
<span id="param-line-thickness-value"></span>
</div>
</fieldset>
<footer>
<p>Built with Javascript and canvas. Source code can be found <a href="http://github.com/andygrn/Spiral-Generator">here</a>. Enjoy!</p>
<p>To get the best experience, use the latest version of <a href="http://www.opera.com/download/">Opera</a>, <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://www.apple.com/safari/">Safari</a>.</p>
</footer>
</div>
<script> init(); </script>
</body>
</html>