forked from this-vijay/movement-math
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathlesson-2.html
289 lines (228 loc) · 10.5 KB
/
lesson-2.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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!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/css?family=Unica+One|Rubik|Muli|Prompt|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" />
</head>
<body>
<div id="root" class="container">
<md>
# The Topology of Movement
<div class="flex-container">
<img src="./images/banner-2.png" class="shrinkToFit" width="100%" style="border:3px solid #332241; border-radius: 15px;">
</div>
In this second lesson, we use a novel movement-based approach to understand the shape - or <i>topology</i> - of orientation space, with the help of a simple puppet. I haven't seen this approach elsewhere, but I feel it leads to very useful insights, which are often skipped in standard treatments.
</md>
<p> Without further ado, let's proceed to the first warm-up challenge:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/-wAlt4A1iv4"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<challenge label="Challenge 1: Perform the stationary path" palette="future" image="./images/challenge-icon.png" instruction="Move your puppet in an interesting loop without changing its spatial orientation.">
</challenge>
<p> Okay, the first challenge was hopefully not too challenging. Once you've completed it, you can proceed to the next video:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/44VDKj1RhdE"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<challenge label="Challenge 2: Perform a wobble loop" palette="future" image="./images/challenge-icon.png" instruction="Move your puppet in a wobble that begins and ends at the base orientation.">
</challenge>
<p> Have you completed your own wobble loop? Let's see how it compares with other wobbles:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/CYaxyE-LtuQ"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<challenge label="Challenge 3: Perform a rotation loop" palette="future" image="./images/challenge-icon.png" instruction="Perform a 360° rotation loop about an axis of your choice.">
</challenge>
<p> Did you complete the third movement challenge? Then you're officially warmed up, and ready for the next puzzle, which involves a very important definition:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/psyEzVW87o8"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<mcq-pictorial label="Exercise 1" palette="past" :images="[]" question="Which of the following loops on the torus is non-trivial?" :choices="[
{
correct: false,
answer: `A`,
picture: `./images/loop-A.png`,
response: `Not quite. Zoom in if you need to, and see if you can gradually contract this loop to the basepoint.`
},
{
correct: true,
answer: `B`,
picture: `./images/loop-B.png`,
response: `Correct! This loop cannot be contracted to the basepoint, since it goes around the sleeve of the torus.`
},
{
correct: false,
answer: `C`,
picture: `./images/loop-C.png`,
response: `No, this loop can in fact be gradually deformed to the basepoint!`
},
{
correct: false,
answer: `D`,
picture: `./images/loop-D.png`,
response: `No, this loop can easily be contracted to the basepoint.`
}
]">
</mcq-pictorial>
<md>
Remember, a <i>loop</i> in orientation space is a movement sequence that finishes where it began, at the <i>base orientation</i>. And a loop is <i>trivial</i> if we can enact a gradual deformation to the stationary loop: that is, perform the loop repeatedly with small changes each time, until we reach the stationary loop.
</md>
<movement-challenge label="Challenge 4: A trivial loop in orientation space" palette="future" image="./images/challenge-icon.png" :instructions="[`Fix an axis A. Let L be the loop that does a 360° rotation about axis A, followed by another 360° rotation in the opposite direction about A.`, `Enact a gradual deformation of the loop L to the stationary loop. Make sure each intermediate loop starts and ends at the base orientation.`]">
</movement-challenge>
<p> Have you completed the fourth challenge? Let's see how it compares with other solutions:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/XuGnlzdBdL8"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<challenge label="Challenge 5: Enact an equivalence" palette="future" image="./images/challenge-icon.png" instruction="Pick any two axes of rotation. Show that the 360° rotation loop about one axis is equivalent to the 360° rotation loop about the other axis.">
</challenge>
<p> Once you've enacted the gradual deformation of one 360° rotation loop to another, you can see proceed to the next challenge:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/UFy05eHrw9E"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<challenge label="Challenge 6: Two ways to track an object" palette="future" image="./images/bala-tracking.png" instruction="Find both the trivial and nontrivial loops that allow Bala's nose vector to always point at the orbiting particle.">
</challenge>
<p> Did you find <i>both</i> the trivial and nontrivial loops that track the particle? If so, you can proceed to the next video:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/1i0uKbDsYc0"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<md>
<br>
At every instant of the time, as θ goes from 0 to 2𝝿, the trivial loop's orientation can be achieved via a composition of two rotations:
</md>
<mcq-pictorial label="Exercise 2" palette="past" :images="[`./images/hint.gif`]" question="What spatial orientation do we achieve if we perform a 270° y-rotation followed by a 270° (-x)-rotation?" :choices="[
{
correct: false,
answer: `A`,
picture: `./images/tracking-A.png`,
response: `No. Interesting guess, but you don't return to where you started!`
},
{
correct: false,
answer: `B`,
picture: `./images/tracking-B.png`,
response: `Not quite. In the above image, examine the result of the 270° y-rotation. Imagine performing a 270° (-x)-rotation to that result.`
},
{
correct: false,
answer: `C`,
picture: `./images/tracking-C.png`,
response: `Nope. If you're having trouble, it might be easier to think of the 270° (-x)-rotation as a 90° x-rotation.`
},
{
correct: true,
answer: `D`,
picture: `./images/tracking-D.png`,
response: `Yes! Note that this is also your orientation when you're 3/4 of the way through the trivial tracking loop.`
}
]">
</mcq-pictorial>
<md>
Somehow, performing two nontrivial loops <i>simultaneously</i> results in a trivial loop. What's more, if we <i>concatenate</i> two nontrivial loops, performing one after the other, the result is once again a trivial loop!
</md>
<challenge label="Challenge 7: the 720° loop" palette="future" image="./images/challenge-icon.png" instruction="Enact a gradual deformation from a 720° rotation loop to the stationary loop.">
</challenge>
<p> I hope you were able to enact a gradual deformation of a 720° rotation loop to the stationary loop! There are many ways to do this, but we'll examine one approach in the next video:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/nKT74iWvfhY"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<mcq label="Exercise 3" palette="past" :images="[`./images/foot-bala.png`]" question="At the end of every football match, Foot-Bala returns to his base orientation. Thus, over the course of a match, Foot-Bala traces out a loop in orientation space. That loop must either be equivalent to the stationary loop, or to a single 360° rotation loop about the x-axis." :choices="[
{
correct: true,
answer: `True`,
response: `Correct, since all non-trivial loops are equivalent to each other.`
},
{
correct: false,
answer: `False`,
response: `No, the statement is true. Because, surprisingly, all non-trivial loops in orientation space are equivalent to each other!`
}
]">
</mcq>
<p> Okay, but how do all these loops and deformations in orientation space relate to the string trick, from the introduction video? Let's conclude with a closer look at the string trick, and take it to its logical extreme: <i>the foam mattress trick</i>:</p>
<div class="video-container">
<iframe
src="https://www.youtube.com/embed/qp4PyWPASco"
width="700"
height="480"
frameborder="0"
allowfullscreen="">
</iframe>
</div>
<div class="nav-container" style="width: 100%;">
<a href="./lesson-1.html" class="nav-button"><< Lesson 1 </a>
<a href="./lesson-3.html" class="nav-button" >Lesson 3 >></a>
</div>
<div class="nav-container center" style="width: 100%;">
<a href="./index.html" class="nav-button" >Home</a>
</div>
</div>
<!-- here we define data accessible throughout the page -->
<script>
let data = {
aside1: {
expand: false
},
};
</script>
<!-- vue-definitions.js runs vue.js and defines the components -->
<script src="vue-definitions.js"></script>
</body>
</html>