-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathhelpMenu.html
More file actions
185 lines (163 loc) · 8.69 KB
/
helpMenu.html
File metadata and controls
185 lines (163 loc) · 8.69 KB
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
<!-- Help Button -->
<div id="helpButton">+</div>
<!-- Pop-up Menu -->
<div id="helpPopup" class="hidden">
<div class="helpContent">
<span id="closeHelp">×</span>
<!-- -------------- -->
<!-- Page 1 -->
<div class="helpPage" id="page1">
<h3> Acerca del TransMit (The Spanglish version) </h3>
<p> TransMit is a live video programming language con una sintaxis culturalmente situada en Spanglish —osease una mix lingüística que refleja tanto las prácticas tecnológicas contemporáneas como las hybrid identities de quienes la usan. Aquí, live-codeamos como hablamos: todo cortado y torturado. </p>
<p> TransMit corre as web-based application, que fue developed en Purescript integrando la librería Three.js para rendering gráfico en 3D. En esta application, es posible mapear video sobre objetos tridimensionales como planes, cubes, spheres, y esos poliedros que suenan más a geometría avanzada que a arte visual (pero son ambos).</p>
<p>Cada objeto viene con sus propios mapping settings, pa'una variedad de visual effects e interactions. En otras palabras: tú le das las instrucciones, y TransMit te devuelve arte audiovisual en movimiento. Critical code meets visual performance, con un twist bicultural.</p>
<h3> About TransMit (The boring version)</h3>
<p>TransMit is a programming language for live video with a culturally situated syntax in Spanglish.</p>
<p>TransMit runs as a web application and was implemented in Purescript using Three.js library. With TransMit, you can play video by mapping it onto 3D objects such as planes, cubes, spheres, and polyhedrons. Each object offers distinct mapping settings, allowing for varied visual effects and interactions.</p>
<p>
<em>Artist(a)/Programmer: Jessica A. Rodriguez</em><br>
<a href="reference.html" target="_blank" style="color: maroon;">Link Full Reference(ia)</a><br>
</p>
<br>
</div>
<!-- -------------- -->
<!-- Page 2 -->
<div class="helpPage hidden" id="page2">
<h3>Cod(e/i)-go</h3>
<p>
<a href="reference.html" target="_blank" style="color: maroon;">Link Full Reference(ia)</a><br>
<a href="quick-reference.html" target="_blank" style="color: maroon;">Link Quick Reference(ia)</a>
</p>
<ul>
<li><code>transmissión on</code></li>
<li><code>transmissión on switch 1</code></li>
<li><code>transmission on suich 3</code></li>
<li><code>transmission on monitor oldi3</code></li>
<li><code>trasmission on MONITOR celScreen0</code></li>
<li><code>transmissión on muv -2 1 0</code></li>
<li><code>transmissión on rodar 1 2 0</code></li>
<li><code>transmissión on rodar 1 a-0.002 0 fulcober negriblanco</code></li>
</ul>
<hr>
<h4>Multiple</h4>
<p><code>transmissión on emit 0 -1 1 movit -3 0 0;
<br>
transmissión on emit 0 1 -1 movit 3 0 0 switch 10;</code></p>
<hr>
<h4>Channels - <code>switch #</code></h4>
<p><code>1</code>, <code>2</code>, <code>3</code>... <code>72</code> </p>
<br>
</div>
<!-- -------------- -->
<!-- Page 3 -->
<div class="helpPage hidden" id="page3">
<h3>Monitor(e)s</h3>
<p>
<a href="reference.html" target="_blank" style="color: maroon;">Link Full Reference(ia)</a><br>
<a href="quick-reference.html" target="_blank" style="color: maroon;">Link Quick Reference(ia)</a>
</p>
<ul>
<li><b>Cub(e/o):</b> <code>oldi0</code>, <code>oldi1</code>, <code>oldi2</code>, <code>oldi3</code>, <code>oldi4</code> </li>
<hr>
<li><b>Rectangular Prism(a):</b> <code>90s0</code>, <code>90s1</code>, <code>90s2</code>, <code>90s3</code>, <code>90s4</code> </li>
<hr>
<li><b>Vertical Plan(e/o):</b> <code>celScreen0</code>, <code>celScreen1</code>, <code>celScreen2</code>, <code>celScreen3</code>, <code>celScreen4</code>, <code>celScreen5</code>, <code>celScreen6</code>, <code>celScreen7</code>, <code>celScreen8</code>, c<code>elScreen9</code>, <code>celScreen10</code>, <code>celScreen11</code>, <code>celScreen12</code> </li>
<hr>
<li><b>Horizontal Plan(e/o):</b> <code>movieScreen0</code>, <code>movieScreen1</code>, <code>movieScreen2</code>, <code>movieScreen3</code>, <code>movieScreen4</code>, <code>movieScreen5</code>, <code>movieScreen6</code>, <code>movieScreen7</code>, <code>movieScreen8</code>, <code>movieScreen9</code>, <code>movieScreen10</code>, <code>movieScreen11</code>, <code>movieScreen12</code>, <code>movieScreen13</code>, <code>movieScreen14</code>, <code>movieScreen15</code> </li>
<hr>
<li><b>Sq Plan(e/o):</b> <code>insta0</code>, <code>insta1</code>, <code>insta2</code>, <code>insta3</code>, <code>insta4</code>, <code>insta5</code> </li>
<hr>
<li><b>Spher(e/a):</b> <code>domo0</code>, <code>domo1</code>, <code>domo2</code>, <code>domo3</code>, <code>domo4</code>, <code>domo5</code> </li>
<hr>
<li><b>Pol(y/i)hedron(e)s:</b> <code>penta0</code>, <code>penta1</code>, <code>penta2</code>, <code>penta3</code>, <code>penta4</code>, <code>penta5</code> </li>
<br>
</ul>
</div>
<!-- -------------- -->
<!-- Page 4 -->
<div class="helpPage hidden" id="page4">
<h3>Set(eos) del code</h3>
<!-- Font Selector -->
<label for="fontSelect">Font (con custom made fonts):</label>
<select id="fontSelect">
<option value="monospace">monospace</option>
<option value="acuarela">Acuarela</option>
<option value="acuarelX">AcuarelX</option>
<option value="alargada">Alargada</option>
<option value="alargadX">AlargadX</option>
<option value="anarquia">Anarquia</option>
<option value="anarquiX">AnarquiX</option>
<option value="brillante">Brillante</option>
<option value="brillantX">BrillantX</option>
<option value="cinematica">Cinemática</option>
<option value="cinematicX">CinemáticX</option>
<option value="escolar">Escolar</option>
<option value="escolXr">EscolXr</option>
<option value="estampa">Estampa</option>
<option value="estampX">EstampX</option>
<option value="molde">Molde</option>
<option value="moldX">MoldX</option>
<option value="nitida">Nítida</option>
<option value="nitidX">NítidX</option>
<option value="nocturna">Nocturna</option>
<option value="nocturnX">NocturnX</option>
<option value="plumon">Plumón</option>
<option value="plumXn">PlumXn</option>
<option value="salpicon">Salpicón</option>
<option value="salpicXn">SalpicXn</option>
<option value="treintas">Treintas</option>
<option value="treintXs">TreintXs</option>
<option value="voyeur">Voyeur</option>
<option value="voyeXr">VoyeXr</option>
</select>
<hr>
<!-- Font Size Selector -->
<label for="fontSizeSelect">Big-gea la Font:</label>
<select id="fontSizeSelect">
<option value="4em" selected>Largón</option>
<option value="2em">Smallito</option>
<option value="3em">Mediumcito</option>
<option value="5em">Extra-Largón</option>
</select>
<hr>
<!-- Alignment Selector -->
<label for="alignSelect">Text Align-eado:</label>
<select id="alignSelect">
<option value="left">←</option>
<option value="center">→←</option>
<option value="right">→</option>
</select>
<hr>
<!-- Background Color Selector -->
<label for="bgColorSelect">Backgráund Color:</label>
<select id="bgColorSelect">
<option value="black">Dark Mode</option>
<option value="white">Whitex Mode</option>
<option value="lightgray">Greycito Mode</option>
<option value="beige">Beige Mode</option>
</select>
<hr>
<!-- Font Color Selector -->
<label for="fontColorSelect">Color la Font:</label>
<p>No function(a) con custom made fonts</p>
<select id="fontColorSelect">
<option value="white">Whitex</option>
<option value="black">Blackie</option>
<option value="red">Rouge</option>
<option value="maroon">Marrón</option>
<option value="purple">Purple-ra</option>
<option value="fuchsia">Fucsia</option>
<option value="teal">Aguateal</option>
<option value="aqua">Aqua</option>
</select>
<br><br>
</div>
<!-- Navigation -->
<div class="helpNav">
<button data-page="page1">Info</button>
<button data-page="page2">Cod(e/i)-go</button>
<button data-page="page3">Monitor(e)s</button>
<button data-page="page4">Set(eos) del code</button>
</div>
</div>
</div>