-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
43 lines (34 loc) · 1.83 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
<!DOCTYPE html><html lang="en"><head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet">
<script src="p5.js"></script>
<script src="p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
</head>
<body>
<section>
<textarea id="variable" rows="3">Tilt & Move & Type</textarea>
</section>
<div id="ios"></div>
<section id="font-info">
<div>weight <span id="weight">default</span></div>
<div>slant <span id="slant">default</span></div>
<div>casual <span id="casual">default</span></div>
<!-- <div>size <span id="size">default</span></div> -->
</section>
<section class="start-text">
<div>
<h1>Variable font - mobile device tilter</h1>
<p>Please tap to begin, then tilt and spin. This page uses a mobile phone's tilt and compass hardware to vary aspects of the type.</p>
<ul>
<li>tilt the phone up and down to control <strong>weight</strong></li>
<li>left and right to control how <strong>casual</strong> the type is</li>
<li>rotate (or turn around) for <strong>slant</strong></li>
</ul>
<p><a href="https://fonts.google.com/specimen/Recursive?preview.text_type=custom">Google's variable font Recursive</a> allows for various settings to be varied, you can see more about that on their <a href="https://fonts.google.com/variablefonts">variable font page</a></p>
<p>You can see the source here: <a href="https://github.com/amcc/tilt-type">github.com/amcc/tilt-type</a> and play on the <a href="https://editor.p5js.org/amcc/sketches/dNOLfLgub">p5 editor here</a></p>
</div>
</section>
<script src="sketch.js"></script>
</body></html>