-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
302 lines (275 loc) · 15.8 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
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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>coach-in</title>
<meta name="description" content="coach-in is a wearable device to teleoperate a user’s body. " />
<meta name="keywords" content="ems, muscle, ios, sensor, esp32" />
<meta name="author" content="m19s" />
<link rel="shortcut icon" href="./assets/favicon.ico">
<link href="https://fonts.googleapis.com/earlyaccess/mplus1p.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/bulma.min.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/aos.css" />
</head>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="">
<div class='header__logo'>
<img src="./assets/menulogo.svg" alt="Placeholder image">
</div>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
</div>
<div class="navbar-end">
<div class='header__nav--first-item header__nav'>
<a href="#about">About</a>
</div>
<div class='header__nav--secound-item header__nav'>
<a href="#tech">Technologies</a>
</div>
<div class='header__nav--secound-item header__nav'>
<a href="#experience">Experiences</a>
</div>
<div class='header__nav--third-item header__nav'>
<a href="#aboutus">Mat5utake</a>
</div>
</div>
</div>
</nav>
<section class='keyvisual-section'>
<image src="./assets/mesh_sp.png" id="kv"></image>
</section>
<section class='about' id='about'>
<div>
<h2 class='section__title section__title-about title is-3'>What is coach-in?</h2>
<figure class="image is-512x512 discreption__image-box discreption__image-box--right" data-aos="fade-up" data-aos-easing="ease-in-sine"
data-aos-duration="500">
<img src="./assets/logo.svg" alt="Placeholder image">
</figure>
<div class='discreption'>
<p class='discreption__text discreption__text--about'>
coach-in（コーチ・イン）は電気刺激を用いて装着者の身体を駆動させるウェアラブルデバイスです。
</p>
<p class='discreption__text discreption__text--about'>
スポーツトレーニングのコーチがあなたに触れて身体の動かし方を教えてくれるように、coach-inは筋肉に電気刺激を与え身体の動かし方を教示します。
</p>
<p class='discreption__text discreption__text--about'>
coach-inはコーチが自分に憑依するような、自分の身体が誰かに操られる体験を提供します。</p>
</p>
</div>
</div>
</section>
<section class='tech contents' id='tech'>
<h2 class='section__title title is-3 section__title--tech'>Technologies</h2>
<div class="columns tech__columns">
<div class="column is-one-quarter card" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="500">
<div class="card-image">
<figure class="image is-128x128">
<img src="./assets/elec.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<p class="title is-4">EMS</p>
<p class="subtitle is-6">Electric Muscle Stimulationによる身体駆動</p>
筋肉は、脳からの命令となる電気的な刺激を受け運動します。 電気筋肉刺激（Electric Muscle Stimulation：EMS）は脳の命令と同様の刺激を電気によって与え筋肉を運動させる技術です。 coach-inはこの技術を用いユーザの指や足の筋肉を動かします。
我々は身体の駆動にEMSを活用することで、モータやワイヤーを用いる場合と比べ軽量・小型なウェアラブルデバイスを開発しています。
<br>
<a>#stimulation</a>
<a>#muscle</a>
</div>
</div>
</div>
<div class="column is-one-quarter card" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="600">
<div class="card-image">
<figure class="image is-128x128">
<img src="./assets/iphone.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<p class="title is-4">Smartphone Application</p>
<p class="subtitle is-6">Bluetoothによる様々な機器との連携</p>
coach-inは内蔵のBluetoothモジュールを通してコンピュータやスマートフォンと通信することで、様々な機器と連携できます。 例えば、コンピュータに接続されたゲームコントローラーから電気刺激を与える命令を送り他人の身体を遠隔操作したり、スマホで再生している音楽に合わせて電気刺激を行い勝手に足踏みしてしまう体験を提供できます。
<br>
<a>#bluetooth low energy</a>
</div>
</div>
</div>
<div class="column is-one-quarter card" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="700">
<div class="card-image">
<figure class="image is-128x128">
<img src="./assets/sensor.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<p class="title is-4">Sensors</p>
<p class="subtitle is-6">センサフュージョンによる行動センシング </p>
coach-inには加速度センサ・ジャイロセンサ・筋電センサなど複数のセンサを搭載しており、装着者の身体動作をリアルタイムにセンシングします。 coach-inに搭載されたマイコンがこれらのセンサデータをリアルタイムに分析し、その結果に応じてユーザの筋肉の動かし方を決定します。
<br>
<a>#ESP32</a>
<a>#bluetooth</a>
</div>
</div>
</div>
<div class="column is-one-quarter card" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="800">
<div class="card-image">
<figure class="image is-128x128">
<img src="./assets/mike.png" alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="content">
<p class="title is-4">Virtual Assistant</p>
<p class="subtitle is-6">音声対話インターフェイスによる身体との対話</p>
coach-inは音声対話アシスタントを搭載しており、あなたは声でデバイスを操作できます。 あなたがcoach-inに喋りかけると、その音声はクラウドサーバへ送信され解析されます。 解析結果に応じてcoach-inに取り付けられたLEDやスピーカーから再生される音声でユーザにフィードバックを与えるとともに、筋電機能によりあなたの身体を駆動させます。
coach-inはウェアラブルデバイスと対話し自分の身体を駆動させることで、身体に自分以外の"存在"をインストールする体験を提案します。
<br>
<a>#alexa</a>
<a>#aws lambda</a>
</div>
</div>
</div>
</div>
</section>
<section class='experience' id='experience'>
<h2 class='section__title title is-3'>Experiences</h2>
<p>coach-inを使うことで、例えば次のような体験ができます。</p>
<div class="tile is-ancestor">
<div class="tile is-parent" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="300">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title is-4">強制ダンスフロア体験</p>
<p class="subtitle">足に装着することで、映像とシンクロして足踏みしてしまう</p>
<div class="content">
</div>
</div>
</article>
</div>
<div class="tile is-parent" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="500">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title is-4">遠隔二人羽織体験</p>
<p class="subtitle">腕に装着することで、他人の腕の動きが自分の腕にシンクロする「遠隔二人羽織体験」
</p>
<div class="content">
</div>
</div>
</article>
</div>
<div class="tile is-parent" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="700">
<article class="tile is-child notification is-success">
<div class="content">
<p class="title is-4">ミギー憑依体験</p>
<p class="subtitle">音声対話エージェント機能を活用した自分の右手との対話</p>
<div class="content">
</div>
</div>
</article>
</div>
</div>
</section>
<section class='developing' id='developing'>
<h2 class='section__title title is-3'>Gallery</h2>
<p>現在、左右の腕に装着でき、指を駆動させるデバイスとして開発を進めています。</p>
<div class="columns">
<div class="column is-one-third " data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="200">
<div class="">
<figure class="image is-512x512">
<img src="./assets/ model.png" alt="Placeholder image">
</figure>
</div>
</div>
<div class="column is-one-third " data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="300">
<div class="">
<figure class="image is-512x512">
<img src="./assets/modelwriting.png" alt="Placeholder image">
</figure>
</div>
</div>
<div class="column is-one-third" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="400">
<div class="">
<figure class="image is-512x512">
<img src="./assets/tryingmodel.png" alt="Placeholder image">
</figure>
</div>
</div>
</div>
<div class="columns">
<div class="column is-one-third " data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="500">
<div class="">
<figure class="image is-512x512">
<img src="./assets/3dploto.jpg" alt="Placeholder image">
</figure>
</div>
</div>
<div class="column is-one-third" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="600">
<figure class="image is-512x512">
<img src="./assets/egawa.JPG" alt="Placeholder image">
</figure>
</div>
<div class="column is-one-third" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="700">
<figure class="image is-1024x1024 discreption__image-box system__image" data-aos="fade-up" data-aos-easing="ease-in-sine"
data-aos-duration="500">
<img src="./assets/system.png" alt="Placeholder image">
</figure>
</div>
</div>
<div class="columns">
<div class="column is-one-third" data-aos="fade-up" data-aos-easing="ease-in-sine" data-aos-duration="800">
<figure class="image is-1024x1024 discreption__image-box system__image" data-aos="fade-up" data-aos-easing="ease-in-sine"
data-aos-duration="500">
<img src="./assets/mft_badge.png" alt="Placeholder image">
</figure>
</div>
</div>
</section>
<section class='aboutus' id='aboutus'>
<div class='aboutus'>
<h2 class='section__title section__title--aboutus title is-3'>About Us</h2>
<div class='m19sdiscription'>
<a class='m19slink__img' href="http://www.m19s.tokyo/">
<img src="./assets/m19_opaslogo.png" alt="Placeholder image" class='m19slogo'>
</a>
<p class='discreption__text'>
松茸電脳科技（Mat5utake Technologies）は、技術を用いて世の中の暮らしをよくするプロダクツを生み出す"クリエイティヴハッカー集団 "です。 スマートフォンアプリ開発、組み込み開発、機械学習、インターネッツの技術者によって構成されています。
</p>
</div>
</div>
<a class='m19slink' href="http://www.m19s.tokyo/">Mat5utake Technologies, 2018</a>
</section>
<script>
document.addEventListener('DOMContentLoaded', function () {
var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
if ($navbarBurgers.length > 0) {
$navbarBurgers.forEach(function ($el) {
$el.addEventListener('click', function () {
var target = $el.dataset.target;
var $target = document.getElementById(target);
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
}
});
</script>
<script src="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js"></script>
<script>
AOS.init();
</script>
<!--AOS設定スクリプト-->
</body>
</html>