forked from this-vijay/movement-math
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
107 lines (68 loc) · 4.16 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
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Topology of Movement</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,500;1,600;1,700;1,800&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Unica+One|Rubik|Muli|Comme|Carter+One|Mako|Vollkorn&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.11.1/dist/katex.min.css" integrity="sha384-zB1R0rpPzHqg7Kpt0Aljp8JPLqbXI3bhnPWROx27a9N0Ll6ZP/+DiW/UqRcLbRjq" crossorigin="anonymous">
<script src="./libraries/katex.min.js"></script>
<script src="./libraries/p5.min.js"></script>
<script src="./libraries/marked.min.js"></script>
<script src="./libraries/vue.js"></script>
<script src="./libraries/vue-observe-visibility.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="description" content="Interactive Sandbox" />
<div id="root" class="container">
<md>
# The Topology of Movement
<div class="flex-container">
<img src="./images/banner-0.png" class="shrinkToFit" width="100%" style="border:2px solid #332241; border-radius: 15px;">
</div>
Welcome to The Topology of Movement, a free online workshop in which we explore spatial orientation, 3-D rotations, and the quaternion numbers through movement, puppetry, and Blender.
To get started, you can watch the introduction below:
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/L2FPP7yJMOk"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
The workshop is free of charge and open to everyone! It can be completed in anywhere from one hour to four hours, depending on your pace and how far you wish to go.
Click below for the first lesson, or scroll down for the table of contents:
<div class="nav-container" style="width: 100%; justify-content: center;">
<a href="./lesson-1.html" class="nav-button">Click to proceed to Lesson One >></a>
</div>
<br>
# Table of Contents
</md>
<div class="flex-container">
<a href="./index.html" class="chapter-link"><figure><img src="./images/banner-0.png" class="shrinkToFit center" width="100%"></figure></a>
<a href="./lesson-1.html" class="chapter-link"><figure><img src="./images/banner-1.png" class="shrinkToFit center" width="100%"></figure></a>
<a href="./lesson-2.html" class="chapter-link"><figure><img src="./images/banner-2.png" class="shrinkToFit center" width="100%"></figure></a>
<a href="./lesson-3.html" class="chapter-link"><figure><img src="./images/banner-3.png" class="shrinkToFit center" width="100%"></figure></a>
<a href="./lesson-4.html" class="chapter-link"><figure><img src="./images/banner-4.png" class="shrinkToFit center" width="100%"></figure></a>
<md>
Wondering how to use this video series? In this <a href="./learners.html" style="margin: 0;"> note for learners</a>, we summarize the content and describe potential pathways through these videos, based on your background and your interests.
<!--
Are you an educator? In this <a href="./teachers.html" style="margin: 0;"> note for teachers</a>, we describe ways the activities in this series can be incorporated into more standard courses.-->
Curious about the how this series came about? I've added a brief <a href="./about.html" style="margin: 0;">'About' page</a> which might answer some of your questions.
</md>
</div>
<div class="nav-container" style="width: 100%;justify-content: flex-end;">
<a href="./lesson-1.html" class="nav-button" >Lesson One >></a>
</div>
<!-- here we define data accessible throughout the page -->
<script>
let data = {
};
</script>
<!-- vue-definitions.js runs vue.js and defines the components -->
<script src="vue-definitions.js"></script>
</body>
</html>