Try   HackMD

デザイン戦略（インタラクション） / オープンデザイン実践 > REMOTE CHIRIMEN >

Remote CHIRIMEN デモ解説

akkyie/chirimen-raspi3 の env/gc ディレクトリに含まれているデモの接続・実行手順を説明します。

なお、 akkyie/chirimen-raspi3 は chirimen-oh/chirimen-raspi3 に vr のデモを加える形でフォークしたものです。

GPIO デモ (gpio/)

配線は、各デモを開くと表示される図に従って配線してください。

配線時の注意点

  • RPi3側のピンの位置
  • LEDの向き
    • 間違えると光りません。
    • 図で曲がっている方の足が、実物の長い方の足に対応するように接続してください。
  • 抵抗やLEDの線が触れ合っていないか
    • 回路がショートすると、場合によってはRPi3やPC本体が損傷する場合もあります。気をつけてください。

最も簡単なデモです。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/)

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という、JavaScriptとHTMLで3Dグラフィックス/VR空間を描画するためのライブラリを使っています。

A-Frameは、 エンティティ・コンポーネント・システム というゲーム開発などで使われる考え方を元にしています。
これは、ゲームや3Dグラフィックの空間を、そこにある要素（エンティティ）に、その性質や動きといった特徴（コンポーネント）を追加する形で定義する、という考え方です。

例えば「箱」というエンティティは「座標」「大きさ」「材質」といったコンポーネントの組み合わせで定義され、「プレイヤー」は「座標」「視点」「入力」などのコンポーネントで定義されます。

A-Frameでは、HTMLの要素と属性という形で、エンティティとコンポーネントを記述することができます。
例えば以下のように書けば、「座標が

(X,Y,Z)=(1,2,3)、高さが4、幅が0.5、色が#ABCDEF（水色）の箱」を描画することができます。

<a-box position="1 2 3" height="4" width="0.5" color="#ABCDEF">

コンポーネントの自作

コンポーネントは座標や大きさといった基本的なもの以外に、自分で定義することもできます。

新しいコンポーネントを定義するには、JavaScriptで AFRAME.registerComponent という関数を呼びます。






AFRAME.registerComponent('hello-world', {
  init: function () {
    console.log('Hello, World!');
  }
});

JavaScriptでコンポーネントを登録した 後 、HTMLでエンティティにこのコンポーネントを追加すると、表示される 直前 に init 関数が呼ばれ、コンソールに "Hello, World!" と出力されます。

注意: JavaScriptでコンポーネントを登録する 前 にHTMLでエンティティにコンポーネントを追加すると、 init 関数が呼ばれないことがあります。<script> が <body> の最後にあったり、async や defer 属性が追加していたりする場合は注意してください。

配線: gpio/LEDblink と同じ配線をしてください。

明るい方のボックスを見つめるとLEDが点灯し、暗い方のボックスを見つめると消灯します。

VR空間の定義（bodyタグの中身）は以下のようになっています。



















































<!--
  シーンを定義します。一番外側になるエンティティで、基本的に一画面に一つです。
  これだけでは何も表示しません。
-->
<a-scene>

  <!--
    シーンの中で使うアセット（画像や音楽など）を登録します。
    ここで登録しておけば、指定したIDをもとに何度でも使うことができます。
    これだけでは何も表示しません。
  -->
  <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>

  <!--
    箱を表示します。
    色は黄色、 座標は X=2 Y=2 Z=-7 （右に2m、上に2m、奥に2m）を指定しています。
    また、 main.js で登録した stare-to-turn-on というコンポーネントを追加しています。
  -->
  <a-box id="box" color="yellow" position="2 2 -7" stare-to-turn-on>

    <!--
      アニメーションを追加します。
      Y軸とZ軸で（to="0 360 360"）永遠に（repeat="indefinite"）回転し続けます（attribute="rotation"）。
    -->
    <a-animation attribute="rotation" to="0 360 360" dur="2000" repeat="indefinite" easing="linear"></a-animation>

    <!--
      アニメーションを追加します。
      クリックした時（begin="click"、VRの場合は見つめた時）、一瞬1.2倍のサイズに大きくなり（attribte="scale"）、すぐに戻ります（repeat="1"）。
    -->
    <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 は以下のようになっています。




























// 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))
    }
})

使っている基本エンティティ

vr/light

配線: i2c/i2c-grove-light と同じ配線をしてください。

光センサーが検知する明るさに応じて周囲が明るくなったり暗くなったりします。

使っている基本エンティティ

vr/touch

配線: i2c/i2c-grove-touch と同じ配線をしてください。

タッチセンサーに触れると、触れたセンサーに対応して赤、緑、青の光と白色光が点灯します。

使っている基本エンティティ

Last changed by 
 
Akio Yasui
0
231
Published on HackMD