-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
161 lines (160 loc) · 6.91 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
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>🙄🎶</title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<!-- Place favicon.ico in the root directory -->
</head>
<body>
<!--[if lt IE 8]>
<p class="browserupgrade">
You are using an <strong>outdated</strong> browser. Please
<a href="http://browsehappy.com/">upgrade your browser</a> to improve
your experience.
</p>
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script
src="https://webgazer.cs.brown.edu/webgazer.js"
type="text/javascript"
></script>
<script src="https://unpkg.com/tone"></script>
<div id="controls">
<button id="playpause">play</button>
<button id="mousegaze">Use gaze</button>
</div>
<div id="welcome" class="center">
<h2>Eyeroll Theremin</h2>
<p>Click the note to get started</p>
</div>
<div id="calibration" class="center">
<h2>Calibrating…</h2>
<p>Click the note</p>
<div id="progress">
<div></div>
</div>
</div>
<div id="play" class="center">
<h2>Look around</h2>
<div id="face">
<svg
style="height: 100%"
enable-background="new 0 0 128 128"
viewBox="0 0 128 128"
version="1.1"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg"
>
<defs id="defs11">
<filter
id="mask-powermask-path-effect17_inverse"
inkscape:label="filtermask-powermask-path-effect17"
style="color-interpolation-filters: sRGB"
height="100"
width="100"
x="-50"
y="-50"
>
<feColorMatrix
id="mask-powermask-path-effect17_primitive1"
values="1"
type="saturate"
result="fbSourceGraphic"
/>
<feColorMatrix
id="mask-powermask-path-effect17_primitive2"
values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0 "
in="fbSourceGraphic"
/>
</filter>
</defs>
<radialGradient
id="a"
cx="63.6"
cy="62.9"
gradientUnits="userSpaceOnUse"
r="56.9597"
>
<stop offset=".5" stop-color="#fde030" id="stop1" />
<stop offset=".92" stop-color="#f7c02b" id="stop2" />
<stop offset="1" stop-color="#f4a223" id="stop3" />
</radialGradient>
<clipPath id="b">
<path
d="m49.52 41c-.34-.19-.67-.38-1-.54-8.35-4.15-18.48-.75-22.63 7.6s-.75 18.48 7.6 22.63 18.48.75 22.63-7.6c3.95-7.95 1.07-17.61-6.6-22.09z"
id="path3"
/>
</clipPath>
<clipPath id="c">
<path
d="m94.16 41c-.34-.19-.68-.38-1-.54-8.32-4.14-18.41-.74-22.55 7.57-4.14 8.32-.74 18.41 7.57 22.55 8.32 4.14 18.41.74 22.55-7.57 3.94-7.92 1.07-17.54-6.57-22.01z"
id="path4"
/>
</clipPath>
<rect
style="fill: #ffffff; fill-opacity: 1"
id="rect20"
width="88.079231"
height="39.192623"
x="20.52042"
y="38.444984"
/>
<g id="pupils">
<circle
style="fill: #422b0d; fill-opacity: 1; stroke-width: 1.16544"
id="path13"
cx="41.75"
cy="55.52"
r="7.3099995"
/>
<circle
style="fill: #422b0d; fill-opacity: 1; stroke-width: 1.16544"
id="circle13"
cx="86.379997"
cy="55.52"
r="7.3099995"
/>
</g>
<g id="g20">
<g id="g12">
<path
id="path5"
style="fill: url(#a)"
d="M 63.599609 7 C 35.699665 7 5.5996094 24.500467 5.5996094 62.900391 C 5.5996094 101.30031 35.699665 118.80078 63.599609 118.80078 C 78.999579 118.80078 93.400022 113.60076 104 104.30078 C 115.49998 94.100802 121.59961 79.800357 121.59961 62.900391 C 121.59961 46.000425 115.49998 31.600369 104 21.400391 C 93.400022 12.100409 79.099579 7 63.599609 7 z M 41.224609 38.691406 C 43.682005 38.722003 46.171099 39.293752 48.519531 40.460938 C 48.849531 40.620936 49.179533 40.81 49.519531 41 C 57.189517 45.479992 60.069133 55.13986 56.119141 63.089844 C 51.969149 71.439826 41.840218 74.839445 33.490234 70.689453 C 25.140252 66.539461 21.740633 56.410531 25.890625 48.060547 C 28.873432 42.058996 34.944601 38.613214 41.224609 38.691406 z M 85.892578 38.697266 C 88.340846 38.727299 90.820159 39.296564 93.160156 40.460938 C 93.480156 40.620937 93.820157 40.81 94.160156 41 C 101.80015 45.469996 104.67046 55.089774 100.73047 63.009766 C 96.590473 71.319757 86.499679 74.720074 78.179688 70.580078 C 69.869696 66.440082 66.469379 56.349289 70.609375 48.029297 C 73.584997 42.05649 79.635894 38.620512 85.892578 38.697266 z "
/>
<path
d="m 111.49,29.67 c 5.33,8.6 8.11,18.84 8.11,30.23 0,16.9 -6.1,31.2 -17.6,41.4 -10.6,9.3 -25,14.5 -40.4,14.5 -18.06,0 -37,-7.35 -48.18,-22.94 10.76,17.66 31,25.94 50.18,25.94 15.4,0 29.8,-5.2 40.4,-14.5 11.5,-10.2 17.6,-24.5 17.6,-41.4 0,-12.74 -3.47,-24.06 -10.11,-33.23 z"
fill="#eb8f00"
id="path10"
/>
<path
d="M 75,98 H 53 c -2.21,0 -4,-1.79 -4,-4 0,-2.21 1.79,-4 4,-4 h 22 c 2.21,0 4,1.79 4,4 0,2.21 -1.79,4 -4,4 z"
fill="#422b0d"
id="path11"
/>
</g>
<path
d="m 69.71,55.84 c 0.61,4.13 2.64,7.92 5.74,10.72 1.47,1.29 3.17,2.31 5,3 1.82,0.69 3.75,1.03 5.69,1 3.95,0 7.77,-1.45 10.72,-4.07 3.1,-2.8 5.13,-6.59 5.74,-10.72 h 0.2 c 0,9.2 -7.46,16.66 -16.66,16.66 -9.2,0 -16.66,-7.46 -16.66,-16.66 0,0 0,0 0,-0.01 z"
fill="#f4a223"
id="path8"
/>
<path
d="m 25.13,55.84 c 0.61,4.13 2.64,7.92 5.74,10.72 1.47,1.29 3.17,2.31 5,3 1.82,0.69 3.75,1.03 5.69,1 3.95,0 7.76,-1.45 10.72,-4.07 3.1,-2.8 5.13,-6.59 5.74,-10.72 h 0.2 c 0,9.2 -7.46,16.66 -16.66,16.66 -9.2,0 -16.66,-7.45 -16.66,-16.65 0,0 0,0 0,-0.01 z"
fill="#f4a223"
id="path9"
/>
</g>
</svg>
</div>
<h2>Happy jamming!</h2>
</div>
<span id="note">🎶</span>
<script src="script.js" type="text/javascript"></script>
</body>
</html>