-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
371 lines (265 loc) · 9.04 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
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
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
<html>
<head>
<title>Rock Paper Scissors</title>
<meta name="description" content="Progetto per il corso Laboratorio di AR">
<meta name="author" content="Arzon Francesco - 142439 UNIUD">
<script src="lib/JSARToolKit.min.js"></script>
<script src="lib/Three.min.js"></script>
<script src="lib/GLTFLoader.js"></script>
<script src="lib/functions.js"></script>
<link rel="stylesheet" type="text/css" href="css/stile.css">
<script>
var counter = 0;
var last;
var sceltaP1, sceltaP2 = " ";
const valoreDefault = " ??? ";
var game = false;
var p1turn, p2turn = false;
var status = 0;
const pool = ["CARTA", "SASSO", "FORBICI"];
////////////////////////////////////////////////////////////////////
window.onload = function () {
// connect to webcam
var video = document.getElementById("hiddenVideo");
var constraints = { audio: false, video: true };
navigator.mediaDevices.getUserMedia(constraints)
.then(function (stream) {
video.srcObject = stream;
})
.catch(function (err) {
alert(err.name + ": " + err.message);
video.src = "src/marker.webm";
});
// once we have the video stream, we can start processing it
video.onloadedmetadata = start_processing;
}
function start_processing(event) {
// Set up video and canvas
var hvideo = document.getElementById("hiddenVideo");
var hcanvas = document.getElementById("hiddenCanvas");
var dcanvas = document.getElementById("drawingCanvas");
var ocanvas = document.getElementById("outCanvas");
hcanvas.width = ocanvas.width = dcanvas.width = hvideo.clientWidth;
hcanvas.height = ocanvas.height = dcanvas.height = hvideo.clientHeight;
hvideo.style.display = "none";
hcanvas.style.display = "none";
dcanvas.style.display = "none";
ctx = hcanvas.getContext("2d");
// setup JSARToolKit
var ART_raster = new NyARRgbRaster_Canvas2D(hcanvas);
var ART_param = new FLARParam(hcanvas.width, hcanvas.height);
var ART_detector = new FLARMultiIdMarkerDetector(ART_param, 65);
//Returns the marker's id - jsartoolkit
function getMarkerId(idx) {
//I dati sull'id del marker
var markerDataId = ART_detector.getIdMarkerData(idx);
//se è troppo lungo c'è qualcosa che non va
if (markerDataId.packetLength > 4) {
alert("Errore nel riconoscimento");
return -1;
}
//DEBUG:console.log("packet[1]: "+markerDataId._packet[1]);
return markerDataId._packet[1];
}
ART_detector.setContinueMode(true);
// setup three.js
var renderer = new THREE.WebGLRenderer({ canvas: dcanvas });
renderer.autoClear = false;
// create the background plane and its own camera
var bgTexture = new THREE.Texture(hcanvas);
bgTexture.minFilter = THREE.LinearFilter;
var bgPlane = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2),
new THREE.MeshBasicMaterial({
map: bgTexture,
depthTest: false, // disable Z-Buffering
depthWrite: false
})
);
//prova
var bgCamera = new THREE.OrthographicCamera(-1, 1, 1, -1);
bgCamera.position.z = 3;
var bgScene = new THREE.Scene();
bgScene.add(bgPlane);
bgScene.add(bgCamera);
// set up the main scene and camera with JSART parameters
var scene = new THREE.Scene();
var camera = new THREE.Camera();
var tmp = new Float32Array(16);
ART_param.copyCameraMatrix(tmp, 1, 10000);
camera.projectionMatrix = ConvertCameraMatrix(tmp);
scene.add(camera);
// create a container with some stuff in it
var container = new THREE.Object3D();
container.matrixAutoUpdate = false;
scene.add(container);
//**************************************************************
var loader = new THREE.GLTFLoader();
var oggetto;
//null card
function nullo() {
loader.load('src/tiles/null/null.gltf', function (gltf_model) {
oggetto = gltf_model.scene;
oggetto.scale.set(100, 100, 100);
if (container.children.length > 2) {
container.children.pop();
}
//DEBUG console.log(container.children);
container.add(oggetto);
});
}
//paper card
function carta() {
loader.load('src/tiles/paper/paper.gltf', function (gltf_model) {
oggetto = gltf_model.scene;
oggetto.scale.set(100, 100, 100);
if (container.children.length > 2) {
container.children.pop();
}
//DEBUG console.log(container.children);
container.add(oggetto);
});
}
//rock card
function sasso() {
loader.load('src/tiles/rock/rock.gltf', function (gltf_model) {
oggetto = gltf_model.scene;
oggetto.scale.set(100, 100, 100);
if (container.children.length > 2) {
container.children.pop();
}
//DEBUG console.log(container.children);
container.add(oggetto);
});
}
//scissors card
function forbici() {
loader.load('src/tiles/scissors/scissors.gltf', function (gltf_model) {
oggetto = gltf_model.scene;
oggetto.scale.set(100, 100, 100);
if (container.children.length > 2) {
container.children.pop();
}
//DEBUG console.log(container.children);
container.add(oggetto);
});
}
// adding lights
var plight = new THREE.PointLight(0xffffff);
plight.position.y = 500;
plight.position.z = 800;
container.add(plight);
var alight = new THREE.AmbientLight(0x0808080);
container.add(alight);
//////////////////////////////////////////
// processing
setInterval(function () {
// update the hidden canvas
ctx.drawImage(hvideo, 0, 0, hcanvas.width, hcanvas.height);
hcanvas.changed = true;
bgTexture.needsUpdate = true;
// draw background
renderer.clear();
renderer.render(bgScene, bgCamera);
// detect markers
var markerCount = ART_detector.detectMarkerLite(ART_raster, 128);
//Gets the id if a marker is visible, and then decides which card to disply
for (var index = 0; index < markerCount; index++) {
//console.log("num marker presenti : " + markerCount);
// Get the ID number of the detected marker.
var id = getMarkerId(index);
if (game == true) {
doStuff(id);
}
//console.log("prova: " + id);
switch (id) {
case 0:
carta();
break;
case 1:
sasso();
break;
case 2:
forbici();
break;
default:
nullo();
console.log("Use the markers in CARDS folder");
break;
}
}
if (markerCount > 0) {
var tmat = new NyARTransMatResult();
ART_detector.getTransformMatrix(0, tmat);
// we have detected a marker. Use the matrix to position the object and draw it
container.matrix = ConvertMarkerMatrix(tmat);
renderer.render(scene, camera);
}
// dcanvas now ready. Copy it to ocanvas to show it
ocanvas.getContext("2d").drawImage(dcanvas, 0, 0, dcanvas.width, dcanvas.height);
}, 20);
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////
// convert the camera projection matrix from JSARToolKit to Three.js format
function ConvertCameraMatrix(m) {
myMat = new THREE.Matrix4();
myMat.set(
m[0], m[4], m[8], m[12],
-m[1], -m[5], -m[9], -m[13],
m[2], m[6], m[10], m[14],
m[3], m[7], m[11], m[15]
);
return myMat;
}
// convert the marker matrix from JSARToolKit to Three.js format
function ConvertMarkerMatrix(m) {
myMat = new THREE.Matrix4();
myMat.set(
m.m00, m.m02, -m.m01, m.m03,
m.m10, m.m12, -m.m11, m.m13,
m.m20, m.m22, -m.m21, m.m23,
0, 0, 0, 1
);
return myMat;
}
</script>
</head>
<body>
<video autoplay controls id="hiddenVideo"></video>
<canvas id="hiddenCanvas"></canvas>
<canvas id="drawingCanvas"></canvas>
<h1 class="title">ROCK PAPER SCISSORS - minigame</h1>
<div id="contenuto">
<div id="output">
<canvas id="outCanvas"></canvas>
</div>
<div>
<p>
<h3>Rules: </h3>
<li>Press <i>PLAY</i> to start playing the game</li>
<li>The first player will click on <code>P1 MOVE</code> to begin his turn, and then rise one marker (each
marker is a playable Rock-Paper-Scissor 3D card) </li>
<li><b>The markers are in the <code>\CARDS</code> folder</b></li>
<li>Then the second player, after pressing on <code>P2 MOVE</code>, will also rise his marker </li>
<li>Both player choices are hidden by "???", nobody likes cheaters!</li>
<li>To end the game and see the outcome, click on <code>RESULT</code> </li>
</p>
</div>
<div id="game_div">
<button class="button" display="inline-block" id="play_button" onclick="playgame()">PLAY</button>
<button class="button" id="p1move" onclick="turnp1()">P1 MOVE</button>
<button class="button" id="p2move" onclick="turnp2()">P2 MOVE</button>
<div id="main_div">
<p class="playerinfo">PLAYER 1: </p>
<p id="p1"></p>
<p class="playerinfo">PLAYER 2: </p>
<p id="p2"></p>
</div>
<button class="button" id="reveal" type="button" onclick="endgame()">RESULT</button>
<p id="results">But you haven't played yet...</p>
<br>
<button id="again" onclick="window.location.reload();" class="button">AGAIN</button>
</div>
</div>
</body>
</html>