Processing Arduino 連携のチュートリアル

はてなブックマーク

Processing Arduino 連携 により、電子工作で作成した作品の信号をPC上に表示し、インタラクションするためのチュートリアルを紹介します。今回は指の動きを認識するセンシンググローブを例に作り方を紹介していきます。

できるようになる事

Arduinoを介して得られた物理量(光、圧力、音等)をPCの画面上に映像や音で表現できるようになる

Processing Arduino 連携ができる様になる事で、自分で簡単なインタラクションの作品を作れる様になります。本当に簡単なので興味のある方はぜひ挑戦しましょう。


Processing とは?

Processing は電子アートとビジュアルデザインのためのプログラミング言語です。Processingはプログラミングの初心者でも簡単に映像表現を作る事ができます。また、Arduino等を用いて物理センサと連携することで、外界の信号とインタラクションする事ができます。



Processingの基本的な使い方やインストールのやり方については下のサイト様が非常に分かりやすくおすすめです。

Processing入門講座
初心者のための最初の一歩

さらに詳しく勉強してみたい方は次の書籍がおすすめです。

Processingをはじめよう (Make: PROJECTS)

今回は電子工作にはArduino Unoを使用します。Arduinoについては下の記事等をご参照ください。

ArduinoとBluetoothの使い方|1日でできるチュートリアル
はじめての電子工作

Arduinoや他の電子部品を持っていない人は、下のキット等を購入すれば本記事と似たような内容ができると思います。

センシンググローブ を作ろう

今回は指の動きをセンシングするグローブを作例に、Arduino と Processing を シリアル通信 でつなぐやり方を解説していきます。(もちろんこの例に従わずブレッドボード上にアナログセンサとArduinoをつなぐだけでもOKをです。)

センシンググローブ|指に巻きつけたバンドにセンサを仕込む事で指の屈曲運動を取得できる。

Sensing glove

触覚フィードバック機能をつけよう

さて、それでは機能を実現していきましょう。このセンシンググローブは指の周りにセンサを仕込むことで、指の動きをセンシングしています。

しかし実際に作成してみるとメカニカルなボタンや画面を直視するタッチスクリーンと異なり、入力がきちんとなされているか判断する事が困難です。そのため、今回は簡単に触覚フィードバックができる機構を考えました。

下図の様に、伸縮性の布地の上にタクトスイッチを配置します。このスイッチを指の第二関節の上に配置し、適切な太さに調整する事で指を曲げたときにメカニカルなスイッチが押されます。タクトスイッチは布地の裏側から表に貫通させ、飛び出た足を外側に屈曲させます。接続されていない端子をそれぞれGnd(+抵抗)とDigital Pinに接続します。

Fingermodel

センシンググローブのスイッチ構成

スイッチを配置した後は指の周りに適切な押し心地になるように太さを調整してみてください。下の動画の様にカチッと適切な曲げ具合でボタンが押される様に調整するのがポイントです。面白い事に指の平で押さなくても空間上の見えないボタンを押した様な錯覚が得られます。

Finger Movement Test from INTERACTION DESIGN on Vimeo.

このままではデジタル信号のみなので、指の曲げ具合をアナログで測れる様に曲げセンサも設置します。曲げセンサはその名のとおり曲がり具合を測ることのできるセンサです。柔らかい基板で短形をしています。曲がり具合によりセンサの抵抗値が変化します。

このセンサは曲げることはできますが、伸縮することはできません。そのため下の写真の様に指の形に合わせてポケット構造を作り、指の動作に合わせてわずかにスライドできるようにしましょう。

歪みセンサ構造

ここまでできたら各指の配線をArduino Unoに取り付けましょう。

Arduino glove

(指とArduinoを配線した様子|この写真では曲げセンサは取り付けていません。)

伸縮バンドの内側にArduinoの本体やUSBバッテリーを配置することで配線や制御パーツをある程度収納する事ができます。

Arduino in

手首のバンドの内側にArduinoをセット

デモ1 ミュージックグローブ

Arduino 側の構成はここまでで大方完成しました。Processing との連携に映る前に動作を確認してみましょう。今回はArduinoの出力に圧電スピーカーを接続し、指の動きの組み合わせで音階を選択できる様にしました。

Arduino コードは次の様になっております(参考)。

今回のデモはタクトキーによるデジタルのON/OFF制御のみで行っています。実際の動作の様子は下の動画をご覧下さい。

ハンドジェスチャーによる演奏の様子

Music Glove Song| Twinkle Twinkle Little Star from INTERACTION DESIGN on Vimeo.

Processing Arduino 連携 により動きを可視化しよう

Processing Arduino 連携 により、センシンググローブの動きをPCに取り込んでみましょう。この機能を応用していけばグローブのセンサ信号に応じて、画像を操作したり、他のArduinoのアウトプットを制御したりと色々と応用する事ができます。

