-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
150 lines (149 loc) · 12.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Shadowcraft Project</title>
<link rel="stylesheet" href="./style.css" />
<link
rel="stylesheet"
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.8.0/addons/p5.sound.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision/vision_bundle.js"
crossorigin="anonymous"
></script>
<script src="https://mourner.github.io/simplify-js/simplify.js"></script>
<script src="./lib/concaveHull.js"></script>
<script src="./getCanvas.js"></script>
<script type="module" src="./script.js"></script>
<script src="./sketch.js"></script>
<script src="./lib/p5.speech.js"></script>
</head>
<body>
<link
href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"
rel="stylesheet"
/>
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js"
crossorigin="anonymous"
></script>
<script
src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js"
crossorigin="anonymous"
></script>
<header>
<svg
class="img-fluid"
id="outputsvg"
xmlns="http://www.w3.org/2000/svg"
style="
transform: none;
transform-origin: 50% 50%;
cursor: move;
max-height: none;
"
width="265"
height="92,5"
viewBox="0 0 21200 7400"
>
<g
id="l7DPeHP0evXFKOxI8Ps3tXr"
fill="rgb(0,0,0)"
style="transform: none"
>
<g>
<path
id="pTqeXnAye"
d="M2735 5954 c-163 -29 -346 -101 -485 -192 -59 -38 -210 -182 -210 -200 0 -6 -11 -24 -25 -40 -27 -33 -109 -216 -143 -322 -26 -81 -56 -192 -78 -290 -9 -41 -23 -95 -30 -120 -8 -25 -16 -62 -19 -83 -4 -21 -13 -53 -21 -72 -8 -19 -14 -44 -14 -56 0 -22 -16 -80 -70 -254 -63 -204 -73 -249 -78 -365 -9 -232 62 -439 225 -657 49 -66 230 -245 271 -267 9 -5 24 -17 34 -25 9 -9 35 -27 58 -41 23 -14 56 -35 73 -47 18 -12 66 -38 107 -58 41 -20 77 -39 80 -43 11 -17 257 -102 355 -124 171 -37 364 -43 479 -13 125 33 225 104 271 195 48 95 56 143 49 305 -9 228 22 427 88 559 22 44 23 45 75 105 47 54 117 100 203 131 36 13 81 33 100 45 42 27 105 95 115 124 3 12 10 21 15 21 10 0 98 207 106 251 3 19 14 59 24 89 108 329 69 592 -127 868 -54 76 -202 224 -272 272 -29 19 -62 43 -74 53 -12 11 -40 28 -62 39 -22 11 -47 26 -55 33 -28 24 -254 114 -350 138 -222 58 -440 72 -615 41z m536 -476 c26 -25 51 -59 58 -81 11 -34 10 -45 -10 -95 -13 -31 -30 -70 -39 -87 -67 -123 -93 -165 -101 -165 -5 0 -16 15 -24 33 -9 17 -31 59 -50 92 -57 99 -67 127 -69 187 0 43 4 63 20 85 34 45 82 73 128 73 35 0 49 -7 87 -42z m26 -556 c3 -7 1 -23 -5 -35 -21 -44 -72 -182 -72 -194 0 -7 -4 -13 -10 -13 -5 0 -10 -6 -10 -14 0 -13 -34 -106 -51 -138 -14 -26 -11 -36 11 -43 28 -9 25 -27 -16 -101 l-36 -65 38 -33 c34 -29 39 -39 38 -74 -1 -37 -29 -126 -55 -174 -5 -10 -9 -25 -9 -33 0 -8 -9 -34 -19 -58 -11 -23 -29 -71 -41 -107 -12 -36 -25 -74 -31 -85 -8 -19 -64 -172 -96 -265 -8 -25 -19 -49 -24 -55 -5 -5 -9 -19 -9 -31 0 -33 -55 -84 -91 -84 -16 0 -29 4 -29 9 0 5 -10 13 -22 17 -11 3 -61 31 -110 60 -49 30 -91 54 -93 54 -3 0 -45 24 -93 53 -171 104 -258 155 -299 176 -41 21 -83 67 -83 93 0 21 137 195 360 458 36 42 81 96 100 120 19 23 59 69 89 101 47 51 58 59 90 59 20 0 47 -7 59 -16 13 -9 25 -14 26 -13 2 2 22 37 45 76 l43 72 30 -15 c16 -9 31 -14 32 -12 2 2 17 23 33 48 17 25 39 54 50 65 10 11 47 58 82 105 35 47 75 97 89 112 25 27 26 27 55 10 16 -9 32 -23 34 -30z"
></path>
<path
id="pZum0WSmN"
d="M5145 4759 c-99 -21 -141 -32 -152 -42 -9 -7 -13 -51 -13 -158 0 -82 2 -149 4 -149 3 0 38 13 78 29 97 39 158 53 243 53 114 2 175 -43 183 -135 7 -89 -25 -132 -182 -245 -209 -150 -261 -202 -306 -306 -40 -90 -34 -239 13 -335 32 -64 123 -143 199 -174 123 -49 256 -55 416 -19 l72 16 0 153 c0 84 -2 153 -4 153 -3 0 -20 -9 -38 -19 -78 -47 -241 -66 -309 -37 -97 40 -114 138 -39 215 21 21 91 79 156 128 180 136 251 214 295 324 18 46 20 70 17 159 -3 92 -7 113 -34 170 -53 113 -144 185 -274 216 -61 15 -262 17 -325 3z"
></path>
<path
id="pBRDWxmYt"
d="M8002 4750 c-196 -53 -365 -186 -456 -360 -129 -245 -121 -560 21 -793 52 -87 174 -205 253 -247 151 -81 256 -105 406 -96 157 10 301 61 401 142 23 19 44 34 47 34 3 0 6 -34 6 -75 l0 -75 150 0 150 0 0 730 0 730 -150 0 -150 0 0 -75 c0 -41 -3 -75 -6 -75 -3 0 -26 18 -52 39 -55 46 -133 86 -217 113 -92 30 -307 34 -403 8z m360 -280 c112 -34 229 -141 278 -254 42 -94 51 -260 20 -356 -35 -106 -139 -234 -228 -279 -118 -60 -270 -66 -397 -15 -86 34 -197 140 -237 225 -55 116 -62 285 -19 400 46 120 170 241 286 279 82 26 212 26 297 0z"
></path>
<path
id="ps9jBp1Gp"
d="M9730 4750 c-257 -69 -446 -260 -522 -529 -31 -107 -31 -311 0 -425 56 -204 210 -390 395 -477 104 -48 179 -63 312 -63 170 0 301 40 425 129 25 17 50 34 55 37 6 4 10 -16 10 -50 0 -32 1 -180 3 -329 l2 -273 145 0 145 0 0 985 0 985 -145 0 -145 0 -1 -52 c-1 -29 -2 -61 -2 -70 0 -26 -15 -22 -61 16 -50 41 -126 80 -209 108 -94 31 -305 35 -407 8z m389 -289 c115 -47 226 -164 261 -278 62 -200 21 -383 -117 -520 -199 -199 -523 -171 -694 59 -68 91 -83 144 -83 293 -1 121 1 134 27 189 60 129 153 218 274 262 60 22 80 24 173 21 78 -3 119 -10 159 -26z"
></path>
<path
id="pjwwS2Yhw"
d="M11500 4755 c-198 -47 -349 -148 -458 -308 -90 -131 -132 -267 -132 -434 0 -166 35 -287 120 -416 162 -246 438 -372 736 -337 557 67 846 696 540 1173 -44 68 -133 160 -200 206 -73 50 -184 99 -264 116 -88 18 -265 18 -342 0z m312 -284 c147 -50 265 -176 304 -325 22 -83 18 -219 -10 -297 -74 -210 -290 -344 -502 -311 -134 21 -228 78 -307 186 -128 176 -128 409 2 581 53 70 141 135 220 162 86 29 214 31 293 4z"
></path>
<path
id="p1EqYfvAyc"
d="M15291 4750 c-138 -37 -253 -103 -348 -201 -128 -132 -193 -267 -214 -446 -48 -408 228 -776 631 -843 82 -14 221 -9 308 11 l52 12 0 154 c0 84 -2 153 -4 153 -2 0 -29 -11 -59 -26 -105 -47 -262 -42 -370 12 -113 56 -213 170 -247 282 -22 70 -28 183 -15 257 26 141 144 283 285 346 48 21 70 24 175 24 123 0 126 -1 228 -53 4 -2 7 66 7 152 l0 155 -37 12 c-21 7 -101 13 -178 15 -116 3 -153 0 -214 -16z"
></path>
<path
id="pD2an0xEd"
d="M17390 4759 c-126 -33 -184 -60 -277 -126 -124 -87 -237 -253 -279 -408 -9 -33 -19 -115 -21 -182 -5 -105 -2 -137 17 -215 38 -159 103 -274 211 -378 250 -240 656 -265 936 -59 29 22 53 39 55 39 2 0 3 -33 3 -72 l0 -73 148 0 c81 0 147 3 147 8 0 4 0 331 0 727 l0 721 -147 -3 -148 -3 0 -73 c0 -39 -2 -72 -4 -72 -2 0 -22 15 -45 33 -123 99 -272 148 -450 146 -61 0 -127 -5 -146 -10z m363 -302 c158 -73 255 -206 275 -377 22 -182 -43 -350 -172 -449 -103 -79 -193 -107 -315 -98 -187 13 -343 131 -411 312 -17 47 -23 82 -23 160 -2 154 35 247 138 350 106 106 180 135 340 132 96 -2 118 -6 168 -30z"
></path>
<path
id="pR7k9rPsG"
d="M19825 4760 c-120 -14 -213 -57 -279 -131 -58 -64 -79 -105 -106 -200 -19 -71 -20 -101 -20 -791 l0 -718 145 0 145 0 0 180 0 180 150 0 150 0 0 145 0 145 -151 0 -150 0 3 378 c3 363 4 378 24 417 42 77 96 105 204 105 l70 0 0 150 0 150 -62 -1 c-35 -1 -90 -5 -123 -9z"
></path>
<path
id="p13hyVJLIq"
d="M5960 3755 l0 -985 150 0 150 0 0 335 c0 184 4 335 8 335 5 0 21 -14 38 -31 88 -95 229 -151 383 -153 162 -2 289 45 397 147 78 72 135 165 165 267 22 72 23 93 27 573 l3 497 -150 0 -150 0 -3 -482 -3 -483 -26 -56 c-81 -172 -292 -235 -496 -148 -58 25 -129 98 -161 167 l-27 57 -3 473 -3 472 -150 0 -149 0 0 -985z"
></path>
<path
id="pdeguCiJ6"
d="M12740 4253 c-208 -666 -213 -680 -259 -828 -23 -71 -41 -133 -41 -137 0 -4 66 -8 148 -8 l147 0 108 353 c60 193 113 366 117 382 5 17 18 60 29 98 12 37 30 97 41 134 11 37 24 71 28 75 5 5 42 -92 85 -224 60 -182 240 -736 262 -805 3 -10 40 -13 138 -13 l133 0 117 358 c65 196 138 420 162 497 56 171 65 195 76 195 5 0 9 -9 9 -20 0 -10 4 -29 9 -42 8 -22 24 -73 72 -233 11 -38 24 -81 29 -95 5 -14 50 -162 100 -330 50 -168 93 -311 95 -317 3 -10 43 -13 155 -13 l151 0 -7 23 c-9 28 -85 267 -174 547 -53 164 -251 796 -276 878 -2 9 -45 12 -168 12 l-164 0 -102 -312 c-178 -548 -202 -623 -207 -637 -2 -9 -7 -11 -12 -5 -5 5 -72 205 -150 444 -78 239 -148 451 -154 470 l-13 35 -165 3 -166 2 -153 -487z"
></path>
<path
id="pXJIZ4veD"
d="M15960 4010 l0 -730 145 0 145 0 1 73 c1 39 0 79 -1 86 -1 8 27 -12 62 -45 110 -102 216 -145 358 -143 117 1 111 -7 111 149 l0 135 -123 5 c-107 5 -131 9 -185 34 -66 30 -137 96 -168 157 -46 88 -48 113 -52 569 l-4 435 -144 3 -145 3 0 -731z"
></path>
<path
id="p1CxHZZSUB"
d="M18632 3938 c3 -799 3 -803 25 -868 28 -83 71 -147 136 -206 98 -88 208 -124 380 -124 l107 0 0 145 0 145 -95 0 c-102 0 -151 13 -194 53 -35 32 -61 95 -61 150 l0 47 175 0 175 0 0 145 0 145 -175 0 -175 0 0 585 0 585 -150 0 -151 0 3 -802z"
></path>
<path
id="p1B3wWgVMv"
d="M4470 4196 c-30 -7 -71 -19 -90 -28 -51 -22 -156 -112 -188 -161 -15 -23 -30 -44 -34 -47 -29 -22 -68 -183 -68 -281 0 -171 75 -460 165 -641 114 -227 311 -482 459 -593 227 -171 450 -202 580 -79 39 37 56 83 56 152 0 121 -57 227 -202 378 -120 123 -226 285 -298 453 -78 178 -102 301 -102 505 1 134 -2 167 -19 211 -21 57 -81 121 -121 129 -61 12 -87 13 -138 2z"
></path>
<path
id="pFnja2FlT"
d="M1304 3425 c-27 -7 -72 -22 -100 -33 -27 -11 -124 -49 -215 -85 -231 -91 -338 -150 -479 -266 -76 -63 -228 -219 -235 -242 -4 -10 -10 -19 -14 -19 -5 0 -23 -32 -41 -71 -28 -61 -32 -81 -32 -150 0 -88 16 -125 74 -172 58 -48 150 -49 240 -2 62 32 83 49 200 159 47 44 97 89 110 98 12 9 37 28 53 41 86 69 317 208 486 294 100 50 205 147 234 216 8 20 15 58 15 85 0 127 -130 192 -296 147z"
></path>
<path
id="pYcbXqHVz"
d="M1730 2941 c-109 -35 -204 -90 -306 -178 -27 -23 -87 -74 -134 -114 -130 -110 -256 -242 -350 -369 -36 -49 -165 -207 -184 -225 -9 -9 -16 -19 -16 -23 0 -4 -15 -23 -33 -43 -92 -102 -155 -227 -170 -339 -9 -70 -8 -85 12 -148 18 -55 33 -79 65 -109 22 -21 52 -43 66 -49 36 -16 131 -9 181 13 63 28 147 101 194 167 22 31 73 100 113 154 40 53 83 110 95 126 84 113 260 310 471 526 77 80 159 168 182 195 109 134 149 267 106 351 -39 77 -167 106 -292 65z"
></path>
<path
id="pyTzaL15h"
d="M2368 2574 c-52 -16 -148 -70 -188 -106 -43 -39 -138 -155 -145 -177 -3 -12 -10 -21 -15 -21 -4 0 -27 -37 -49 -82 -22 -46 -77 -153 -122 -238 -80 -152 -143 -298 -153 -356 -3 -16 -19 -69 -35 -119 -44 -136 -89 -285 -101 -335 -10 -43 -13 -57 -25 -125 -33 -179 11 -359 108 -447 111 -101 292 -64 397 80 58 80 89 177 100 311 5 66 15 141 21 168 11 48 65 231 79 268 5 11 16 43 25 70 40 114 140 347 165 385 21 32 106 235 115 275 4 17 16 59 26 94 24 79 26 216 4 269 -20 48 -70 92 -106 92 -15 0 -33 2 -41 4 -7 3 -34 -2 -60 -10z"
></path>
<path
id="pNeBquXAx"
d="M2968 2456 c-99 -43 -163 -184 -183 -401 -3 -33 -7 -76 -10 -95 -3 -19 -5 -105 -5 -190 0 -147 7 -218 45 -450 9 -52 26 -176 39 -275 34 -256 68 -349 164 -449 44 -46 127 -86 179 -86 81 0 193 81 229 165 43 103 55 259 28 392 -18 94 -19 100 -44 233 -34 187 -53 308 -75 475 -4 32 -16 129 -36 285 -13 110 -41 207 -76 267 -30 51 -99 122 -131 134 -32 12 -91 10 -124 -5z"
></path>
</g>
</g>
</svg>
</header>
<main>
<section id="liveView" class="videoView">
<button id="webcamButton" class="mdc-button mdc-button--raised">
<span class="mdc-button__ripple"></span>
<span class="mdc-button__label">TURN ON THE WEBCAM</span>
</button>
<section id="cameraView" style="position: relative">
<video id="webcam" autoplay playsinline></video>
<canvas
class="output_canvas"
id="output_canvas"
style="position: absolute; left: 0px; top: 0px"
></canvas>
<div id="p5canvas_container"></div>
</section>
</section>
</main>
</body>
</html>