-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
202 lines (190 loc) · 12.5 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
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
<!doctype html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-V2WNKX643L"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-V2WNKX643L');
</script>
<meta charset='UTF-8'>
<meta name='Description' content='SiteswapSim is an in-browser tool for visualizing juggling patterns by entering in any siteswap.'>
<!---
<link rel="manifest" href="site.webmanifest">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="theme-color" content="#ffffff"> -->
<link rel="icon" href="favicon.ico">
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='jquery-ui-1.12.1/jquery-ui.min.js'></script>
<script src='js/siteswapFuncs.js'></script>
<script src='js/siteswapClass.js'></script>
<script src='js/animation.js'></script>
<script src='js/index.js'></script>
<script src='js/presetEncoding.js'></script>
<link rel='stylesheet' href='jquery-ui-1.12.1/jquery-ui.css'>
<link rel='stylesheet' href='stylesheet.css'>
<!-- <link rel="stylesheet" href="https://stackedit.io/style.css" /> -->
<title>SiteswapSim</title>
</head>
<body style='font-family: Lato'>
<div id='flexContainer'>
<div id='userEntryWrapper' style='width:400px'>
<div id='siteswapEntry'>
<form id='siteswapForm'>
<input type='text' id='siteswapInput' placeholder='siteswap' class='ui-widget-content ui-widget ui-corner-all' autocomplete='off'>
</form>
<div id='siteswapEntryError' class='ui-widget ui-widget-content ui-corner-all'></div>
</div>
<div id='tabs'>
<ul id='tabNames'>
<li id='infoTab'><a href='#info'>Info</a></li>
<li id='presetTab'><a href='#presetOptions'>Preset</a></li>
<li id='optionsTab'><a href='#siteswapOptions'>Options</a></li>
<li id='ladderTab'><a href='#ladderDiagram'>Ladder</a></li>
</ul>
<div id='ladderDiagram'>
<div id='ladderInput'>
<div id='repeatCountOuter'>
<label for='repeatCount' class='ui-widget'># of repeats:</label>
<input id='repeatCount' name='value' type='number' min='1' value='1'>
</div>
<button id='resetLadder' class='ui-button ui-widget ui-corner-all'>reset ladder</button> <!--ui-widget ui-corner-all-->
</div>
<div id='outer'>
<div class='inner' id='lines'>
<canvas id='ladderLines' style='border:1px solid #d3d3d3'></canvas>
</div>
<div class='inner' id='sliders'>
<div id='leftSlider' class='slider'></div>
<div id='rightSlider' class='slider'></div>
</div>
</div>
</div>
<div id='siteswapOptions'>
<button id='restoreDefaults' class='ui-button ui-widget ui-corner-all' title='Reset settings to recommended, realistic values'>Restore Defaults</button>
<form id='siteswapOptionsForm'>
<!-- populated by parseInput -->
</form>
</div>
<div id='presetOptions'>
<h2 id='asdf'>Current preset:</h2>
<div id='currentPresetWrapper'>
<div id='currentPreset' class='presetCard'>
<p class='presetName'><strong>name</strong></p>
<button type="button" class="delete-card ui-button ui-corner-all ui-widget ui-button-icon-only" title="Close">Close</button>
<hr>
<p class='presetSiteswap'>534abcd</p>
<p class='presetDescription'>hey this is a description</p>
</div>
</div>
<div id='presetMenusWrapper'>
<button id='examplePresetButton' class='ui-button ui-widget ui-corner-all'>example presets</button>
<div id='examplePresets' title='Example Presets'></div>
<button id='customPresetButton' class='ui-button ui-widget ui-corner-all'>custom presets</button>
<div id='customPresets' title='Custom Presets'></div>
</div>
<div id='presetInfoWrapper'>
<form id='presetInfoForm'>
<input id='presetName' placeholder='preset name' required='required' class='ui-widget-content ui-widget ui-corner-all' autocomplete='off' maxlength='30'>
<textarea id='presetDescription' placeholder='preset description' class='ui-widget-content ui-widget ui-corner-all' maxlength='140'></textarea>
<div id='presetInfoButtonsWrapper'>
<input id='savePreset' type='submit' value='save preset' class='ui-button ui-widget ui-corner-all' title='create new preset, stored under "custom presets"'>
<input id='updatePreset' type='button' value='update preset' class='ui-button ui-widget ui-corner-all'>
</div>
</form>
</div>
<h2>Share link:</h2>
<div id='presetShareWrapper'>
<div id='presetShareCopyWrapper'>
<input id='presetShareCopyText' class='ui-widget-content ui-widget ui-corner-all'>
<button id='presetShareCopyButton' title='copy share link' class='ui-button ui-widget ui-corner-all'><span class='ui-icon ui-icon-copy'></span></button>
</div>
<form id='presetShareLoadWrapper'>
<input id='presetShareLoadText' class='ui-widget-content ui-widget ui-corner-all' autocomplete='off'>
<input id='presetShareLoadButton' type='submit' value='load from link' title='load preset using share link' class='ui-button ui-widget ui-corner-all'>
</form>
</div>
</div>
<div id='info'>
<div id="accordion">
<h3 id='welcome'>Welcome</h3>
<div>
<h2 id="welcome-to-siteswapsim">Welcome to SiteswapSim!</h2>
<p>SiteswapSim is an in-browser tool for visualizing juggling patterns by entering in any siteswap.</p>
<p>A siteswap is a string of numbers that describes the path the balls make in the air. The video below by Numberphile is a good introduction to how siteswaps work:</p>
<div class="videoWrapper">
<iframe id="introVid" width="346" height="195" src="https://www.youtube-nocookie.com/embed/7dwgusHjA0Y?rel=0" allowfullscreen=""></iframe>
</div>
<p>SiteswapSim allows you to enter in your own siteswaps in the <strong>siteswap input</strong> at the top left of the page, or choose from example siteswaps in the <strong>preset tab</strong> (directly below <strong>siteswap input</strong>). Next, you can edit the timings of this pattern by changing the values on the <strong>options tab</strong>, or by dragging the <em>handles</em> on the <strong>ladder tab</strong>.</p>
</div>
<h3>Preset</h3>
<div>
<h2>Overview</h2>
<p>The <strong>preset tab</strong> allows you to manage presets. A preset stores the siteswap, the siteswap timings entered in on the <strong>siteswap tab</strong>, and the rhythm pattern created on the <strong>ladder tab</strong>. Loading a preset will overwrite anything that is currently unsaved.</p>
<h2>Functionality</h2>
<p>Each preset is represented by a card. The card displays the name of the preset, the siteswap, and a brief description. The cards are separated into two categories: <em>example presets</em>, which are presets given by us to help you understand the capabilities of the website, and <em>custom presets</em>, which are where your presets are stored.</p>
<p>A preset can be saved by giving it a name, and a description if you want, then pressing <em>save preset</em>. This preset will now appear in the <em>custom presets</em> menu. You can modify the currently selected preset (as long as it isn’t an example preset) by pressing <em>update preset</em>.</p>
<p>Your custom presets will be saved in your browser's "local storage". This can be cleared by deleting all the presets, or clearing the cookies for this website.</p>
</div>
<h3>Options</h3>
<div>
<h2>Overview</h2>
<p>The <strong>options tab</strong> allows you to change the rhythm with which throws and catches happen. This tab includes the following options:</p>
<ul>
<li><em>Throw time</em> sets the default time between a throw and the next catch in that hand (this is unintuitive, and will be changed in the future).</li>
<li><em>Dwell limit</em>, <em>throw limit</em>, and <em>speed limit</em> control the minimum spacing between any two events (throw or catch).</li>
<li><em>Speed multiplier</em> changes how fast the pattern plays in the animation.</li>
<li><em>Pace multiplier</em> changes how fast the juggler tries to juggle (faster pace means lower throws).</li>
</ul>
<p>The <em>restore defaults</em> button fills the timing inputs with suggested, realistic values, while the <em>apply changes</em> button will update the <strong>ladder tab</strong> and the animation with the new values.</p>
</div>
<h3>Ladder</h3>
<div>
<h2>Overview</h2>
<p>The <strong>ladder tab</strong> lets you easily visualize the rhythm of the pattern.</p>
<p>On this tab, <em>handles</em> (circles) are displayed on two adjacent <em>sliders</em> (vertical lines). The <em>handles</em> represent a catch or a throw, and the sliders represent the two hands of the juggler.</p>
<p>Balls follow the lines upward through time, travelling between the hands/<em>sliders</em>. A <em>handle</em> at the bottom of a solid vertical line is a catch, while a handle at the top of a solid vertical line is a throw.</p>
<h2>Beats</h2>
<p>There are two disabled <em>handles</em> on the left <em>slider</em> (one at the top and one at the bottom). These represent beat 0 of the pattern. By default, a throw will happen on every beat. You can hover over the <em>handles</em> to see what beat value each handle has.</p>
<p>The timing values entered on the <strong>options tab</strong> are apparent on this tab. The <em>throw time</em> value will set how far apart each <em>throw handle</em> is from the <em>catch handle</em> directly above. The limit values will set the movement restrictions for any given <em>handle</em>. When a <em>handle</em> is dragged out of the acceptable range, it will snap back into place when released.</p>
</div>
<h3>Animation</h3>
<div>
<h2>Overview</h2>
<p>The animation pane is a 2D representation of the juggling pattern. The hands are represented by black circles. You can pan around in the animation by clicking and dragging, and you can zoom in and out with the scroll wheel. You can middle press scroll to return to the default zoom and pan setting.</p>
<p>The <em>speed multiplier</em> option on the <strong>options tab</strong> sets how fast time goes by (higher <em>speed multiplier</em> means fast-forward). The <em>pace multiplier</em> changes how fast the juggler tries to juggle without changing how fast time goes by.</p>
</div>
<h3>Errors</h3>
<div>
<h3>Invalid syntax</h3>
<p>This means that the siteswap you entered has characters in it that cannot be parsed as a siteswap. Siteswaps can include numbers 0-9 and letters a-w. SiteswapSim is also compatible with sync and multiplex patterns. An example sync pattern is (6x,4)*, and an example multiplex pattern is [53]121.</p>
<h3>Invalid pattern</h3>
<p>This means that the siteswap you entered is not valid. It is not actually possible to juggle this pattern. Check out the video in the <em>Welcome</em> section of this tab, and see <a href="http://jugglesensei.net/SiteswapFun1.htm">this webpage</a> for a large list of valid siteswaps (ignore the patterns with parentheses without commas to separate the numbers, we don't follow that notation).</p>
<h3>0 at start</h3>
<p>This means that there is a 0 at the start of your juggling pattern. This is a limitation of the ladder diagram: since there is a <em>handle</em> anchored on beat 0, that means there also must be a throw on beat 0. Simply cycle your pattern by moving the 0 to the end of the pattern.</p>
</div>
<h3>About</h3>
<div>
<h2>Resources used</h2>
<ul>
<li><a href="https://jqueryui.com/">jQuery UI</a> for much of the UI</li>
<li><a href="https://stackedit.io">StackEdit.io</a> to format this information tab</li>
<li><a href="https://pages.github.com/">Github Pages</a> to host this website</li>
<li><a href="http://vanilla-js.com/">Vanilla-JS</a> for everything</li>
</ul>
<p><a href="https://github.com/silso/siteswapsim">Here is a link to the Github repository</a></p>
<h2>Contact</h2>
<p>Email: <a href="mailto:SiteswapSim@gmail.com">SiteswapSim@gmail.com</a></p>
</div>
</div>
</div>
</div>
</div>
<div id='animationWrapper'>
<canvas id='animationCanvas' class='grabbable' oncontextmenu="return false;"></canvas>
</div>
</div>
</body>
</html>