forked from ClintH/interactivity
/
index.html
62 lines (60 loc) · 1.87 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
<!DOCTYPE html>
<html>
<head>
<title>interactivity</title>
<meta charset="UTF-8" />
<meta
name="viewport"
content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"
/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="apple-mobile-web-app-status-bar-style"
content="black-translucent"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto+Slab"
rel="stylesheet"
/>
<link rel="stylesheet" href="/base.css" />
</head>
<body touch-action="none">
<h1>interactivity</h1>
<p>
A collection of interactivity-oriented samples for student use. Most of
these are drawn from existing examples, but simplified.
</p>
<p>
Many of these samples will require additional steps to work. Each folder
has a <code>README.md</code> with installation steps and links for further
reading.
</p>
<ol>
<li>
<a href="basics/">Basics</a>: starter skeleton for mobile and a watch UI
</li>
<li><a href="pointer-events/">Pointer events</a>: touch, pressure</li>
<li><a href="canvas/">Canvas</a>: drawing visuals</li>
<li>
<a href="typography/">Typography</a>: basic techniques with type in
particular variable typefaces
</li>
<li>
<a href="data/">Data</a>: sending data between sketches, and persisting
online
</li>
<li>
<a href="camera/">Camera</a>: Computer vision, working with the camera
</li>
<li>
<a href="joystick/">Analog joystick</a>: working with an Arduino
component with web technologies
</li>
<li>
<a href="websockets/">Websockets</a>: data to and from a
microcontroller, Facebook Messenger
</li>
</ol>
</body>
</html>