-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (78 loc) · 3.98 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>THIS IS PERSON</title>
<meta name="description" content="Impress an AI with your object-finding skills! Can you find and show the desired object as quickly as possible?">
<meta property="og:title" content="THIS IS PERSON">
<meta property="og:description" content="Impress an AI with your object-finding skills! Can you find and show the desired object as quickly as possible?">
<meta property="og:image" content="https://barning.github.io/THIS-IS-PERSON/img/ogimage.jpg">
<meta property="og:image:alt" content="A boy looking into a light. The title is THIS IS PERSON.">
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:locale" content="en_GB">
<meta property="og:type" content="website">
<meta property="og:url" content="https://www.thisisperson.com">
<link rel="canonical" href="https://www.thisisperson.com">
<link rel="apple-touch-icon" sizes="180x180" href="./img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./img/favicon-16x16.png">
<link rel="shortcut icon" href="./img/favicon.ico">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>THIS IS PERSON</h1>
<nav>
<ul>
<li><a data-open class="Howto" href="">How to play</a></li>
<li><a data-open class="Credits" href="">Credits</a></li>
<li><a data-open class="Statistics" href="">Statistics</a></li>
</ul>
</nav>
</header>
<div id="canvas-wrapper" class="loading">
<button class="load">START AI</button>
<div class="loading-screen hidden"><span>ACCESSING YOUR CAMERA</span></div>
</div>
<div class="timer__wrapper hidden">
ELAPSED TIME <span class="timer">0</span> SECONDS
</div>
<div class="share hidden">
<button class="share__friends">Share with Friends</button>
<button class="share__image">Download Image</button>
</div>
<dialog id="howto">
<form method="dialog">
<button>✕</button>
</form>
<h2>How To Play</h2>
<p>The goal of the game is to show a desired object in the camera as quickly as possible. Every day, the object changes.</p>
<p>The algorithm examines each object seen in the camera and compares it to the requested object. Meanwhile, a timer is set.</p>
<p>If you hold the matching object in front of the camera and the algorithm is convinced, the game is over and you can brag to your friends about how quickly you finished it.</p>
</dialog>
<dialog id="credits">
<form method="dialog">
<button>✕</button>
</form>
<h2>Credits</h2>
<p>My name is <a href="https://niklasbarning.de/">Niklas Barning</a>, UX designer and digital tinkerer from Bremen.</p>
<p>This game is written in JavaScript and uses the <a href="https://p5js.org/">p5.js</a> library for creating and manipulating the canvas element. The <a href="https://ml5js.org/">ml5.js</a> library is used for object detection using the <a href="https://github.com/tensorflow/tfjs-models/tree/master/coco-ssd">COCO-SSD</a> model.</p>
<p>Please checkout the <a href="https://github.com/barning/THIS-IS-PERSON">GitHub Repo</a> for this project.</p>
<p>Cover image was generated by <a href="https://mastodon.social/@nocksock">Nils Riedemann</a></p>
</dialog>
<dialog id="statistics">
<form method="dialog">
<button>✕</button>
</form>
<h2>Statistics</h2>
<p>How fast did you convinced the AI?</p>
<ul class="statistics__list"></ul>
</dialog>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/ml5.min.js"></script>
<script src="script.js"></script>
</html>