-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
197 lines (176 loc) · 10.9 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
<!DOCTYPE html>
<html>
<head>
<title>Jose's Stuff</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="lib/jose-components.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<meta charset="UTF-8">
</head>
<body style="font-family:courier; color:white; background-color: black; height:100vh; overflow:none">
<!-- REFACTOR: https://aframe.io/docs/0.8.0/components/sound.html -->
<audio id='audio-clip'>
<source src="placeholder.flac" type='audio/flac' />
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
<section id="main"></section>
<!-- <a-scene id="scene" embedded style="height:25%;width:25%;"> -->
<a-scene id="scene" embedded>
<!-- <a-scene id="scene" embedded style="height:1000px;width:1000px;"> -->
<a-entity position="1.5 0 -3.5">
<a-entity joses-default-interface></a-entity>
</a-entity>
<!-- place these things first in HTML, for render order reasons -->
<a-image src="turtles-in-sink.jpg" position="0 -15 0" rotation="90 0 0" width="20.48" height="15.36"></a-image>
<a-image src="beach-on-cup.jpg" position="-10 2.15 0" rotation="0 90 0" width="5.76" height="10.24"></a-image>
<a-image src="mella.png" position="-12 -0.09 0" rotation="0 90 0" width="5.76" height="5.76"></a-image>
<a-entity id="blob"></a-entity>
<a-assets>
<video id="video-asset" src="vid.mp4"></video>
</a-assets>
<a-box id="blue-cube" class="clickable" position="-3 0.5 -11" rotation="0 45 0" color="blue" opacity="0.3"></a-box>
<a-sphere id="red-sphere" class="clickable" click-to-reposition position="0 0.5 -11" radius="0.5" color="red" opacity="0.3"></a-sphere>
<a-cylinder id='green-cyl' class="clickable" position="3 0.75 -11" radius="0.5" height="1.5" color="green" opacity="0.3"></a-cylinder>
<a-video id="video-clip" src="#video-asset" position="-3 2 -11" width="2.56" height="1.44" position="0 2 -5"></a-video>
<!-- TODO: make clicker game stuff its own component or something -->
<a-box id="clicker-game-banner" src="clicker-game.png" position="0.5 2.5 -7.5" color="white"></a-box>
<a-entity class='table' position='0 0.01 -9'>
<a-entity class='grid-fitter' position='0.5 0 0.5'>
<a-text position='6 2.2 5' value='handwriting\ntest' align='center' src='chalk-effect.png' rotation='0 -90 0'>
<a-image position='0 -0.7 0' src='chalk-effect.png'></a-image>
</a-text>
<a-entity position='1 0 3'>
<!-- table base -->
<a-cylinder color='saddlebrown' radius='0.25' height='0.7' position='0 0.35 0'></a-cylinder>
<!-- table top -->
<a-cylinder color='saddlebrown' radius='1' height='0.05' position='0 0.725 0'></a-cylinder>
<!-- table surface -->
<a-entity position='0 0.75 0'>
<a-entity class='table-demo' position='0 0 0'>
<a-entity id='clock-hrs'><a-sphere position='0 0 -0.35' radius='0.1'></a-sphere></a-entity>
<a-entity id='clock-min'><a-sphere position='0 0 -0.60' radius='0.1'></a-sphere></a-entity>
<a-entity id='clock-sec'><a-sphere position='0 0 -0.85' radius='0.1'></a-sphere></a-entity>
</a-entity>
<a-entity class='table-demo' position='-2 0 0'>
<a-box id="clicker-button" class="clickable" depth= '0.52' width="0.52" height="0.32" position="0 0.05 0" color="yellow"></a-box>
<a-text value="<- click" position="0.26 0 0" rotation="-90 0 0"></a-text>
<a-text value="Score:" align="center" position="0 0 0.45" rotation="-90 0 0"></a-text>
<a-text id="clicker-score" value="0" align="center" position="0 0 0.70" rotation="-90 0 0"></a-text>
</a-entity>
</a-entity>
</a-entity>
<!--
<a-entity id='next-button'>
<a-text position='7 1 3' value='next' align='center'></a-text>
<a-box src='next.png' position='7 0.7 3' height='0.25' width='0.25' depth='0.25'></a-box>
</a-entity>
-->
</a-entity>
</a-entity>
<a-entity id='20181201-dream' position='-4 0.01 -9'>
<a-entity class='grid-fitter' position='0.5 0 0.5'>
<a-circle radius='0.25' position='0 0 1' rotation='-90 0 0' opacity='0.2'></a-circle>
<a-circle radius='0.25' position='1 0 0' rotation='-90 0 0' opacity='0.2'></a-circle>
<a-circle radius='0.25' position='2 0 0' rotation='-90 0 0' opacity='0.2'></a-circle>
<a-circle radius='0.25' position='2 0 1' rotation='-90 0 0' opacity='0.2'></a-circle>
<a-circle radius='0.25' position='2 0 2' rotation='-90 0 0' opacity='0.2'></a-circle>
<a-circle radius='1.5' position='3 0 6' rotation='-90 0 0' color='green' opacity='0.5'></a-circle>
<a-image src='lamb.png' position='3 0.5 6'></a-image>
</a-entity>
</a-entity>
<!-- <a-image src="abstract.png" position="10 2 0" rotation="0 -90 0" width="6" height="6"></a-image> -->
</a-scene>
<div id="0Panel">
<style type="text/css">
h1{
font-size: 3em;
}
.quote {
color: gray;
}
.chunky-green {
color: #550000;
font-weight: 900;
background-color: #AAFFFF;
}
</style>
<h1>A place for stuff and tests</h1>
<br>
<p><a href="test/cage.html">[ cage.html ]</a></p>
<br>
<!-- <p>COVID-19 CHART • <a href="data/covid-19/viz.html">[ covid-19/viz.html ]</a>: chart from excel-file</p> -->
<p>Drawing app test • <a href="test/draw-app.html">[ draw-app.html ]</a>: draw stuff</p>
<p>Clicky game test • <a href="test/cube-clicker.html">[ cube-clicker.html ]</a>: click stuff</p>
<p>Touchscreen test • <a href="demo/touch-controls.html">[ touch-controls.html ]</a>: on-screen joystick phone/tablet</p>
<br>
<p>Desktop Only:</p>
<p>Screen Share Test • <a href="demo/screen-share.html">[ demo/screen-share.html ]</a>: your screen</p>
<p>Drag and Drop Test • <a href="test/linear-drag-n-drop.html">[ test/linear-drag-n-drop.html ]</a>: drag some squares</p>
<br>
<p>Phone Stuff</p>
<p>Touchscreen Locomotion • <a href="demo/touch-controls.html">[ demo/touch-controls.html ]</a>: your screen</p>
<br>
<p>Artsy Stuff</p>
<p>Orange Rain • <a href="https://jedpimentel.github.io/stuff/art/mangogeddon.html">Mangogeddon</a></p>
<p>Spiky angles thing • <a href="demo/bench.html">thing</a></p>
<!-- <br>
<p>2D/flat stuff:</p> --><!-- </p>
<br>
<p><a href="/tools">[ RANDOM TOOLS ]</a></p> -->
<br>
<br>
<p>"Stuff" main page (you are here): click blue cube to play video, red sphere to move it around, green cylinder to play an audio file. Yellow box has a click counter. <!-- The paper cup image is just something I drew on (blue marker, black pen, pink powerade and coffee for the sand), the glithy image it sometimes shows is an example of <a href="https://en.wikipedia.org/wiki/Z-fighting">z-fighting<a>. The lamb is a PNG cutout. The handwriting is my actual handwriting, blown-up. --></p>
<br>
<br>
<p class="quote">"Remember kids, the only difference between screwing around and science is writing it down"<br> - Alex Jason (balistics expert)</p>
<br>
<br>
<p>TODAY'S MENU</p>
<br>
<ul>
<li>
<span class="red">►</span> Oculust Quest test <a href="demo/oculus-quest/index.html">[open]</a>. Hold down grip button to start moving, use A/B buttons to draw in air.
</li>
<!-- <li>
<span class="red">►</span> WebVR Micro-Demos <a href="demo/index.html">[open]</a>
</li>
<li>
<span class="red">►</span> Project Robot <a href="https://www.youtube.com/watch?v=YwtfH2BK4ac&list=PLp1h6x4FOZbD1WFxB6FbCl7TboPiQIAH8">[open]</a>
</li> -->
</ul>
<br>
<!-- <p>=====</p>
<p>Oh, hi there! For now please enjoy this simple scene.</p>
<p>=====</p>
<br>
<p>And to our side we have a scene powered by the A-Frame WebVR framework, written in HTML and JavaScript.</p>
<br>
<p>=====</p>
<p>You start out in a <span class="red">MYSTERIOUS VOID</span>.</p>
<p>Your eyes grate on the GREAT WALL OF TEXT.</p>
<p>You hold a stick in your right hand, in a crude geometric landscape.</p>
<br>
<p>Use your W/A/S/D keys to move around</p>
<p>Click the green cylinder to play audio</p>
<p>Click the blue cube to play video</p>
<p>Click the red sphere to start moving it around</p>
<p>Click/Touch-drag screen to rotate view</p>
<br>
<p>Josh the Goat says: "All the cool kids brush their teeth, don't be a loser!"</p>
<br>
<p>Videogame: "Don't hit Josh"</p>
<p>Rules:<br>You loose one point each time you hit Josh with the stick<br>Keep track of the score yourself for now<br>I just got a score of -12, try beating it!</p>
<br>
<p>Press "F", or the "Goggles" icon to go to full-screen mode.</p>
<p>For now, mouse and keyboard constrols only. <span class="gre">#SorryNotSorry</span></p>
<br> -->
<footer>
<br>
<!-- <p>123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ</p> -->
<br>
<p style="text-align: right; padding-right: 8px">~ <a href="https://github.com/jedpimentel/stuff" class="blu">[Click here to go to repo]</a></p>
</footer>
</div>
<script src="main.js"></script>
</body>
</html>