-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathprofessional.html
103 lines (94 loc) · 5.03 KB
/
professional.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" type="text/css" href="./professional.css">
<script src="./professional.js"></script>
<title>Siteswap Art</title>
</head>
<body>
<nav id="top">
<span><a href="./simple.html">Simple</a></span>
<span><a href="./standard.html">Standard</a></span>
<span>Professional</span>
<span><a href="./gallery/">Gallery</a></span>
</nav>
<article>
<h1>Siteswap Art - Professional version</h1>
<div class="table" id="input">
<div class="row">
<div class="cell"><label for="pattern">Pattern</label></div>
<div class="cell"><input type="text" id="pattern" value="3"></div>
</div>
</div>
<table>
<tr>
<td> </td>
<td><input type="range" id="width" min="100" max="990" step="10" value="300"></td>
<td><input type="text" id="width_value" value="300"></td>
</tr>
<tr>
<td class="ceil"><input type="range" orient="vertical" id="height" min="100" max="990" step="10" value="300"></td>
<td><canvas id="board" width="300" height="300"></canvas></td>
<td> </td>
</tr>
<tr>
<td><input type="text" id="height_value" value="300"></td>
<td class="coordinate">Center <span id="center">(0,0)</span></td>
<td> </td>
</tr>
</table>
<div class="table" id="config">
<div class="row">
<div class="cell"><label for="count_value">Number of segments</label></div>
<div class="cell"><input type="range" id="count" min="0" max="36" step="1" value="19"></div>
<div class="cell"><input type="text" id="count_value" value="200"></div>
</div>
<div class="row">
<div class="cell"><label for="constant_value">Increase in length (C)</label></div>
<div class="cell"><input type="range" id="constant" min="-27" max="27" step="1" value="0"></div>
<div class="cell"><input type="text" id="constant_value" value="1"></div>
</div>
<div class="row">
<div class="cell"><label for="delta_value">Increase in angle (D)</label></div>
<div class="cell"><input type="range" id="delta" min="-180" max="180" step="1" value="10"></div>
<div class="cell"><input type="text" id="delta_value" value="10"></div>
</div>
<div class="row">
<div class="cell"><label for="color_init">Initial color value</label></div>
<div class="cell">#<input type="text" id="color_init" value="000000"></div>
</div>
<div class="row">
<div class="cell"><label for="color_step">Increase in color</label></div>
<div class="cell">#<input type="text" id="color_step" value="000000"></div>
</div>
</div>
<section>
<h2>Formulas for drawing</h2>
<div class="table" id="formula">
<div class="row head">
<div class="cell">type</div>
<div class="cell">polar coordinate</div>
<div class="cell">rectangular coordinate</div>
</div>
<div class="row">
<div class="cell key"><input type="radio" id="spiral" name="method" value="spiral" checked="checked"><label for="spiral">vortex</label></div>
<div class="cell formula">r<sub><span>0</span></sub> <span>=</span> <span>0</span>, r<sub>i</sub> <span>=</span> r<sub>i <span>−</span> <span>1</span></sub> <span>+</span> C<br>θ<sub><span>0</span></sub> <span>=</span> <span>0</span>, θ<sub>i</sub> <span>=</span> θ<sub>i <span>−</span> <span>1</span></sub> <span>+</span> a<sub>i</sub> <span>×</span> D</div>
<div class="cell formula">x<sub>i</sub> <span>=</span> r<sub>i</sub> <span>×</span> <span>cos</span> θ<sub>i</sub><br>y<sub>i</sub> <span>=</span> r<sub>i</sub> <span>×</span> <span>sin</span> θ<sub>i</sub></div>
</div>
<div class="row">
<div class="cell key"><input type="radio" id="screw" name="method" value="screw"><label for="screw">spiral projection</label></div>
<div class="cell formula">r<sub>i</sub> <span>=</span> C<br>θ<sub>i</sub> <span>=</span> a<sub>i</sub> <span>×</span> D</div>
<div class="cell formula">x<sub><span>0</span></sub> <span>=</span> <span>0</span>, x<sub>i</sub> <span>=</span> x<sub>i <span>−</span> <span>1</span></sub> <span>+</span> r<sub>i</sub> <span>×</span> <span>cos</span> θ<sub>i</sub><br>y<sub><span>0</span></sub> <span>=</span> <span>0</span>, y<sub>i</sub> <span>=</span> y<sub>i <span>−</span> <span>1</span></sub> <span>+</span> r<sub>i</sub> <span>×</span> <span>sin</span> θ<sub>i</sub></div>
</div>
<div class="row">
<div class="cell key"><input type="radio" id="spectral" name="method" value="spectral"><label for="spectral">spectrum</label></div>
<div class="cell">(not applicable)</div>
<div class="cell formula">x<sub><span>0</span></sub> <span>=</span> <span>0</span>, x<sub>i</sub> <span>=</span> i <span>×</span> C<br>y<sub><span>0</span></sub> <span>=</span> <span>0</span>, y<sub>i</sub> <span>=</span> a<sub>i</sub> <span>×</span> D</div>
</div>
</div>
</section>
</article>
</body>
</html>