-
-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
107 lines (101 loc) · 4.01 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
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>
Squid Game's "Reg light, green light" with body tracking using
TensorFlow.js - by Charlie Gerard
</title>
<meta
property="og:description"
content="Play a prototype of 'Red light, green light' using body movement detection"
/>
<meta
name="description"
content="Play a prototype of 'Red light, green light' using body movement detection"
/>
<meta
property="og:image"
content="https://res.cloudinary.com/devdevcharlie/image/upload/v1636244711/Screenshot_2021-11-06_at_17.23.27_hmpg3l.png"
/>
<link
href="https://fonts.googleapis.com/css2?family=Quicksand:wght@400;600&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/loaders/GLTFLoader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-backend-webgl"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/pose-detection"></script>
</head>
<body>
<!-- "Squid Game - Giant Doll" (https://skfb.ly/o7OMD) by Rzyas is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/). -->
<!-- Doll audio from https://www.youtube.com/watch?v=Nk8V30AIuP4 -->
<!-- Shotgun Audio from https://soundbible.com/1919-Shotgun-Blast.html -->
<!-- Sigh audio from https://soundbible.com/773-Sigh.html -->
<main class="container">
<div class="game">
<video id="video"></video>
<div class="timer"><span class="time">00:15</span></div>
</div>
</main>
<div class="howto ui is-howto-visible">
<svg viewBox="0 0 191.99 60.82">
<path
d="M28.3,10.23A22.3,22.3,0,1,1,6,32.53a22.29,22.29,0,0,1,22.3-22.3m0-6a28.3,28.3,0,1,0,28.29,28.3A28.33,28.33,0,0,0,28.3,4.23Z"
fill="#fff"
/>
<path
d="M186,10.57V54.49H142.06V10.57H186m6-6H136.06V60.49H192V4.57Z"
fill="#fff"
/>
<path
d="M93.18,12l23.7,41.05H69.48l23.7-41m0-12L88,9,64.28,50.05l-5.19,9h68.19l-5.2-9L98.38,9l-5.2-9Z"
fill="#fff"
/>
</svg>
<section class="intro is-visible">
<h1>Red Light, Green Light</h1>
<p>You have 15 seconds to reach the end of the field.</p>
<p>
When the doll is not watching, move forward until you reach your
computer.
</p>
<p>
If movement is detected when the doll is watching, you are eliminated.
</p>
<p>
When you're ready, click 'Start' and take steps back as far as you
can.
</p>
<p class="countdown"></p>
<button class="cta start">Loading...</button>
</section>
<section class="dead is-hidden">
<h1>You died!</h1>
<p>
Oops, it looks like you were moving too much or your reached the
timeout...
</p>
<button class="cta replay1 is-ready">Replay</button>
</section>
<section class="win is-hidden">
<h1>You won!</h1>
<p>Well done, you survived... for now.</p>
<button class="cta replay2 is-ready">Replay</button>
</section>
</div>
<footer>
Made by
<a href="https://twitter.com/devdevcharlie">Charlie Gerard</a> using
TensorFlow.js. Inspired by
<a href="https://twitter.com/Mamboleoo">Louis Hoebregts</a>'
<a href="https://codepen.io/Mamboleoo/pen/abydvaG">original demo</a>
</footer>
<script src="index.js"></script>
</body>
</html>