先ほどのグローブ作成時に曲げセンサを作成したのでその信号を読み取り、可視化してみましょう。

分かり安くするために最低限のプログラム部分を抽出しました。

今回は曲げセンサの2つの端子はそれぞれ5Vのインプットと抵抗に接続しています。抵抗は直接でGNDに接続します。曲げセンサと抵抗の間をAnalogInput A0に接続します。(この部分がセンサで読み取る値になります。)きちんとダイナミックレンジが取れるように、曲げセンサの抵抗変化の値から適切な抵抗値を直列接続してください。(あまりにレンジが異なるとDレンジがとれないため)

Processing と Arduino を連携させるためにシリアル通信を利用します。シリアル通信を使うために、setupの中にSerial.begin(9600);を入力しましょう。

loopの中で曲げセンサによるアナログ信号の量を随時シリアルポートの書き出しています。

Processing シリアル通信 のやり方

Arduino側のコードは終了しました。先ほどのコードをArduino Unoに書き込むことでArduinoは連続的に曲げセンサによる電圧値の変化をシリアル通信の値を出力する事になります。

このシリアル通信の信号をProcessing側で受け取り、映像で表現してみましょう。

コードは下の様になります。

ProcessingでSerialポートを利用する場合は最初にシリアルのライブラリをインポートする必要があります。Processing上部メニューからSketch>Import Library>Serialを選択しましょう。

続いて今回シリアル通信から受け取る値x、可動範囲を表すmax, mintといった変数を宣言していきます。

続いて好みのキャンバスサイズを宣言し、シリアルポートのインスタンスを作成しましょう。シリアルポートのインスタンスを作成する場合はArduinoと同様のシリアルポートを設定する必要があります。

のSerial.list()[]の部分はArduinoのシリアルポートと同じ番号に成るように配列の値を指定して下さい。(Arduinoで使用しているポートが上から4つめだったら、配列では0,1,2,3となるのでSerial.list()[3]を指定するといった具合)

void draw(){}の中身は特別な点はないので詳細な説明は割愛します。

void serialEvent(serial p){}はシリアル通信の信号を受け取るたびに読み込まれるブロックになります。

と記載することでシリアル通信で書き込まれた内容がxの変数に代入されます。

Processing のシリアル通信については下のサイト様等で非常にわかりやすくまとめてくださっています。私もこちらの記事を参考に今回のデモを作成しました。非常に勉強になるのでぜひご参照ください。

ArduinoとProcessingの連携1 : センサーの情報を視覚化する | yoppa org

デモ2 アナログ信号の視覚化

それではセンシンググローブからの信号を視覚化した様子をみてみましょう。

デモ:センシンググローブ動作の原理確認

Sensing Glove analog signal test from INTERACTION DESIGN on Vimeo.

リアルタイムに追従して指の曲げの動きを観察することができています。

ブログ用に簡単な指の曲げ運動を視覚化しましたが、Processing Arduino をシリアル通信することで、より複雑な視覚表現や他のArduinoのものを動かしたりする事も可能です。

まとめと今後について

センシンググローブを例にArduinoとProcessingを連携させる手法を紹介しました。Processingを利用するのは私自身はじめてだったのですが、本当に直感的に利用することができました。

ArduinoとProcessingはデザイナや非プログラマのエンジニアがインタラクション系のデモを作成する場合には本当に有力なツールだと感じました。実は今回の制作もPhysical Computingの授業の宿題用に一晩で1から作りました。(夕方に授業が終了し、翌朝にデモをするという宿題・・・)

コードだけみると取っ付きにくいかもしれませんが、非常に楽しい作業なので興味の有る方はこの機会に挑戦してみてはいかがでしょうか。

センシンググローブはせっかく作ったので、もう少し進化させたいと思っています。ただマテリアルのエンジニアとしてはプログラムや視覚化表現に力を入れるというよりは、下の動画(安価な材料で作成したフレキシブルセンサ)で作成しているような材料とデジタルファブリケーションを組み合わせた技術を適宜採用し、より操作感や見た目(配線の問題など)が改良されたものに仕上げていきたいと思っています。

sensorproto1 from INTERACTION DESIGN on Vimeo.

Elastic Sensor|キッチン用品で作るフレキシブルセンサ

ジェスチャーによるセンシングはすでにキネクトやカメラ技術を採用した優れたソリューションがあるので、グローブ型UIはより正確な入力や触覚フィードバック、位置の自由度等がキーワードになると考えています。

長文を最後までお読みいただきありがとうございました。

デザインに関する仕事を依頼するなら|クラウドワークス!

記事の更新をFacebookでチェック!


はてなブックマーク

One Response

  1. […] Processing Arduino 連携のチュートリアル 2015年3月22日 […]

Leave a Reply