Remote CHIRIMEN デモ解説

__[デザイン戦略（インタラクション） / オープンデザイン実践](https://hackmd.io/s/HJVVNqnpZ)__ > __[REMOTE CHIRIMEN](https://hackmd.io/s/rkSDscnab)__ > # Remote CHIRIMEN デモ解説 [akkyie/chirimen-raspi3](https://github.com/akkyie/chirimen-raspi3) の `env/gc` ディレクトリに含まれているデモの接続・実行手順を説明します。なお、 [akkyie/chirimen-raspi3](https://github.com/akkyie/chirimen-raspi3) は [chirimen-oh/chirimen-raspi3](https://github.com/chirimen-oh/chirimen-raspi3) に `vr` のデモを加える形でフォークしたものです。 # GPIO デモ (`gpio/`) 配線は、各デモを開くと表示される図に従って配線してください。 ## 配線時の注意点 - RPi3側のピンの位置 - LEDの向き - 間違えると光りません。 - 図で曲がっている方の足が、実物の長い方の足に対応するように接続してください。 - 抵抗やLEDの線が触れ合っていないか - 回路がショートすると、場合によってはRPi3やPC本体が損傷する場合もあります。気をつけてください。 ## `gpio/LEDblink` 最も簡単なデモです。LEDがチカチカします。 ## `gpio/button` ボタンを押している間だけLEDが光ります。  # I²C デモ (`i2c/`) **I²C** はPhillips社で設計された通信規格です。 `i2c` ディレクトリには、I²C接続で使える各種センサーを用いるデモが含まれています。また、接続を簡単に行うため、Seeed社が開発した **Grove** という接続方法を用いるサンプルもあります。デバイスをI²Cで接続する場合、RPi3側のGND（グランド）、VCC（電源）、SDA（シリアルデータ）、SCL（シリアルクロック）にそれぞれ接続する必要がありますが、Groveを用いることで一つの端子に集約され、取り回しが楽になります。 Groveの先のセンサーを切り替えるだけで、様々な応用を試すことができます。参考: [Grove System (http://wiki.seeed.cc/Grove_System/)](http://wiki.seeed.cc/Grove_System/) ## `i2c/i2c-ADT7410` ADT7410 (温度センサ) を用いるデモです。 -55度から+150度までの温度を、0.0078度単位で計測できます。  ## `i2c/i2c-grove-accelerometer` 三軸加速度センサを用いるデモです。 X軸、Y軸、Z軸それぞれの加速度の変化から動きを計測したり、重力加速度の向きの変化から傾きを計測したりできます。 ## `i2c/i2c-grove-gesture` ジェスチャーを検知するセンサーを用いるデモです。センサーに対して上下左右方向と奥・手前方向の6種のジェスチャーを認識することができます。 ## `i2c/i2c-grove-light` 光センサーを用いるデモです。強い光を当てるほど（明るいほど）大きな値を示し、光が当たらなければ0に近づきます。 ## `i2c/i2c-grove-oledDisplay` OLEDディスプレイを用いるデモです。アルファベットと記号（ASCIIコードが32から126の文字）を用いて、任意のテキストを表示できます。 ## `i2c/i2c-grove-touch` タッチセンサーを用いるデモです。最大8個まで接続でき、センサーごとに触れているか/いないかを検知することができます。  # VRデモ (`vr/`) VRとRemote CHIRIMENを連携させるデモです。 ## A-Frameについてこのデモでは、[A-Frame](https://aframe.io/)という、JavaScriptとHTMLで3Dグラフィックス/VR空間を描画するためのライブラリを使っています。 A-Frameは、 [**エンティティ・コンポーネント・システム**](https://aframe.io/docs/0.7.0/introduction/entity-component-system.html#concept) というゲーム開発などで使われる考え方を元にしています。これは、ゲームや3Dグラフィックの空間を、そこにある要素（エンティティ）に、その性質や動きといった特徴（コンポーネント）を追加する形で定義する、という考え方です。例えば「箱」というエンティティは「座標」「大きさ」「材質」といったコンポーネントの組み合わせで定義され、「プレイヤー」は「座標」「視点」「入力」などのコンポーネントで定義されます。 A-Frameでは、HTMLの要素と属性という形で、エンティティとコンポーネントを記述することができます。例えば以下のように書けば、「座標が$(X, Y, Z)=(1, 2, 3)$、高さが4、幅が0.5、色が`#ABCDEF`（水色）の箱」を描画することができます。 ```htmlmixed= <a-box position="1 2 3" height="4" width="0.5" color="#ABCDEF"> ``` ### コンポーネントの自作コンポーネントは座標や大きさといった基本的なもの以外に、自分で定義することもできます。新しいコンポーネントを定義するには、JavaScriptで [`AFRAME.registerComponent`](https://aframe.io/docs/0.7.0/introduction/writing-a-component.html) という関数を呼びます。 ```javascript= AFRAME.registerComponent('hello-world', { init: function () { console.log('Hello, World!'); } }); ``` JavaScriptでコンポーネントを登録した **後** 、HTMLでエンティティにこのコンポーネントを追加すると、表示される **直前** に `init` 関数が呼ばれ、コンソールに `"Hello, World!"` と出力されます。 **注意:** JavaScriptでコンポーネントを登録する **前** にHTMLでエンティティにコンポーネントを追加すると、 `init` 関数が呼ばれないことがあります。`<script>` が `<body>` の最後にあったり、`async` や `defer` 属性が追加していたりする場合は注意してください。 ## `vr/blink` **配線:** `gpio/LEDblink` と同じ配線をしてください。明るい方のボックスを見つめるとLEDが点灯し、暗い方のボックスを見つめると消灯します。 VR空間の定義（`body`タグの中身）は以下のようになっています。 ```htmlmixed=  <a-scene>  <a-assets> <img id="city" src="https://cdn.aframe.io/360-image-gallery-boilerplate/img/city.jpg" crossorigin="anonymous"> </a-assets>  <a-sky id="sky" src="#city"></a-sky>  <a-box id="box" color="yellow" position="2 2 -7" stare-to-turn-on>  <a-animation attribute="rotation" to="0 360 360" dur="2000" repeat="indefinite" easing="linear"></a-animation>  <a-animation attribute="scale" to="1.2 1.2 1.2" repeat="1" dur="150" direction="alternate" begin="click"></a-animation> </a-box> <a-box id="box" color="gray" position="-2 2 -7" stare-to-turn-off> <a-animation attribute="scale" to="1.2 1.2 1.2" repeat="1" dur="150" direction="alternate" begin="click"></a-animation> </a-box>  <a-camera> <a-cursor></a-cursor> </a-camera> </a-scene> ``` また、 JavaScript は以下のようになっています。 ```javascript= // GPIOへの接続を確立 let port navigator.requestGPIOAccess().then(gpioAccess => { port = gpioAccess.ports.get(26) return port.export('out') }) .catch(console.error.bind(this)) // LEDをオンにしたりオフにしたりする関数を定義 function changeLight (isOn) { port.write(isOn ? 1 : 0) console.info(isOn ? 'turning on' : 'turning off') } // 「クリックしたらオンにする」コンポーネントを定義 AFRAME.registerComponent('stare-to-turn-on', { init () { this.el.addEventListener('click', () => changeLight(true)) } }) // 「クリックしたらオフにする」コンポーネントを定義 AFRAME.registerComponent('stare-to-turn-off', { init () { this.el.addEventListener('click', () => changeLight(false)) } }) ``` ### 使っている基本エンティティ - [`a-box`](https://aframe.io/docs/0.7.0/primitives/a-box.html) : 箱 - [`a-camera`](https://aframe.io/docs/0.7.0/primitives/a-camera.html) : カメラ（視点） - [`a-cursor`](https://aframe.io/docs/0.7.0/primitives/a-cursor.html) : カーソル - [`a-sky`](https://aframe.io/docs/0.7.0/primitives/a-sky.html) : 空（背景、遠景） ## `vr/light` **配線:** `i2c/i2c-grove-light` と同じ配線をしてください。光センサーが検知する明るさに応じて周囲が明るくなったり暗くなったりします。 ### 使っている基本エンティティ - [`a-text`](https://aframe.io/docs/0.7.0/primitives/a-text.html) : 文字 - [`a-sky`](https://aframe.io/docs/0.7.0/primitives/a-sky.html) : 空（背景、遠景） ## `vr/touch` **配線:** `i2c/i2c-grove-touch` と同じ配線をしてください。タッチセンサーに触れると、触れたセンサーに対応して赤、緑、青の光と白色光が点灯します。 ### 使っている基本エンティティ - [`a-box`](https://aframe.io/docs/0.7.0/primitives/a-box.html) : 箱 - [`a-sphere`](https://aframe.io/docs/0.7.0/primitives/a-sphere.html) : 球体 - [`a-cylinder`](https://aframe.io/docs/0.7.0/primitives/a-cylinder.html) : 円柱 - [`a-plane`](https://aframe.io/docs/0.7.0/primitives/a-plane.html) : 平面（地面） - [`a-sky`](https://aframe.io/docs/0.7.0/primitives/a-sky.html) : 空（背景、遠景） - [`a-light`](https://aframe.io/docs/0.7.0/primitives/a-light.html) : 光源