-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
183 lines (170 loc) · 14.3 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
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@Grammarphone">
<meta name="twitter:title" content="LSystem fractal based Audio Visualization Editor">
<meta name="twitter:description" content="I wrote many lines of code, so you only need to write one. Current Version: Beta Charcoal.">
<meta name="twitter:creator" content="@Winchestro">
<meta name="twitter:image:src" content="http://www.winchestro.com/grammarphone/img/version.png">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel='stylesheet' type="text/css" href='css/spectrum.css' />
<link rel='stylesheet' type="text/css" href='css/audioplayer.css' />
<link rel='stylesheet' type="text/css" href='css/keyboard.css' />
<link rel='stylesheet' type="text/css" href='scripts/jquery-ui-1.11.1/jquery-ui.css' />
<link rel='stylesheet' type="text/css" href='scripts/jquery-ui-1.11.1/jquery-ui.structure.css' />
<link rel='stylesheet' type="text/css" href='scripts/jquery-ui-1.11.1/jquery-ui.theme.css' />
<link rel="icon" type="image/png" sizes="16x16" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAGDSURBVCjPVZC9S1thFMZ/533f3HvxJmISImraFFqwIhRpias6FdQiLSWFQJdCO5SW4n/gXBAHJ5dO/gMKluLg5iTapSBKBxH8GGJJaHqLubl53w5JQc9whvN8nIdHuDnDzGGI2aL2/2QAmMDx03s1/3TypUq1480H+8s0biqrVJgvNvecc879de9i9SFzywEg9MKIRRQxv1JBRt8iCMAjRnnMfU45Z2e8MdB9okqkK4WPIkQ68lmgyAJjxM8pd7V6iavXz6oHG50tcuXyD72G8IUzX5fiXVV3qAweITKr+o9W318aVkg4Ik8wIy8EMJ+pXZwnhWozaXw79j9xhxoOhe3lE+BesF146HWitvOtGAYQ6jRobds3XGogsaO23K9Ck5YMfQhtfuORG2l9Tw7NEM3ZbAXqaAwBij9EBBRRfc238tWkiZ4U8j416sRcI4Tk8dB0IAXmZGpwWoAcuV53gsVy3W0Pk10fuis4hDYGEFp0AFDdrUtGImIEsCiSHuywAPwDYjB4OBAMtzcAAAAldEVYdGRhdGU6Y3JlYXRlADIwMTQtMDUtMjRUMTc6MjU6NTcrMDI6MDBhKPD/AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDE0LTA1LTI0VDE3OjI1OjU3KzAyOjAwEHVIQwAAAABJRU5ErkJggg==">
</head>
<body>
<div class = "canv overlay"></div>
<canvas id="canvas2d"></canvas>
<div id="interface">
<div class="head">
<input id="LSInput" type="text" autocomplete="off" placeholder="add a replacement rule (example: L=LL)" value="loading ...">
</div>
<div class="menu">
<div class="menuhead">
<input type="number" class="inputContainer" id="LSIter" type="range" min="0" max="20" value="0"/>
<button id="btnGallery" class="tab uiBG">
<svg class="button" width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
<path d="M 64.00,128.00l0.00,320.00 l 448.00,0.00 L 512.00,128.00 L 64.00,128.00 z M 480.00,394.667L 416.00,288.00l-72.533,60.444L 288.00,256.00L 96.00,416.00L 96.00,160.00 l 384.00,0.00 L 480.00,394.667 zM 128.00,240.00A48.00,48.00 7560.00 1,0 224.00,240A48.00,48.00 7560.00 1,0 128.00,240zM 448.00,64.00L0.00,64.00L0.00,384.00L 32.00,384.00L 32.00,96.00L 448.00,96.00 z" >
</path>
</svg>
</button>
<button id="btnKeys" class="tab uiBG">
<svg class="button" width="16" height="16" viewBox="0 0 576 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
<path d="M 544.00,64.00L 32.00,64.00 C 14.40,64.00,0.00,78.40,0.00,96.00l0.00,320.00 c0.00,17.60, 14.40,32.00, 32.00,32.00l 512.00,0.00 c 17.60,0.00, 32.00-14.40, 32.00-32.00L 576.00,96.00 C 576.00,78.40, 561.60,64.00, 544.00,64.00z M 320.00,128.00 l 64.00,0.00 l0.00,64.00 l-64.00,0.00 L 320.00,128.00 z M 416.00,224.00l0.00,64.00 l-64.00,0.00 l0.00-64.00 L 416.00,224.00 z M 224.00,128.00l 64.00,0.00 l0.00,64.00 l-64.00,0.00 L 224.00,128.00 z M 320.00,224.00l0.00,64.00 l-64.00,0.00 l0.00-64.00 L 320.00,224.00 z M 128.00,128.00l 64.00,0.00 l0.00,64.00 l-64.00,0.00 L 128.00,128.00 z M 224.00,224.00l0.00,64.00 l-64.00,0.00 l0.00-64.00 L 224.00,224.00 z M 64.00,128.00l 32.00,0.00 l0.00,64.00 L 64.00,192.00 L 64.00,128.00 z M 64.00,224.00l 64.00,0.00 l0.00,64.00 L 64.00,288.00 L 64.00,224.00 z M 96.00,384.00L 64.00,384.00 l0.00-64.00 l 32.00,0.00 L 96.00,384.00 z M 384.00,384.00L 128.00,384.00 l0.00-64.00 l 256.00,0.00 L 384.00,384.00 z M 512.00,384.00l-96.00,0.00 l0.00-64.00 l 96.00,0.00 L 512.00,384.00 z M 512.00,288.00l-64.00,0.00 l0.00-64.00 l 64.00,0.00 L 512.00,288.00 z M 512.00,192.00l-96.00,0.00 l0.00-64.00 l 96.00,0.00 L 512.00,192.00 z" >
</path>
</svg>
</button>
<button id="btnMusic" class="tab uiBG">
<svg class="button" width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
<path d="M 160.00,96.00 L 512.00,0.00 L 512.00,32.00 L 512.00,96.00 L 512.00,368.00 C 512.00,412.183 461.855,448.00 400.00,448.00 C 338.145,448.00 288.00,412.183 288.00,368.00 C 288.00,323.817 338.145,288.00 400.00,288.00 C 417.179,288.00 433.451,290.766 448.00,295.703 L 448.00,130.909 L 224.00,192.00 L 224.00,432.00 C 224.00,476.183 173.856,512.00 112.00,512.00 C 50.144,512.00 0.00,476.183 0.00,432.00 C 0.00,387.817 50.144,352.00 112.00,352.00 C 129.179,352.00 145.451,354.766 160.00,359.703 L 160.00,192.00 L 160.00,96.00 Z" >
</path>
</svg>
</button>
<button id="btnOptions" class="tab uiBG">
<svg class="button" width="16" height="16" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#000000">
<path d="M 224.00,64.00l0.00-8.00 c0.00-13.20-10.80-24.00-24.00-24.00l-80.00,0.00 c-13.20,0.00-24.00,10.80-24.00,24.00l0.00,8.00 L0.00,64.00 l0.00,64.00 l 96.00,0.00 l0.00,8.00 c0.00,13.20, 10.80,24.00, 24.00,24.00l 80.00,0.00 c 13.20,0.00, 24.00-10.80, 24.00-24.00l0.00-8.00 l 288.00,0.00 L 512.00,64.00 L 224.00,64.00 z M 128.00,128.00L 128.00,64.00 l 64.00,0.00 l0.00,64.00 L 128.00,128.00 zM 416.00,216.00c0.00-13.20-10.80-24.00-24.00-24.00l-80.00,0.00 c-13.20,0.00-24.00,10.80-24.00,24.00l0.00,8.00 L0.00,224.00 l0.00,64.00 l 288.00,0.00 l0.00,8.00 c0.00,13.20, 10.80,24.00, 24.00,24.00l 80.00,0.00 c 13.20,0.00, 24.00-10.80, 24.00-24.00l0.00-8.00 l 96.00,0.00 l0.00-64.00 l-96.00,0.00 L 416.00,216.00 z M 320.00,288.00l0.00-64.00 l 64.00,0.00 l0.00,64.00 L 320.00,288.00 zM 224.00,376.00c0.00-13.20-10.80-24.00-24.00-24.00l-80.00,0.00 c-13.20,0.00-24.00,10.80-24.00,24.00l0.00,8.00 L0.00,384.00 l0.00,64.00 l 96.00,0.00 l0.00,8.00 c0.00,13.20, 10.80,24.00, 24.00,24.00l 80.00,0.00 c 13.20,0.00, 24.00-10.80, 24.00-24.00l0.00-8.00 l 288.00,0.00 l0.00-64.00 L 224.00,384.00 L 224.00,376.00 z M 128.00,448.00l0.00-64.00 l 64.00,0.00 l0.00,64.00 L 128.00,448.00 z" >
</path>
</svg>
</button>
</div>
<div class="menubody" style="display:none">
<div id="tabOptions" class="ui row tab uiBG" style="display:flex">
<div class="options container" >
<svg title="[Left/Right Arrow Key] Click center to round down" class="angle container" xmlns="http://www.w3.org/2000/svg" version="1.1"viewBox="0 0 512 512">
<ellipse class="angle clickable" cx="256" cy="256" rx="256" ry="256"></ellipse>
<text class="angle description" x="256" y="256"></text>
</svg>
<div class="color container">
<input tabindex="6" id="clearColor" type="color" value="#08103b"/>
<input tabindex="7" id="plantColor" type="color" value="#000000"/>
</div>
<svg title="[Mouse Wheel] Click center to reset panning (Drag on canvas)" class="zoom container" xmlns="http://www.w3.org/2000/svg" version="1.1"viewBox="0 0 512 512">
<ellipse class="zoom clickable" cx="256" cy="256" rx="256" ry="256"></ellipse>
<path class="zoom symbol" d="M 496.131,435.698L 374.855,332.551c-12.537-11.283-25.945-16.463-36.776-15.963C 366.707,283.054, 384.00,239.549, 384.00,192.00 C 384.00,85.961, 298.039,0.00, 192.00,0.00C 85.962,0.00,0.00,85.961,0.00,192.00c0.00,106.039, 85.961,192.00, 192.00,192.00c 47.549,0.00, 91.054-17.293, 124.588-45.922 c-0.50,10.831, 4.68,24.239, 15.963,36.776l 103.147,121.276c 17.661,19.623, 46.511,21.277, 64.11,3.678S 515.754,453.359, 496.131,435.698 z M 192.00,320.00c-70.692,0.00-128.00-57.308-128.00-128.00S 121.308,64.00, 192.00,64.00s 128.00,57.308, 128.00,128.00S 262.693,320.00, 192.00,320.00zM 224.00,96.00L 160.00,96.00L 160.00,160.00L 96.00,160.00L 96.00,224.00L 160.00,224.00L 160.00,288.00L 224.00,288.00L 224.00,224.00L 288.00,224.00L 288.00,160.00L 224.00,160.00 z" ></path>
<text class="zoom description" x="256" y="256">0.80</text>
</svg>
</div>
</div>
<div id="tabKeys" class="ui row tab uiBG" style="display:flex">
<div class="ui group">
<span>Symbol Bindings</span>
</div>
<div class="ui group">
<span>Line</span>
<input id="keysLine" type="text" readonly value="I 1 i L l F f">
</div>
<div class="ui group">
<span>Fruit</span>
<input id="keysFruit" type="text" readonly value="O * o">
</div>
<div class="ui group">
<span>Hidden Line</span>
<input id="keysHidden" type="text" readonly value="H 0 h">
</div>
<div class="ui group">
<span>Antenna</span>
<input id="keysAntenna" type="text" readonly value="S 3 s">
</div>
<div class="ui group">
<span>Tentacle</span>
<input id="keysTentacle" type="text" readonly value="W 5 w">
</div>
<div class="ui group">
<span>Rotate Left</span>
<input id="keysLeft" type="text" readonly value="+ 4 d">
</div>
<div class="ui group">
<span>Rotate Right</span>
<input id="keysRight" type="text" readonly value="- 6 b">
</div>
<div class="ui group">
<span>Scale Up</span>
<input id="keysUp" type="text" readonly value="< 8 u">
</div>
<div class="ui group">
<span>Scale Down</span>
<input id="keysDown" type="text" readonly value="> 2 n">
</div>
<div class="ui group">
<span>Push Transform</span>
<input id="keysPush" type="text" readonly value="[ 7 q ( {">
</div>
<div class="ui group">
<span>Pop Transform</span>
<input id="keysPop" type="text" readonly value="] 9 p ) }">
</div>
</div>
<div id="tabMusic" class="ui row tab uiBG" style="display:flex">
<div class="controls">
<svg title="TimeDomain/Frequency" class="analyser container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
<ellipse class="analyser clickable" cx="256" cy="256" rx="256" ry="256"></ellipse>
<path class="analyser symbol stateA" d="M0.00,416.00L 512.00,416.00L 512.00,480.00L0.00,480.00zM 64.00,288.00L 128.00,288.00L 128.00,384.00L 64.00,384.00zM 160.00,160.00L 224.00,160.00L 224.00,384.00L 160.00,384.00zM 256.00,256.00L 320.00,256.00L 320.00,384.00L 256.00,384.00zM 352.00,64.00L 416.00,64.00L 416.00,384.00L 352.00,384.00z" ></path>
<path class="analyser symbol stateB" d="M 144.00,192.00L 48.00,192.00 c-8.80,0.00-16.00,7.20-16.00,16.00l0.00,288.00 c0.00,8.80, 7.20,16.00, 16.00,16.00l 96.00,0.00 c 8.80,0.00, 16.00-7.20, 16.00-16.00L 160.00,208.00 C 160.00,199.20, 152.80,192.00, 144.00,192.00z M 144.00,480.00 L 48.00,480.00 L 48.00,352.00 l 96.00,0.00 L 144.00,480.00 zM 304.00,128.00l-96.00,0.00 c-8.80,0.00-16.00,7.20-16.00,16.00l0.00,352.00 c0.00,8.80, 7.20,16.00, 16.00,16.00l 96.00,0.00 c 8.80,0.00, 16.00-7.20, 16.00-16.00L 320.00,144.00 C 320.00,135.20, 312.80,128.00, 304.00,128.00z M 304.00,480.00l-96.00,0.00 L 208.00,320.00 l 96.00,0.00 L 304.00,480.00 zM 464.00,64.00l-96.00,0.00 c-8.80,0.00-16.00,7.20-16.00,16.00l0.00,416.00 c0.00,8.80, 7.20,16.00, 16.00,16.00l 96.00,0.00 c 8.80,0.00, 16.00-7.20, 16.00-16.00L 480.00,80.00 C 480.00,71.20, 472.80,64.00, 464.00,64.00z M 464.00,480.00l-96.00,0.00 L 368.00,288.00 l 96.00,0.00 L 464.00,480.00 z" ></path>
<text class="analyser description" x="256" y="256">0.80</text>
</svg>
<svg class="play container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
<ellipse class="play clickable" cx="256" cy="256" rx="256" ry="256"></ellipse>
<path class="play symbol" d="M 192.00,144.00L 384.00,256.00L 192.00,368.00 z" ></path>
<text class="play description" x="256" y="256">00:00</text>
</svg>
<svg title="Drop files to add" class="files container" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 512 512">
<ellipse class="files clickable" cx="256" cy="256" rx="256" ry="256" fill="transparent" stroke="black"></ellipse>
<path class="files symbol stateA" d="M 0.00,160.00 L 512.00,160.00 L 480.00,480.00 L 32.00,480.00 L 0.00,160.00 Z M 464.00,96.00 L 480.00,128.00 L 32.00,128.00 L 64.00,64.00 L 240.00,64.00 L 256.00,96.00 L 464.00,96.00 Z" ></path>
<path class="files symbol stateB" d="M 416.00,480.00L 512.00,224.00L 96.00,224.00L0.00,480.00 zM 64.00,192.00 L 0.00,480.00 L 0.00,64.00 L 144.00,64.00 L 208.00,128.00 L 416.00,128.00 L 416.00,192.00 Z" ></path>
</svg>
</div>
<div class="playlist container">
<button id="pickFile">+</button>
</div>
</div>
<div id="tabGallery" class="ui row tab uiBG" style="display:flex">
Sorry, couldn't load the Gallery (jet?)
</div>
</div>
</div>
</div>
<div style="display:none">
<div class="ui group">
<span id="LSIterOut" data-prefix="Iterations"></span>
<input tabindex="10" />
</div>
<span id="LSZoomOut" data-prefix="Zoom"></span>
<input id="LSSize" type="range" min="1" max="100" step="1" value="34"/>
<span id="LSAngleOut" data-prefix="Angle" data-suffix="°"></span>
<input id="LSAngle" type="range" min="0" max="18000" value="4500"/>
<input id="VisTimeDomain" type="radio" name="Vis" checked>
<input id="VisFrequency" type="radio" name="Vis">
<input id="VisSmoothing" type="range" min="0" max="0.99" step="0.01" value="0.8"/>
<span id="LSSmoothAmount"></span>
<input id="filePicker" multiple type="file"/>
</div>
<script data-main="scripts/demo" src="scripts/require.js"></script>
</body>
</html>