-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.htm
332 lines (293 loc) · 15 KB
/
index.htm
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
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
<!DOCTYPE html>
<html lang="en"><head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-63681583-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-63681583-2');
</script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Movement Motion Mechanism | MoMoMe</title>
<meta name="description" content="MoMoMe is a project to explore Movements Motions and Mechanisms. It's an attempt to bring in a subjective approach to mechanical utomata making.">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="files/normalize.css">
<link rel="stylesheet" href="files/boostrap.css">
<link rel="stylesheet" href="files/momome.css">
<link rel="stylesheet" href="files/momome1.css">
</head>
<body>
<div class="page-wrapper page-home">
<div class="first-screen row">
<header>
<div class="header">
<div class="container row">
<div class="logo offset-md-1 col-md-3 col-9">
<a href="#">
<img src="files/MoMoMe.svg" alt="MOMOME homepage" width="100" height="23">
</a>
</div><!-- logo -->
<button class="btn-open-menu"><span></span></button>
<nav class="nav row col-md-13">
<ul class="page-nav list">
<li class="page-nav__item">
<a class="page-nav__link" href="#movement">Movement</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#motion">Motion</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#mechanism">Mechanism</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="./blog.htm">Blog </a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="./about.htm">About</a>
</li>
</ul><!-- page-nav -->
<li class="social-nav__item">
<a target="_ blank" href="https://github.com/wittywit/momome" rel="nofollow">
<img src="./files/github.svg" alt="Github repo of project">
</a>
</li>
</ul><!-- social-nav -->
</nav><!-- nav -->
</div>
</div>
<div class="mobile-nav">
<ul class="page-nav list">
<li class="page-nav__item">
<a class="page-nav__link" href="#movement">movement</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#motion">motion</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="#mechanism">mechanism</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="./blog.htm">Blog</a>
</li>
<li class="page-nav__item">
<a class="page-nav__link" href="./about.htm">About</a>
</li>
</ul><!-- page-nav -->
</div>
</header>
<div class="top-part__main">
<div class="container">
<div class="row">
<div class="top-part__wrap col-lg-9 offset-md-4 col-md-8">
<p class="top-part__title h1">a systematic aproach to building Automaton </p>
<h1 class="top-part__description">from movement to motion to mechanism </h1>
</div>
</div>
</div>
</div>
<div class="container"> <div class="page__block how-we-work offset-md-2 offset-xl-4 col-lg-10">
<div class="page__title-h2">
<a class="page__title-h2-link link" href="./how-momome-works.htm">How it works</a>
</div>
<ul class="page__list--type-1">
<li class="page__item--type-1">
<div class="page__item-wrap-img">
<img class="page__item-img" src="files/story.svg" alt="">
</div>
<div class="page__item-title--type-1">Story / Concept</div>
</li>
<li class="page__item-circle"><span></span></li>
<li class="page__item--type-1">
<div class="page__item-wrap-img">
<img class="page__item-img" src="files/movement.svg" alt="">
</div>
<div class="page__item-title--type-1">Movement</div>
</li>
<li class="page__item-circle"><span></span></li>
<li class="page__item--type-1">
<div class="page__item-wrap-img">
<img class="page__item-img" src="files/motion.svg" alt="">
</div>
<div class="page__item-title--type-1">Motion</div>
</li>
<li class="page__item-circle"><span></span></li>
<li class="page__item--type-1">
<div class="page__item-wrap-img">
<img class="page__item-img" src="files/mechanism.svg" alt="">
</div>
<div class="page__item-title--type-1">Mechanism</div>
</li>
<li class="page__item-circle"><span></span></li>
<li class="page__item--type-1">
<div class="page__item-wrap-img">
<img class="page__item-img" src="files/automata.svg" alt="">
</div>
<div class="page__item-title--type-1">Automata</div>
</li>
</ul>
</div></div>
</div>
<section class="movement" id="movement">
<div class="container">
<div class="movement__header row">
<h2 class="movement__title h2 offset-xl-4 col-xl-2 offset-md-3 col-md-12">Movement</h2>
<p class="movement__description description offset-xl-1 col-xl-8 offset-md-3 col-md-12">A movement is about the "quality" of the motion rather than the motion alone. Movements are poetic, they are complete motions with a sense of purpose and direction. </p>
</div>
<div class="movement__main row">
<div class="movement offset-xl-1 col-xl-3 offset-lg-1 col-lg-4 offset-md-3 col-md-5 offset-ip-3 col-ip-5 order-lg-2">
<h3 class="movement__name"><a class="link" href="#software-development-movement">SPACE</a></h3>
<p class="movement__description description--small">Space is through which a body moves. It can be personal space or general space, with direction, focus, levels and size. </p>
<a class="movement__more link link--line" href="#software-development-movement">Learn more</a>
</div>
<div class="movement offset-xl-1 col-xl-3 offset-lg-1 col-lg-4 offset-md-3 col-md-5 offset-ip-1 col-ip-5 order-lg-3">
<h3 class="movement__name"><a class="link" href="#mobile-development-movement">TIME</a></h3>
<p class="movement__description description--small">Every element in this universe flows in time. Beat, tempo,rhythm are all elements of time, which make a movement appear sudden,slow or sustained. </p>
<a class="movement__more link link--line" href="#mobile-development-movement">Learn more</a>
</div>
<div class="movement offset-xl-1 col-xl-3 offset-lg-1 col-lg-4 offset-md-3 col-md-5 offset-ip-3 col-ip-5 order-lg-5">
<h3 class="movement__name"><a class="link" href="#blockchain-development-movement">Force</a></h3>
<p class="movement__description description--small">Force is the energy that when applied to a body kick starts movement in a body. Force can be sharp, strong light, heavy, bound,free flowing. </p>
<a class="movement__more link link--line" href="#blockchain-development-movement">Learn more</a>
</div>
<div class="movement offset-xl-1 col-xl-3 offset-lg-1 col-lg-4 offset-md-3 col-md-5 offset-ip-1 col-ip-5 order-lg-6">
<h3 class="movement__name"><a class="link" href="#augmented-reality-development-movement">BODY</a></h3>
<p class="movement__description description--small">A movement is realised when the body parts have a conversation with one another.A body in motion establishes relationship with space, time, and force around it. </p>
<a class="movement__more link link--line" href="#augmented-reality-development-movement">Learn more</a>
</div>
</div>
<a class="movement__btn btn offset-lg-7 offset-md-3 offset-ip-3" href="./Movement.htm">Explore Movement</a>
</div>
</section>
<section class="motion" id="motion">
<div class="container">
<div class="motion__header row">
<h2 class="motion__title h2 offset-xl-4 col-xl-10 offset-md-3 col-md-12 order-1">Motion</h2>
<p class="motion__description description offset-xl-4 col-xl-10 offset-md-3 col-md-12 order-2">Motion of automata can be broken down into a combination of some basic motions. Here are six basic motions. These can be downloaded and printed. The cards can be scanned using an app to show its AUGMENTED Reality content. </p>
<a class="motion__btn btn offset-xl-4 offset-md-3 order-md-3 order-4" href="#motion">Know More</a>
<div class="motion__cases row order-md-4 order-3">
<!-- ###############################################-->
<div class="case offset-lg-2 col-lg-4 col-md-5">
<a class="case_link" href="#">
<img class="case__img" src="./files/updwn.svg" alt="">
</a>
<a class="case_link" href="#">
<span></span>
</a><div class="case__wrap"><a class="case_link" href="#">
</a><h3 class="case__title"><a class="case_link" href="#"></a><a class="case_link link" href="#">Up and Down</a></h3>
<div class="case__description description--small">Motion that moves up and then down in staright succession.
</div>
<a class="case__see link link--line" href="./motion.htm">See
case</a>
</div>
</div>
<div class="case offset-lg-1 col-lg-4 col-md-5">
<a class="case_link" href="#case-study-reducing-cost-for-blockchain-platform">
<span></span>
<img class="case__img" src="./files/roundtwst.svg" alt="">
</a>
<div class="case__wrap">
<h3 class="case__title"><a class="case_link link" href="#case-study-reducing-cost-for-blockchain-platform">Round and twisting up</a>
</h3>
<div class="case__description description--small">A case where the body rotates and climbs up in a twisting manner.
</div>
<a class="case__see link link--line" href="#case-study-reducing-cost-for-blockchain-platform">See case</a>
</div>
</div>
<div class="case offset-lg-1 col-lg-4 col-md-5">
<a class="case_link" href="#thedeep-vr-development-case-study">
<img class="case__img" src="./files/roundandround.svg" alt="">
</a>
<div class="case__wrap">
<a class="case_link" href="#thedeep-vr-development-case-study">
<span></span>
</a><h3 class="case__title"><a class="case_link" href="#thedeep-vr-development-case-study"></a><a class="case_link link" href="#thedeep-vr-development-case-study">Round and Round</a>
</h3>
<div class="case__description description--small">Many motions such as ...... can be realised by rotating on the perpendicular axis.
</div>
<a class="case__see link link--line" href="#thedeep-vr-development-case-study">See
case</a>
</div>
</div>
<!-- ###############################################-->
<div class="case offset-lg-2 col-lg-4 col-md-5">
<a class="case_link" href="#hes-deadicated-mechanism-case-study">
<img class="case__img" src="./files/rot.svg" alt="">
</a>
<a class="case_link" href="#hes-deadicated-mechanism-case-study">
<span></span>
</a><div class="case__wrap"><a class="case_link" href="#hes-deadicated-mechanism-case-study">
</a><h3 class="case__title"><a class="case_link" href="#hes-deadicated-mechanism-case-study"></a><a class="case_link link" href="#hes-deadicated-mechanism-case-study">Rotation</a></h3>
<div class="case__description description--small">When the body rotates around a central axis, other than its own.
</div>
<a class="case__see link link--line" href="#hes-deadicated-mechanism-case-study">See
case</a>
</div>
</div>
<div class="case offset-lg-1 col-lg-4 col-md-5">
<a class="case_link" href="#case-study-reducing-cost-for-blockchain-platform">
<span></span>
<img class="case__img" src="./files/updown.svg" alt="">
</a>
<div class="case__wrap">
<h3 class="case__title"><a class="case_link link" href="#case-study-reducing-cost-for-blockchain-platform">Up and Down Short</a>
</h3>
<div class="case__description description--small">A body can move up complete and while returning back down the movement can be restricted. Creating a jery and wavy motion.
</div>
<a class="case__see link link--line" href="#case-study-reducing-cost-for-blockchain-platform">See case</a>
</div>
</div>
<div class="case offset-lg-1 col-lg-4 col-md-5">
<a class="case_link" href="#thedeep-vr-development-case-study">
<img class="case__img" src="./files/seq.svg" alt="">
</a>
<div class="case__wrap">
<a class="case_link" href="#thedeep-vr-development-case-study">
<span></span>
</a><h3 class="case__title"><a class="case_link" href="#thedeep-vr-development-case-study"></a><a class="case_link link" href="#thedeep-vr-development-case-study">Sequential Up and Down</a>
</h3>
<div class="case__description description--small">The up and down movement can be spread across the body
</div>
<a class="case__see link link--line" href="#thedeep-vr-development-case-study">See
case</a>
</div>
</div>
<!-- ###############################################-->
</div>
</div>
</div>
</section>
<section class="mechanism" id="mechanism">
<div class="container">
<div class="mechanism__header row">
<h2 class="mechanism__title h2 offset-xl-4 col-xl-2 offset-md-3 col-md-12">Mechanism</h2>
<p class="mechanism__description description offset-xl-1 col-xl-8 offset-md-3 col-md-12">To help materialise these concepts of movement and motion and to give them a tangible form, here is a kit that can be built to create all six basic motion. </p>
</div>
</div>
</section>
</div>
<footer class="footer">
<div class="footer__wrap row">
<span class="footer__copyright copyright col-lg-4 order-lg-1 order-4">
<span>MoMoMe</span>
</span>
<div class="footer__contact col-lg-3 order-lg-2 order-1">
<img class="footer__icon" src="./files/email.svg" alt="">
</div>
<div class="footer__contact col-lg-3 order-lg-3 order-2">
<img class="footer__icon" src="./files/email.svg" alt="">
</div>
<div class="footer__contact col-lg-4 order-lg-4 order-3">
<img class="footer__icon" src="./files/map.svg" alt="">
<a class="footer__link link" target="_ blank" href="#" rel="nofollow">India</a>
</div>
<span class="footer__author col-lg-4 order-lg-5 order-6">
<a class="link" target="_ blank" href="#" rel="nofollow">Pranshu </a>
</span>
</div>
</footer>
<script src="./files/main.js"></script>
</body></html>