-
Notifications
You must be signed in to change notification settings - Fork 8
/
studio.html
355 lines (291 loc) · 11.9 KB
/
studio.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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
<html>
<head>
<title>Video Feedback</title>
<style>
html, body { width: 100%; height: 100%; margin: 0; }
canvas { width: 100%; height: 100%; display: block }
</style>
<!-- Safari full screen tag -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Chrome (Android) full screen tag -->
<meta name="mobile-web-app-capable" content="yes">
<link rel="icon" sizes="192x192" href="app/icon.png">
<link rel="manifest" href="app/manifest.json">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script src="js/libs/three.js"></script>
<script src="js/libs/jscolor.min.js"></script>
<script src="js/libs/FileSaver.min.js"></script>
<script src="js/libs/jszip.min.js"></script>
<script src="js/libs/canvas-toBlob.js"></script>
<script src="js/libs/stats.min.js"></script>
<script src="js/libs/PointerLockControls.js"></script>
<script src="js/libs/DeviceOrientationControls.js"></script>
<script src="js/libs/StereoEffect.js"></script>
<script src="js/postprocessing/EffectComposer.js"></script>
<script src="js/postprocessing/RenderPass.js"></script>
<script src="js/postprocessing/ShaderPass.js"></script>
<script src="js/postprocessing/ClearPass.js"></script>
<script src="js/postprocessing/MaskPass.js"></script>
<script src="js/shaders/CopyShader.js"></script>
<script src="js/shaders/ColorShader.js"></script>
<script src="js/shaders/ColorIncrementShader.js"></script>
<script src="js/shaders/RayTracingShader.js"></script>
<script src="js/shaders/SymmetryShader.js"></script>
<script src="js/shaders/RGBShiftShader.js"></script>
<script src="js/LayerZ.js"></script>
<script src="js/RayTracingRenderer.js"></script>
<script src="js/ColorPaletteTexture.js"></script>
<script src="js/ColorPaletteController.js"></script>
<script src="js/Controls3D.js"></script>
<script src="js/LNextra.js"></script>
<script src="js/NonUserInputKeyHandler.js"></script>
<script src="js/libs/UserInput.js"></script>
<script src="js/video-feedback.js"></script>
<script src="js/StateNugget.js"></script>
<script src="js/Application.js"></script>
<script src="js/ImageUtilities.js"></script>
<script src="js/DefaultAppStates.js"></script>
<script src="main.js"></script>
<style media="screen" type="text/css">
.body {
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
border: 0px;
}
.container {
position: absolute;
top: 0px;
left: 0px;
}
.toolbarInstruction {
padding-top: 5px;
padding-bottom: 5px;
}
.toolbarRange {
padding-top: 5px;
padding-bottom: 5px;
}
.toolbarButton {
padding-top: 5px;
padding-bottom: 5px;
}
.toolbarCheckbox {
padding-top: 10px;
padding-bottom: 10px;
color: #DDDDDD;
}
.toolbarColor {
padding-top: 10px;
padding-bottom: 5px;
color: #DDDDDD;
text-align: center;
}
.inputColor {
height: 3em;
width: 80%;
}
.toolbarDivider {
width: 80%;
text-align: center;
}
.toolbar {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
padding: 0px;
border: 0px;
display: block;
position: absolute;
opacity: 0.9;
top: 5%;
height: 95%;
width: 200px;
right: 0px;
text-align: center;
background-color: #000000;
color: #DDDDDD;
font-size: 12px;
z-index: 1002;
overflow: auto;
}
.toggleToolbar {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none;
padding: 0px;
border: 0px;
display: block;
position: absolute;
opacity: 0.9;
top: 0px;
right: 0px;
height: 5%;
width: 5%;
text-align: center;
vertical-align: middle;
background-color: #000000;
color: #DDDDDD;
font-size: 20px;
z-index: 1002;
}
.black_overlay{
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1019;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
.white_content {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid cornflowerblue;
background-color: white;
z-index:1020;
overflow: auto;
}
</style>
<div id="about" style="display:none">
<div id="aboutFade" class="black_overlay" onclick='hideAbout()'></div>
<div id="aboutLight" class="white_content">
<a href="http://www.theseasquirt.com/2016/04/video-feedback-simulator.html" target="_blank">About</a>
<br /><br />
<b>Getting Started</b>
<br />
<ul>
<li>Skim the "About" link above for a rough overview</li>
<li>Try selecting patterns from the "Select State" dropdown box and panning/rotating a little bit around each one</li>
<li>Try to keep track of the outermost border that seems to "follow" your input, though this can be a little bit confusing when mirror effects are turned on</li>
<li>The system is very sensitive to zooming, and tends to work best near the initial zoom level</li>
<li>Hit "Cycle Inputs" for a quick tour through some of the pre-configured states</li>
<li>If you get lost, just hit "Reset Position" to return to the default configuration</li>
<li>If the main canvas stops responding, make sure that you haven't paused the rendering (try clicking on the main canvas and hitting "P")</li>
<li>We are quite far from bug-free. Feel free to contact us about any significant impediments to your having fun (see below).</li>
</ul>
<br /><br />
<b>Settings</b>
<br />
<table style="width:100%">
<tr>
<td>Reset Position</td>
<td>Move the "TV" to its default orientation</td>
</tr>
<tr>
<td>Download Image</td>
<td>Downlaod the current canvas as a PNG image</td>
</tr>
<tr>
<td>Select State</td>
<td>Jump to a pre-specified state (may change color/other settings)</td>
</tr>
<tr>
<td>Save State</td>
<td>Save current configuration to dropdown list</td>
</tr>
<tr>
<td>Cycle Inputs</td>
<td>Move linearly from one state to another random state in the dropdown list</td>
</tr>
<tr>
<td>Stop Cycle</td>
<td>Stop the cycling process</td>
</tr>
<tr>
<td>Cycle Speed</td>
<td>Change the cycling speed through states</td>
</tr>
<tr>
<td>Set Portal To Window</td>
<td>Remove "dead space" around the edge of the screen after resizing window</td>
</tr>
<tr>
<td>Set Portal Aspect Ratio</td>
<td>Enforce an aspect ratio for the feedback camera regardless of canvas size</td>
</tr>
<tr>
<td>Invert _</td>
<td>Invert one axis of the feedback camera on each iteration</td>
</tr>
<tr>
<td>Mirror _</td>
<td>Mirror each iteration across a straight line</td>
</tr>
<tr>
<td>Invert Color</td>
<td>Invert the colors on each iteration</td>
</tr>
<tr>
<td>Far Out</td>
<td>Spread out the RGB components of each pixel</td>
</tr>
<tr>
<td>Delay</td>
<td>Change the lag between each iteration</td>
</tr>
<tr>
<td>Color Cycle</td>
<td>Change the amount of hue shift between iterations</td>
</tr>
<tr>
<td>Gain</td>
<td>Change the amount of saturation increase between iterations</td>
</tr>
<tr>
<td>Border Width</td>
<td>Change the width of the border around the "TV"</td>
</tr>
<tr>
<td>Border Color</td>
<td>Change the starting border color</td>
</tr>
<tr>
<td>Background Color</td>
<td>Change the starting background color</td>
</tr>
</table>
<br /><br />
<b>Other</b>
<br />
<ul>
<li>Mobile users may have issues with touch-based features. So sorry! If you think you can help us then drop us an email.</li>
<li>Contact: Please contact (Alex) through the email listed at github.com/aljaball</li>
</ul>
</div>
</div>
<div id="simulation">
<canvas id="simulation-canvas"></canvas>
</div>
<div id="toggleToolbar" class="toggleToolbar" onclick="toggleToolbar()">⚙</div>
<div id="toolbar" class="toolbar">
<!-- instructions & options added dynamically here -->
</div>
<script>
initializeEventListeners();
nonUserInputKeyHandler.init();
init();
RayTracingShader.defines.WRAP_PORTAL = 1;
app.state3d.controlsController.setMode(true, true);
vfr.play();
render();
</script>
<script src="js/libs/Toolbar.js"></script>
</body>
</html>