INDEX(各項目ごとの目次)

[HOME]  [Processing関係]  [Arduino関係]  [マテリアル関係]  [秋葉原工作マップ]

2008年用ですが、部分的に内容を更新しています(2010/06/14)。
また、[建築農業工作ゼミ2009-2010]とも連動していますので、そちらにも幾つかサンプルがあります。
:

ラベル processing の投稿を表示しています。 すべての投稿を表示
ラベル processing の投稿を表示しています。 すべての投稿を表示

4/07/2009

書籍:Programming Interactivity


Programming Interactivity: Rough Cuts Version
A Designer's Guide to Processing, Arduino, and openFrameworks
http://oreilly.com/catalog/9780596800581/index.html


1/30/2009

目次:Processing

*以下のサンプルは、Processing1.5バージョンを前提としたプログラムです。現行(2013年時点)のProcessing2.0では変更点がいくつかあるので、そのままでは動作しないプログラムもあります(videoライブラリなど)。近日中に記載内容をProcessing2.0にあわせて変更していきたいと思います。もうしばらくお待ち下さい。

書籍:Books
Built with Processing[Ver. 1.x対応版] -デザイン/アートのためのプログラミング入門
ビジュアライジング・データ ―Processingによる情報視覚化手法
Getting Started With Processing
Processing: A Programming Handbook for Visual Designers and Artists
Processing: Creative Coding and Computational Art (Foundation)
Learning Processing: A Beginner's Guide to Programming Images, Animation, and Interaction
Programming Interactivity: Unlock the Power of Arduino, Processing, and Openframeworks

基本操作:Basics
Processingのダウンロードとインストール」--Processingのセッティング。
Processingの基本操作 その1」--プログラムの仕方。
Processingの基本操作 その2」--図形の描画。
Processingの基本操作 その3」--図形を動かす。
Processingの描画サンプル」--図形を動かすサンプル。
Processing マウス入力1」--マウスボタン/クリック。
Processing マウス入力2」--マウスに合わせて図形を動かす/図形をドラッグする。
Processing マウス入力3」--図形の上にマウスが重なると色が変わる/ロールオーバー。
Processing マウス入力4」--トグルボタン/フラグ/3回押すとオンになるスイッチ。
Processing 文字と画像」--文字(フォント)の表示方法、画像の取り込みと表示方法。
Processing 手描きの線の表現」--手描きで自由に線を描く。
Processing ドラッグしながら図形を描く」--描画ソフトのように矩形をドラッグして描く。
Processing:デジタル時計のプログラム」--時間に合わせて文字列を表示する。
Processing:アナログ時計のプログラム」--時間に合わせて図形を回転させる。

サウンド:Sound
Processing サウンド/Sonia JSynプラグイン」--MacOSX(Intel)は、JSynプラグイン再インストールが必要。
Processing サウンド1/Sonia」--Soniaライブラリで音源の再生/停止/ポーズする。
Processing サウンド2/逆再生」--Soniaライブラリで逆再生の音源をつくる。
Processing サウンド3/テンポ」--Soniaライブラリで音源再生のテンポ変換をする。
Processing サウンド4/スクラッチ」--Soniaライブラリを使って曲をスクラッチ演奏する。
スピーカ/音出力について」--通常のコーンスピーカ以外の特殊なスピーカなどについて

ファイル選択/読み込み/書き出し:File chooser/File loading/File output
Processing FileChooser/ファイル選択画面の表示」--Java Swingファイルチューザー(画像/音源ファイル読み込み)。
Processing FileChooser2」--ファイルチューザーで画像を選択表示、ドラッグ可能にする。
Processing ドラッグした図形の動きを記録/保存/再生する」--データのセーブ/ロードを使ったサンプル。

Webカメラ:Web camera
Processing Video (Webカメラ)」--Webカメラの使い方/映像にフィルタをかけて表示。
Arduino+Processing マトリクスLED+Webカメラ」--Webカメラ映像をマトリクスLEDに映す。
Processing Webカメラを光センサとして使う」--点光源で画面内に線を描く。
Processing Webカメラ/定点記録画像」--Webカメラ映像を0.5秒おきに画像保存(JPEG)する。
Processing Webカメラ/カラートラッキング」--Webカメラを使い、色を手がかりに物体を追いかける。
Processing Webカメラ/モーショントラッキング」--Webカメラを使って動体検知する。

シリアル通信:(センサ/アクチュエータ+Arduino基板との通信)Serial communication
Arduino-Processing シリアル通信1」--ひとつの値を送信する(非同期通信)。
Arduino-Processing シリアル通信2」--複数の値を送信する(同期通信)。
Arduino-Processing シリアル通信3」--大きな値を複数送信する(ビット演算の説明)。
Processing-Arduino シリアル通信4」--Processingの図形をマウスで動かしてArduinoを制御。
Arduino-Processing シリアル通信5」--大きな値、複数の値を文字列で一括送信する。
Arduino-Processing シリアル通信6」--複数のArduinoをProcessingとシリアル通信する。

ネットワーク/ワイヤレス通信:Network/Wireless communication
Processing-Arduino ネットワーク制御」ネットワークを通してサーボ、LEDを制御する。
Processing HTTPサーバ/Webページ表示」--Networkライブラリを使ってWebサーバとして機能させる。
Arduino+Xbee Shield/Processing+XBee Explorer USB」--Xbee、XBee Explorer USBを用いて無線通信する。
Arduino-Processing BlueTooth通信+曲げセンサ」--曲げセンサの入力値をBluetoothで送信する。

その他:Others:3D models/Sudden Motion Sensor(Mac)/QR code/Firmata library
Processing 3Dモデル/OBJ Loader」--外部制作した3Dモデルを読み込む。
Processing 緊急モーションセンサー(Mac)」--緊急モーションセンサーで3Dモデルを動かす。
Processing QRコード/2次元コード」--QRコードを生成/読み込み/解読する。
Processing-Arduino Firmataライブラリ」--ProcessingでArduino基板の各設定をし制御する。
Processing ライブラリのインストール先(v149以降)」バージョン149以降のライブラリインストール変更点。
ProcessingプログラムをApplet表示する方法」--プログラムをWeb上でAppletを使って表示する。

12/21/2008

Processing-Arduino Firmataライブラリ

今回は、「Firmataライブラリ」のテストを行いたいと思います。
通常Processing-Arduinoの間を通信させるときにはシリアル通信を使い、Processing側のプログラムとArduino側のプログラムをそれぞれ別々に書いていましたが、「Firmataライブラリ」を使うことで、Processing側から直接Arduinoをプログラムし制御することが可能になります(パソコンにUSB接続したArduino基板をProcessing側からのプログラムだけで操作できるので便利です)。

Firmataライブラリを使うための準備:
・まずFirmataライブラリをダウンロードし、Processingのlibrariesフォルダ内にインストールします。
・Arduino-0012であればArduino用Firmataライブラリは含まれているので、メニューバーのSketchBook>Examples>Library-Firmata>StandardFirmataを開き、Arduino基板にアップロードしておきます。Arduinoのセッティングは以上です。

今回はProcessing用のFirmataライブラリに含まれているサンプルを用いたいと思います。
Processingを開いて、File>Sketchbook>libraries>arduino>examples>arduino_outputを選択します。
以下のようなプログラムが表示されるはずです。

import processing.serial.*;

import cc.arduino.*;

Arduino arduino;

color off = color(4, 79, 111);
color on = color(84, 145, 158);

int[] values = { Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW,
Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW,
Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW, Arduino.LOW };

void setup() {
size(470, 200);

println(Arduino.list());
arduino = new Arduino(this, Arduino.list()[0], 115200);

for (int i = 0; i <= 13; i++)
arduino.pinMode(i, Arduino.OUTPUT);
}

void draw() {
background(off);
stroke(on);

for (int i = 0; i <= 13; i++) {
if (values[i] == Arduino.HIGH)
fill(on);
else
fill(off);

rect(420 - i * 30, 30, 20, 20);
}
}

void mousePressed()
{
int pin = (450 - mouseX) / 30;

if (values[pin] == Arduino.LOW) {
arduino.digitalWrite(pin, Arduino.HIGH);
values[pin] = Arduino.HIGH;
} else {
arduino.digitalWrite(pin, Arduino.LOW);
values[pin] = Arduino.LOW;
}
}


Processing上でこのプログラムをランさせます。この時点でProcessingから、Arduino基板の各ピンの入出力設定がなされます。Processingでは以下のような画面が現れます。



14個ならんでいる正方形をそれぞれクリックすれば(クリックするとその正方形は塗りつぶされる)、Arduinoの0番ピンから13番ピンの合計14個のピンに対応してデジタル出力されます(Processing画面上の左端の正方形がArduinoの13番ピンに対応)。試しにProcessing画面上左端の正方形をクリックすると、13番ピンに接続されたLED(基板内蔵LED)が点灯します。同様に他の正方形をクリックすれば、それに対応したピンからデジタル出力されることが確認できます(各ピンにLED+抵抗:220Ωを接続して下さい)。
ただし、0番ピンと1番ピンに関しては、Processing-Arduino間でのシリアル通信で使用されているため、クリックしても反応しないので、2番ピンから13番ピンでのデジタル出力制御となります。

Processingのプログラム上で、

arduino.pinMode(ピン番号, 入出力設定);

とすれば、Arduinoの任意のピンの入出力設定(Arduino.INPUT または Arduino.OUTPUT)を行うことができます。
出力をHIGHかLOWにするには、

arduino.digitalWrite(ピン番号, 出力値);

で、出力値をarduino.LOWかarduino.HIGHで設定します。
そのほか、

デジタル入力:arduino.digitalRead(ピン番号)
アナログ入力:arduino.analogRead(ピン番号)
アナログ出力:arduino.analogWrite(ピン番号,出力値)

という感じになるので、arduino.を頭につければ、Arduino上でのプログラムとほぼ同じです。

11/29/2008

Processing Webカメラ/モーショントラッキング

今回は、Webカメラ(USBカメラ)を使ってProcessing上で動体検知/動体追跡の実験を行ってみます。前回の「Processing Webカメラ/カラートラッキング」に似たプログラムですが、特定の色を追いかけるのではなく、画面上で動いている物体を検知し、その動きの方向に合わせて物体の座標値を取得します。逆に、動いている物体が画面内に見当たらない場合は、なにも検知しないことになります。

*Windowsの場合、そのままの設定ではこのVideoライブラリを使用することができません。WinVDIG 1.0.1をインストールする必要があります。


各ピクセルの色の取得:

・カメラ画像における、前回の画面と今回の画面の各ピクセルの色を比較します。
・320×240の画面サイズであれば76800個のピクセルをfor()を使って繰り返しの比較処理をさせることになります。
・各ピクセルの色を抽出するには、pixels[i]で順番にひとつずつピクセルを取り出します。
pixels[i]は、画面内のi番目のピクセルの色の値を返します。
・さらに、その一つのピクセルをRGBの3色に分解し、それぞれの値を取得します。
・3色のそれぞれの値を取得するには、red()green()blue()を用います。
・red(pixels[i])と書けば、そのピクセルの赤の値を取得できます(緑、青についても同様に処理)。

色の比較:
前回と今回の画面内のピクセルを比較するためには、一旦前回の全ピクセルの色情報を配列に代入して記憶させておきます。そして、記憶させておいた前回の色情報と今回の色情報を各ピクセルごとに比較します。
・色を比較するには、「前回の赤の値」から「今回の赤の値」を差し引きします(最終的に、絶対値abs()を使うので逆でも大丈夫です)。
・各色の値は0〜255までの段階があるので、その数値の差となります。緑や青についても同様に値の差を求めておきます。
・各色において、ある一定以上の差があるときに、画面内に「動作」があったと見なします。
・多少細かなノイズなどが含まれるので、差についてはある程度の許容値を設けておきます。例えば、±20以内の差であればノイズと見なし「動作なし」と判断し、それ以上の差があるときにだけ「動作あり」と見なすことにします。

平均値で座標を求める:
上記の方法で、設定した許容値を超えるピクセルがあったときに、そのピクセルの画面内でのXY座標値を調べておきます。今回の方法では、許容値を超えるピクセル(変化があったピクセル)のXY座標と個数から平均値を求め、その値をXとYの座標値として利用することにします。
例えば、X座標値100に10個、101に12個、102に8個あるときは、(100*10+101*12+102*8)/(10+12+8)=100.9333となり、この値を平均値としてX座標値にします。


(緑の部分が変化のあったピクセル、赤い正方形の位置がそれらの平均座標値、左上に許容値表示)


「変化があったピクセルを緑で表示し座標値を求めるプログラム」:
以下のプログラムでは、見やすくするために、変化があったピクセルを緑color(0,255,0)で塗りつぶすことにします。そして、それらのピクセルの平均座標値を求めて、赤い正方形を動かすことにします。
光や明るさの状況に合わせて許容値を調整できるプログラムにしておきます。
左右の矢印キーで色の許容値(変数:tolerance)を調節できるようにします(「←」:-1、「→」:+1)。

「c」キーを押せば、カメラセッティング画面に切り替わります(手動露出や手動コントラストなどに切り替えた方が認識しやすくなります)。

[プログラムを表示]



「Pongをプレイ」
次に、応用として「Pong」のパドルをモーショントラッキングで動かすサンプルをつくってみます。
動作によって変化があったピクセルの位置が画面内の左側あるいは右側を判別し、左右のパドルを個別に動かせるようにします。画面の端から50ピクセル幅のエリアで動作検知します(画面中央付近では反応しません)。


(モーショントラッキングで「Pong」をプレイする)

プレイしやすいように、カメラ映像は左右反転(鏡像)しています。
左右矢印キーで許容値を調整します(画面には許容値は表示されません)。
画面上部に点数を表示。
「c」キーでカメラセッティング。
「スペース」キーで点数をリセット。

[プログラムを表示]


関連:
Webカメラ:
Processing Video (Webカメラ)」--Webカメラの使い方/映像にフィルタをかけて表示。
Arduino+Processing マトリクスLED+Webカメラ」--Webカメラ映像をマトリクスLEDに映す。
Processing Webカメラを光センサとして使う」--点光源で画面内に線を描く。
Processing Webカメラ/定点記録画像」--Webカメラ映像を0.5秒おきに画像保存(JPEG)する。
Processing Webカメラ/カラートラッキング」--Webカメラを使い、色を手がかりに物体を追いかける。

ロジクールストア(ウェブカメラカテゴリ)

11/26/2008

Processing Webカメラ/カラートラッキング

今回はProcessingとWebカメラ(USBカメラ)を使い、色を手がかりとして画面内で動く物体の座標値を取得してみます。例えば、カメラに向かって動かした赤いボールの座標値を検出し、XY座標をArduinoへシリアル通信すれば、ボールの動きに応じてサーボなどを動かすことができます。
最初に物体の色を記憶させ、その色に近いピクセルを画面内から抜き出します。抜き出されたピクセルのXY座標値を調べ、中点や平均値を使って最終的なXY座標を導き出します。必ずしも単一の色面を背景にする必要はないのですが、色を手がかりとするので、対象とする物体と背景の色の差がある方が検出しやすくなります。

尚、Webカメラを使った画像認識や動体検知などのプログラムとしてFile>Examples>Libraries>Video(Capture)の中に「BrightnessTracking」や「FrameDifferencing」などのサンプルがあります。また、ライブラリとしては「JMyron」があります(「JMyron」のサンプルでは「Myron_CameraAsMouse」があります)。

Webカメラ(USBカメラ)を使用するには、ProcessingのVideoライブラリをインポートします。Webカメラの基本的な使い方は「Processing Video (Webカメラ)」や色抽出する方法として「Processing Webカメラを光センサとして使う」を参照して下さい。

*Windowsの場合、そのままの設定ではこのVideoライブラリを使用することができません。WinVDIG 1.0.1をインストールする必要があります。


「Processing上の画面」
(手に握った物体の動きに合わせて赤い円が動く)


今回の設定として:
・キャプチャする映像のサイズ(幅:w、高さ:h)を320×240(4:3)にします。
 (処理速度が遅くなる場合は160×120などの小さいサイズに変更して下さい。)
・最初に、画面内の対象となる物体をマウスでクリックし、そのピクセルの色を記憶しておきます。
 (背景とはできる限り異なる色の物体を選ぶ方が認識しやすくなります。)
・物体の動きに合わせて、画面上の図形(赤い円)が動くプログラムにします。

プログラムの手順としては:
・video.pixels[]で、カメラ映像内の各ピクセル(320×240=76800ピクセル)を全て読み込みます。
・対象となる物体の色(特定の1ピクセル分の色)をpixels[]で取り出します。
・各ピクセルをred()green()blue()でRGBに分解します。
・各ピクセルの色と物体の色を各RGB色ごとに比較します。
・比較した各RGB色が設定した許容値(tolerance)以内であるかを判別します。
・許容値以内のピクセルがある場合、そのピクセルの座標値を調べます。
・選択された複数のピクセルの座標を統合して、最終的にXY座標を導き出します。
・導かれた座標を図形(赤い円)の座標に代入し、物体に合わせて図形(赤い円)が動くようにします。


「選択したピクセルの色をRGBに分解し判別する」:
ひとつのピクセルであるpixels[i]には、color(R,G,B)の3つの値が含まれています(アルファ値/透明度も含めれば4つになりますが、今回はRGB値だけを扱います)。各RGB色に分解するには、red(pixels[i])、green(pixels[i])、blue(pixels[i])というようにred()、green()、blue()を用いてpixels[i]を括ります。得られる値はそれぞれ0.0~255.0の小数値になります。色を特定化しても光の反射などによって多少色が変化するので、特定化する色にある程度の許容値を与えておきます。例えば、赤の値が80の場合、許容値を10にすることで70~90の値であれば同等の色と見なすことにします。許容値が小さすぎれば、色が限定されすぎるので取りこぼしがでてきます。逆に許容値が大きすぎれば、他の色を混同してしまうので、状況に応じて調整できるようにプログラムすることにします。


「pixels[i]をXY座標に変換する方法」:
画面幅をw=320、高さをh=240とします。横一列には320個のピクセルが並んでおり、さらに320個のピクセルが240行並んでいます。つまり一つの画面内には、合計で76800個のピクセルがあります。
pixels[i]のiには、画面左上の0番目のピクセルから画面右下の76799番目のピクセルまでの連続した数値が入ります。例えば、画面上の(120,40)というXY座標は、画面幅をwとした場合、120+40*w=12920なので12920番目のピクセルであり、pixels[12920]になります。逆に、この12920番目のピクセルを画面上のX座標とY座標に変換するには、x=i%w、y=i/w(つまり、x=12920%320、y=12920/320)となります。「%」は割り算の余りを求める式で、「/」は割り算ですが整数(int)で割っているので小数点以下は切り捨てられます(四捨五入なし)。
マウスの座標値(mouseX,mouseY)であれば、pixels[mouseX+mouseY*w]になります。

上記の方法で選ばれたピクセル(物体の色のピクセル)は複数個あるので、それらのピクセルを座標値に置き換えるには幾つかの方法があります。
ひとつは:
画面内において最も右端にあるピクセルのX座標と左端にあるピクセルのX座標、ならびに上端にあるピクセルのY座標と下端にあるピクセルのY座標を調べ、右端と左端の中点をX座標、上端と下端の中点をY座標とみなす方法です。弱点としては、近似色がノイズとして画面上にある場合、そのピクセルも拾ってしまうことです。ノイズを除去するプログラムや予め画面全体にぼかしをかけることである程度回避できます。
もうひとつは:
選択したピクセル(物体の色のピクセル)が多く分布している箇所を調べ、ピクセルの分布数と位置から平均値を割り出す方法です。この場合、多少のノイズがあっても大きなずれは発生しなくなります。
その他の方法も考えられますが、今回は上記二つの方法で実験してみたいと思います。

「操作手順」:
プログラムが開始したら、画面上で対象となる物体をクリックして物体の色を記憶させます。画面左上に、10ピクセル角の矩形でその色が表示されます。直径20ピクセルの赤い円が、物体の移動に合わせて動きます(物体を追跡します)。
左右の矢印キーで色の許容値(変数:tolerance)を調節できるようにします(「←」:-1、「→」:+1)。
変化する数値をPFontを用いて表示するので、Tools>Create Font...をクリックし「Monaco-10.vlw」を取り込んでおいて下さい(「Processing 文字と画像」を参照)。
また、「c」キーを押せば、カメラセッティング画面に切り替わります(手動露出や手動コントラストなどに切り替えた方が認識しやすくなります)。
画面上に許容値を含めた物体の色がある場合は、「detected」という文字が表示されます。もし、近似色がない場合は「none」が表示され、赤い円は前回の位置に留まります。再度近似色が画面内に現れれば、赤い円はその位置に移動します。


「左右端、上下端の中点を座標値にするプログラム」:

 [プログラムを表示]


*プログラムを開始する前にTools>Create Font...をクリックし「Monaco-10.vlw」を取り込んでおいて下さい(スケッチフォルダの中のdataフォルダ内にフォントが保存されます)。
複数あるピクセルのうち左端、右端、上端、下端のピクセルを抜き出すために、最小値と最大値を求めるためのmin()max()を用いました。各ピクセルの座標値を比較し、X座標においては最小座標値を左端座標値とし、最大座標値を右端座標値として扱います。Y座標に対しても同様に導き出します。そして、それらの中点を最終的なXY座標値とします。



「分布するピクセルから割り出す方法」:
次は、物体の近似色のピクセルの分布から平均値を求めて座標値を割り出す方法についてです。
先ほどの方法と同様にfor()で全てのピクセルの色を識別し、その中から物体の近似色のピクセルを選びます。その際に近似色のピクセルの個数と、そのピクセルのXY座標値をそれぞれ加算しておきます。最終的に加算されたそれぞれの値を近似色のピクセル数で割って平均値を求めます。例えば、X座標値100に10個、101に12個、102に8個あるときは、(100*10+101*12+102*8)/(10+12+8)=100.9333となります。Y座標についても同様に求めておきます。

以下のプログラムでは、カメラからの映像を左右反転の鏡像として表示することにします(カメラに向かって、右に物体を動かせば、画面上でも右に動くようにします)。
「v」キーを押すことで、カメラからの映像を表示/非表示切り替え可能にします。
円の動きを滑らかにするために、移動量にフィルタをかけることにしました。
物体検知用のフラグがtrueの場合、許容値toleranceは自動的に下がり、falseの場合は自動的に上がるようにしました(変化の範囲は2~25に設定してあります)。設定した最大許容値:25以内の近似色が画面内にある場合は反応してしまいます(フラグがtrueになる)。不自然な反応をとる場合、最大許容値を下げるか、前回のプログラムのように手動で調整する内容に変更してみてください。
赤文字部分が、前回と異なる部分です。
前回同様、プログラムを開始する前に、使用するフォントを取り込んでおいて下さい(「Processing 文字と画像」を参照)。

「分布するピクセルから割り出すプログラム」:

 [プログラムを表示]


*プログラムを開始する前にTools>Create Font...をクリックし「Monaco-10.vlw」を取り込んでおいて下さい(「Processing 文字と画像」を参照)。
「filterX+=(x-filterX)*0.3;」の「0.3」は円の動きをゆっくり滑らかに(鈍く)するための係数です。1.0に近づくほどフィルタの効果はなくなり、0に近づくほど鈍く動くので適度に調整して下さい。
左右反転(鏡像)しているために、円のX座標値はそのままの値ではなく「w-filterX」になっています。

「ビット演算による色変換」:
color(R,G,B,A)は、A:アルファ値(透明度)、R:赤、G:緑、B:青の4種類の8ビット(合計32ビット)の値が含まれています。32ビットの内訳(2進数の場合)は

AAAAAAAARRRRRRRRGGGGGGGGBBBBBBBB

になります。32あるそれぞれの桁には0か1が入ります。
透明度が100%(不透明)の緑であれば、

11111111000000001111111100000000

になります。16進数であれば「0xFF00FF00」や「#00FF00」になります。10進数なら「255,0,255,0」です。
上記プログラムでは、ピクセルの赤の値を調べるためにpixels[i]red()で括って

red(pixels[i])

にしましたが、

(pixels[i] >> 16) & 0xFF

というビット演算を使っても求められます。32ビットを16桁右にシフト「>>」し、下位8桁(0xFF)だけを「&」を使って取り出す(ビットマスク)という方法になります。
結果的にはこの方法の方が処理速度が上がるようです。
緑と青については、

(pixels[i] >> 8) & 0xFF //緑:8ビット右にシフトし下位8桁だけを取り出す
pixels[i] & 0xFF //青:下位8桁だけを取り出す

になります。
もし、処理速度が不安定な場合は、上記のようなビット演算を用いるか、画面サイズを小さくするか、もともとのフレームレートを下げるかなどの工夫や調整を行ってみてください。


ドライバなしですぐにコンピュータに接続可能(UVC対応)なWebカメラとして以下のようなものがあります。
Macintosh/Windows兼用です。
      

関連:
Processing Video (Webカメラ)」--Webカメラの使い方/映像にフィルタをかけて表示。
Arduino+Processing マトリクスLED+Webカメラ」--Webカメラ映像をマトリクスLEDに映す。
Processing Webカメラを光センサとして使う」--点光源で画面内に線を描く。
Processing Webカメラ/定点記録画像」--Webカメラ映像を0.5秒おきに画像保存(JPEG)する。
Processing Webカメラ/モーショントラッキング」--Webカメラを使って動体検知する。

11/08/2008

Processing ドラッグした図形の動きを記録/保存/再生する

Processing画面上の図形をマウスでドラッグし、その動きを記録する方法、記録した内容をテキストデータとして外部に保存する方法、さらにそのテキストデータを読み取って動きを再生させるサンプルです。

まずは、ドラッグする図形を円とした場合のプログラムから始めます。今回はmouseDragged()は使わず、startDragというフラグを用意し、mousePressed()でドラッグ開始(startDrag=true)、mouseReleased()でドラッグ終了(startDrag=false)とみなす方法を用います。
円の中心座標から少しずれた位置にマウスを合わせてそのままドラッグできるように、円の中心座標とマウス座標の差分を計算しておき、その差分を足した値を最終的に円の座標に反映されるようにします。
また、dist()を使って円の中心座標からマウス座標までの距離を計算し、その距離が円の半径以内であれば円の上にマウスがあることとみなしてドラッグ可能にします。dist()は、dist(x1,y1,x2,y2)のように(x1,y1)と(x2,y2)の二点間の距離を計算します。


「円をドラッグする」:

 [プログラムを表示]



「円をドラッグ+記録機能」:
上記プログラムに、ドラッグした円の動き(連続する座標値)を記録する機能を付け加えます(以下のプログラム)。「r」キーを押すことで記録開始にします。再度「r」キーを押すと記録停止するようにし、記録中は円の塗色を赤に変化させます。プログラム的には、recordStartというフラグを用意し、記録開始/停止を判別できるようにします。xPosとyPosという座標を記録するための配列を用意しておき、記録中はそれらの配列に座標値を付け加えていきます。
赤文字の部分が付け足したプログラムです。

 [プログラムを表示]


xPos={}というように空の配列をはじめに用意しておき、append()を使って変化する座標値を配列xPosに付け加えていきます。よって、配列xPosに含まれる要素は、記録されるごとに増えていきます。xPos.lengthを用いれば、記録された配列内の座標の個数を調べることができます。
記録停止しているときに「r」キーが押されればstartRecord=trueにし、逆に記録停止しているときに押されれば、startRecord=falseに切り替えられるように、フラグstartRecordを使い分けます。


「円をドラッグ+記録機能+保存機能」:
さらに以下では、記録された内容をテキストファイルとして外部保存する機能と記録した座標値を消去する機能を付け足します(赤い文字部分)。「r」キーで記録、「s」キーでファイル保存、「c」キーで記録内容を消去することにします。

 [プログラムを表示]


上記プログラムでは、printWriterを使って外部ファイルとして座標値データを保存しています。「s」キーを押すとselectOutput()によってダイアローグ画面が現れるので、保存名と保存先を指定します。「positions.txt」のように、「.txt」の拡張子をつけて任意の場所(デスクトップなど)に保存します。再度上書き保存する場合は、ダイアローグ画面上で、同じファイルを選択し保存ボタンを押します(上書き保存の確認メッセージが現れます)。


「円をドラッグ+記録機能+保存機能+再生機能」:
次に、記録された内容や保存された内容のデータを読み取り、そのデータに基づいて動きを再生するプログラムをします。再生中は円の塗色が緑に変化し、再生終了すれば黒に戻ります。
まず、「r」キーを押して記録開始し、マウスで円をドラッグします(ドラッグ記録中)。
次に再度「r」キーを押して記録を停止します。
記録された内容を再生するために、「p」キーを押します。動きが再生されている間は円が緑色になります。
「s」キーを押すことで、記録内容を外部ファイルとしてデスクトップなどの任意の場所にファイル名(拡張子「.txt」)をつけて保存します。
「s」キーで保存されたファイルを読み込むには、「l」(小文字のエル)キーを押してファイル選択画面の中でファイル選択します。読み込んだファイルのデータは配列xPosとyPosに記憶されます。「p」キーを押せば、読み込んだ記録を再生します。
「c」キーによって、配列内のデータを空にしないかぎり、「r」キーによる記録した座標値は追加されていきます。

「各キーの機能割当」:
r:記録開始(record)/記録停止
c:記録消去(clear)
s:保存(save)
l:ファイル読み込み(load)
p:再生(play)

赤文字部分がさらに追加した再生機能の内容です。

 [プログラムを表示]


「p」キーを押すことで、再生用フラグstartPlayがtrueになり、ループ内で再生用の処理が行われます。変数countを用意しループするごとにcountを+1ずつ増加させ、配列内の座標データをひとつずつ円の座標に代入していきます。配列内のデータ数をxPos.lengthで調べ、最後のデータまで読み込んだら再生用フラグstartPlayをfalseにし再生停止させます。
「l」キーを押し、selectInput()によってファイル選択画面が現れ、保存したファイルを選択します。選択したファイル内のデータをloadStrings()によって、「X座標値+コンマ+Y座標値」という一行ずつの文字列をsplit()でコンマ記号を境目として二つのデータに分けて、同時にそれら文字列をint()で整数化し、append()によって座標用の配列xPosとyPosに追加していきます(代入する前にxPosとyPosを空の配列にしておきます)。

誤作動が起こらないように、再生中はキー入力を禁止したり、読み込まれるファイルが相応しくない場合の例外処理などが実際には必要になりますが、今回のプログラムでは省略しています。

FILCO ポータブルタッチパッド スマートトラックライト ATP-400UB
ダイヤテック (2008-06-26)
売り上げランキング: 19889

11/02/2008

Processing サウンド/Sonia JSynプラグイン

Processingのサウンドライブラリの「Sonia」を、MacOSX(Intel)で使用する場合、新たにJSynプラグインをインストールする必要があります。現ライブラリフォルダにはMacOSX(PowerPC版)のJSyncプラグインしか含まれていないようです。
ここをクリックすると、インストール画面に移動します。移動先のページ上の「Click Here to Install JSyn Plugin」のボタンを押して新しいバージョンのJSyncプラグインをインストールしてください。

関連:
Processing サウンド4/スクラッチ」--Soniaライブラリを使って曲をスクラッチ演奏する
Processing サウンド3/テンポ」--Soniaライブラリで音源再生のテンポ変換をする
Processing サウンド2/逆再生」--Soniaライブラリで逆再生の音源をつくる
Processing サウンド1/Sonia」--Soniaライブラリで音源の再生/停止/ポーズする

 iTunes Music Store(Japan)

11/01/2008

Processing HTTPサーバ/Webページ表示

今回は、ProcessingのNetworkライブラリを利用して、ウェブブラウザで閲覧可能なウェブサイトのサーバとして機能させます。
サーバとして、IPアドレスならびにポート番号をあらかじめ確認/設定しておきます。

LAN内のローカルIPアドレスの場合:
コンピュータのIPアドレスを調べるには、MacOSXであれば、「システム環境設定>ネットワーク」を開き、AirMacを使用している場合は「AirMac」を選択、ケーブル接続している場合は「内蔵Ethernet」を選択し、「TCP/IP」タグを選択すると2段目あたりに「IPアドレス:10.0.1.2」などと表示されています。Windowsの場合は、コマンドプロンプトを開いて、「ipconfig」と打ってリターンすれば、幾つかの情報が現れ「IP Address....10.0.1.2」などと表示されるはずです。

グローバルIPアドレスを調べる場合:
以下のようなサイトで調べることができます。
http://dog.tele.jp/lookup.php
「あなたのパソコンのグローバルIPアドレスは」と書かれている場所に表示されます。

尚、ローカルネットワークの外からアクセス可能にするためには、ルータ上でのポートマッピング(ポート転送)などの設定が必要になります。設定については、「Processing-Arduino ネットワーク制御」の後半に説明があるので参照してください。

参照:YahooBBのモデムのポート転送設定方法


Processingのプログラム:

//ライブラリのインポート
import processing.net.*;
//サーバのインスタンス
Server server;
//カウンタ用変数
int val = 0;

void setup() {
size(200, 200);
//サーバの設定(ポート:12345)
server = new Server(this, 12345);
}

void draw() {
//クライアントからの受信確認
Client client = server.available();

//クライアントがいる場合
if (client!=null) {
//クライアントIPアドレス出力
println("Client IP Address : "+client.ip());
//クライアントからのデータがあるとき
if(client.available()>0){
//データ読み込み(HTTPリクエスト読み込み)
String clientData=client.readString();

//データを改行コードをもとに区切り、
//改行コードを取り除いてから配列に代入していく
String[] httpRequest=trim(split(clientData,'\n'));

//受信データの最初の内容が「GET / HTTP/1.1」の場合
if(httpRequest[0].equals("GET / HTTP/1.1")){
//以下の内容をクライアントへ返信する(HTTPレスポンス)
client.write("HTTP/1.1 200 OK\n");//接続成立
client.write("Content-Type: text/html\n");//HTML文書形式
client.write("\n");//空白行

//以下HTML文書表示内容
client.write("<title>KOUSAKU SERVER</title>");//タイトルバー表示

client.write("THIS IS KOUSAKU WEB SITE");//表示テキスト
client.write("<br/>");//改行

client.write("YOUR IP ADDRESS: "+client.ip());//IPアドレス表示
client.write("<br/>");//改行

//リンク画像表示(インターネット上のリンク先)
client.write("<img src=\"http://3.bp.blogspot.com/_7uyXRm_coS4/SPRtCNVY1gI/AAAAAAAAATk/UR4Tl5ytviA/s400/network.png\">");
client.write("<br/>");//改行

//リンクページへ移動する
client.write("<a href=\"http://kousaku-kousaku.blogspot.com\">GO TO: KOUSAKU BLOG PAGE<a>");
client.write("<br/>");//改行

//カウンタ機能
val++;
client.write("COUNTER: "+val);//カウンタ表示
client.write("\n\n");//空白行
}
client.stop();//クライアントとの接続を停止
}
}
}


上記のサーバ用のプログラムを起動し、クライアント用コンピュータ上でブラウザ(IE、Safari、FireFoxなど)で指定したIPアドレスとポート番号を入力してアクセスしてください。
例えば、「192.168.3.3」がサーバのIPアドレスであれば、「http://192.168.3.3:12345」をブラウザ上で入力して下さい。

HTTPリクエスト、HTTPレスポンスについては、「Arduino Ethernet Shield」を参照してください。



独自ドメインが使えて基本使用料0円レンタルサーバー



10/25/2008

Processing-Arduino ネットワーク制御

今回は、ProcessingのNetworkライブラリを使って、ネットワーク越しに複数のクライアントコンピュータから、サーバコンピュータに接続されたArduinoのサーボとLEDを操作することにします。ネットワーク上では、情報を提供する側となるサーバコンピュータに複数のクライアントコンピュータが接続されているような状態になります。



まず、上図のようにローカルネットワーク内での通信を行ってみます(後半にローカルネットワーク外からの通信サンプルを記載しておきました)。

ひとつのクライアントからサーバへ信号が送られると、サーボの角度やLEDの点灯状態が変化しますが、サーバはクライアントからの信号を受け取るだけではなく、現在のサーボの角度やLEDの状態(オン/オフ)についての情報も各クライアントへ送り返します。そうすることで、各クライアントは現在のサーボやLEDの状態を把握しながら制御することができます。
サーバコンピュータとクライアントコンピュータはインターネット越しに通信され、サーバコンピュータとArduinoはシリアル通信されます。


(Processingの画面:画面上半分がサーボ用スライダ、下半分がLED用ボタン)

Processingの画面には、上半分がサーボ用のスライダ、下半分にLED用のボタンを配置することにします。スライダは0~255の値を送信し、ボタンは押すとオン(緑)の状態になり、もう一度押すと白(オフ)に戻ります。あるクライアントがボタンを押せば、サーバとその他のクライアントのボタンの色も同時に変わります。サーバからのコントロールも可能です。

Arduinoでは、サーボの値とLEDの値をサーバコンピュータからシリアル通信を通してデータ受信します。以下のプログラムでは、サーボは3番ピンと接続しPWMで制御することにします(サーボ制御の方法については、「Arduino サーボ制御」を参照して下さい)。LEDは13番ピンに接続しデジタル出力でオン/オフ制御することにします。


Arduinoのプログラム:

//サーボ用変数を用意
int servoVal;
//LED用変数を用意
int ledVal;

void setup(){
//シリアル通信開始
Serial.begin(9600);
//13番ピンをデジタル出力に設定
pinMode(13,OUTPUT);
}

void loop(){
//データが二個きたら(1個より多ければ)
if(Serial.available()>1){
//サーボの回転値として読み込む(0~255)
servoVal=Serial.read();
//LEDの点灯状態(0:OFF,1:ON)
ledVal=Serial.read();
//合図用データ送信
Serial.print('A');
}
//3番ピン(PWM):アナログ出力(サーボ)
analogWrite(3,servoVal);
//13番ピン:デジタル出力(LED)
digitalWrite(13,ledVal);

//0.02秒周期にする
delay(20);
}



「サーバのプログラム」:
サーバ側のプログラムでは、ネットワークとシリアル通信の二つのライブラリが必要となります。スライダは横方向(X座標)に動かし256段階あるので、画面サイズの横幅も256ピクセルにしてあります。ドラッグのためのプログラムは、mouseDragged()を使わず、startDrag(名前は任意)というフラグを用意し、mousePressed()でマウスを押したときにフラグがtrueになり、ドラッグが開始されたことになり、mouseReleased()でマウスが放されたときにドラッグ終了になり、同時にフラグもfalseになるようにしておきます。つまりフラグstartDragによって、ドラッグしているかどうかを判別することになります。ドラッグしていなくてもマウスボタンを押し続けている限りドラッグ中と見なされるので、その間データを送信し続けます。
あまり高速での通信ができないためフレームレートを10にしています。環境に応じてフレームレートを調整してみて下さい(サーバとクライアントのプログラム両方)。
サーバとクライアントの間では、文字列で送受信しています。文字列に含まれるデータは:

サーボの値 + コンマ + LEDの値 + 改行コード

であり、たとえば

"155,1\n"

のような連続した文字列になります。サーボの値は0~255の数値、LEDの値は0か1になり、その間をコンマで区切り(デリミタ)、最後の部分に「\n」改行コードを付け加えて送信します。文字「\n」は、アスキーコード表で十進数の「10」に相当します。受信の際には、readStringUntil(10)を使うことで、改行コード「\n」つまり「10」までをひとまとまりのデータとして読み込み、その文字列データをtrim()で改行コードを取り除き、split()でコンマをもとに配列に分解し、int()で文字列の数値を整数化し、それぞれの値に代入します(文字列を分解して数値化する方法は「Arduino-Processing シリアル通信5」でも説明してあります)。
サーバのプログラムが開始したら、「s」キーを押してArduinoとのシリアル通信を開始します。

Processing サーバのプログラム:

//ネットワークライブラリの取り込み
import processing.net.*;
//シリアル通信ライブラリの取り込み
import processing.serial.*;

//サーバのインスタンス
Server server;
//クライアントのインスタンス
Client client;
//シリアル通信のインスタンス
Serial port;

//サーボの変数
int servoVal;
//LEDの変数
int ledVal;
//ドラッグ中かどうかのフラグ
boolean startDrag=false;

void setup(){
//画面サイズ
size(256,200);
//フレームレートを遅めに設定
frameRate(10);
//サーバの設定(ポート:12345)
server = new Server(this, 12345);
//シリアルポート設定
port=new Serial(this,"/dev/tty.usbserial-A4001Kjl",9600);
//矩形描画を中央配置に設定
rectMode(CENTER);
//外形線なし
noStroke();
}

void draw() {
//クライアントからのデータ受信
client = server.available();
//クライアント受信内容が空ではないとき
if (client != null) {
//文字列データの読み込み(改行コードまで)
String input=client.readStringUntil(10);
//文字列データの改行コードを取り除く
input=trim(input);
//文字列データを整数の配列に変換
int[] data = int(split(input, ','));
//配列の最初の値をサーボ変数に代入
servoVal=data[0];
//配列の次の値をLED変数に代入
ledVal=data[1];
}

//ドラッグ中
if(startDrag){
//サーボ変数にマウスX座標値を代入(最小値:0、最大値:255)
servoVal=constrain(mouseX,0,255);
//クライアント側へ送信(サーボの値、コンマ、LEDの値、改行コード)
server.write(servoVal+","+ledVal+"\n");
}

background(0);//背景(黒)

fill(80);//スライダ溝の塗色(グレー:80)
rect(width/2,50,width,50);//スライダ溝の矩形描画
fill(255);//スライダの塗色(白)
rect(servoVal,50,10,50);//スライダの矩形描画

//LEDボタンの色切替(0:オフ,1:オン)
if(ledVal==1){ //オンの場合
fill(0,255,0);//緑にする
}else{ //オフの場合
fill(255); //白にする
}
//LED用のボタン描画
rect(width/2,150,50,50);
}

//シリアル通信処理
void serialEvent(Serial p){
//合図用データが1個来た場合(0個より多い場合)
if(port.available()>0){
//合図用データを読込んバッファを空にする
port.read();
//サーボの値とLEDの値をシリアル通信で出力
port.write(servoVal);
port.write(ledVal);
}
}

//キーを押した場合
void keyPressed(){
//「s」キーの場合
if(key=='s'){
//シリアル通信開始用データ送信
port.write(servoVal);
port.write(ledVal);
}
}

//マウスボタンを押した場合
void mousePressed(){
//LED用のボタン矩形内にマウスがある場合
if(mouseX>width/2-25 && mouseX<width/2+25 && mouseY>125 && mouseY<175){
//LED点灯切替処理
if(ledVal==0){//オフの場合
ledVal=1; //オンにする
}else{ //オンの場合
ledVal=0; //オフにする
}
//クライアント側へ送信(サーボの値、コンマ、LEDの値、改行コード)
server.write(servoVal+","+ledVal+"\n");
}
//スライダ部分の場合
if(mouseY>25 && mouseY<75){
//ドラッグのフラグをtrueにする
startDrag=true;
}
}

//マウスを放した場合
void mouseReleased(){
//ドラッグのフラグをfalseにする
startDrag=false;
}




「Processing クライアント側のプログラム」:

//ネットワークライブラリを取り込む
import processing.net.*;
//クライアントのインスタンス
Client client;

//サーボ用変数を用意
int servoVal=127;
//LED用変数を用意
int ledVal=0;
//ドラッグ中かどうかのフラグ
boolean startDrag;

void setup() {
size(256, 200);
frameRate(10);
//サーバのIPアドレス、ポートの設定
//(「10.0.1.2」の部分は適宜変更)
client = new Client(this, "10.0.1.2", 12345);
rectMode(CENTER);
noStroke();
}

void draw(){
//サーバからのデータ受信
if (client.available() > 0) {
String input = client.readStringUntil(10);
input = trim(input);
int[] data = int(split(input, ','));
print(data);
servoVal=data[0];
ledVal=data[1];
}

//ドラッグ中の処理
if(startDrag){
servoVal=constrain(mouseX,0,255);
client.write(servoVal + "," +ledVal + "\n");
}

//描画処理
background(0);
fill(20);
rect(width/2,50,width,50);
fill(255);
rect(servoVal,50,10,50);
if(ledVal==1){
fill(0,255,0);
}else{
fill(255);
}
rect(width/2,150,50,50);
}


void mousePressed(){
if(mouseX>width/2-25 && mouseX<width/2+25 && mouseY>125 && mouseY<175){
if(ledVal==0){
ledVal=1;
}else{
ledVal=0;
}
//サーバへ送信(サーボの値、コンマ、LEDの値、改行コード)
client.write(servoVal + "," +ledVal + "\n");
}

if(mouseY>25 && mouseY<75){
startDrag=true;
}
}

void mouseReleased(){
startDrag=false;
}



クライアント側のプログラムでは、setup(){...}内でサーバのIPアドレスを指定する必要があります。上のプログラムでは「10.0.1.2」になっていますが、適宜変更してください。通常ローカルネットワークであれば「127.0.1.2」や「192.168.1.2」、あるいはルーターやAirMacなどを使っていれば、「10.0.1.2」などになっているかもしれません。サーバに設定したコンピュータのIPアドレスを調べるには、MacOSXであれば、「システム環境設定>ネットワーク」を開き、AirMacを使用している場合は「AirMac」を選択、ケーブル接続している場合は「内蔵Ethernet」を選択し、「TCP/IP」タグを選択すると2段目あたりに「IPアドレス:10.0.1.2」などと表示されています。Windowsの場合は、コマンドプロンプトを開いて、「ipconfig」と打ってリターンすれば、幾つかの情報が現れ「IP Address....10.0.1.2」などと表示されるはずです。



「外部からの接続方法」:
ルータを通してインターネットに接続している場合、ローカルネットワーク外から通信するには、ルータのポートマッピングやサーバコンピュータのファイヤーウォールの解除設定する必要がでてきます。
通常、インターネットプロバイダからグローバルIPアドレスがひとつ与えられています。各自のパソコンからグローバルIPアドレスを調べるには以下のようなサイトで調べることができます。
http://dog.tele.jp/lookup.php
「あなたのパソコンのグローバルIPアドレスは」と書かれている場所に表示されるはずです。
あるいは、
http://www.ugtop.com/spill.shtml
のサイトの「現在接続している場所(現IP)」の欄に同じアドレスが表示されるはずです。
このグローバルIPアドレスをメモしておきます。


「接続例」:
以下は、ローカルネットワーク内のひとつのコンピュータをサーバに設定し、ローカルネットワーク外から通信をするための接続例です。例えば、仕事場や学校のコンピュータから、自宅にあるサーバに設定したコンピュータにアクセスする方法です。



上画像では、ADSLモデム-ルータを使用してインターネットに接続しており、さらにそのADSLモデム-ルータにAirMacをケーブルで接続しています。そして複数あるコンピュータは、AirMacの無線通信でインターネットに接続しています。
このネットワークのグローバルIPアドレスは、先ほど調べた方法により「219.196.xxx.xxx」になっています(実際のアドレスに置き換えてください)。「モデム-ルータ」によって、グローバルIPアドレスがプライベートIPアドレスに変換され、複数のプライベートIPアドレスに分けられます(「192.168.xxx.xxx」のようなアドレス)。さらに、AirMacにおいてもルータ機能があるため、さらに細かなプライベートIPアドレスに分けられます(「10.0.1.xxx」のようなアドレス)。
ここでは、二つのルータによって二段階にIPアドレスが割り振られていますが、AirMacを「ブリッジモード」に切り替えることで、以下のようにAirMacのルータ機能を使わないネットワークに変更することができます。



「ブリッジモード」:
「ブリッジモード」は、コンピュータから「AirMacユーティリティ」を開いて変更することができます(ただし、変更できる権限が必要です)。「ブリッジモード」にすることで、AirMacはIPアドレス(「10.0.1.xxx」のようなアドレス)を割り振らなくなるので、元々の「モデム-ルータ」が割り振るアドレスを使うことにします(「192.168.xxx.xxx」のようなアドレス)。ただし、このままだと「モデム-ルータ」が自動的にプライベートIPアドレスをそれぞれのコンピュータに割り振ってしまうので、使用しないコンピュータなどがあるときは、プライベートIPアドレスが入れ替わってしまうことがあります。
そのため、サーバにしたいコンピュータには固定したIPアドレスを与えます。以下のように「コンピュータC」に固定のIPアドレス「192.168.3.10」を与えて、サーバとして機能させることにします。



「固定IPアドレスにする」:
各コンピュータ上のIPアドレス設定では、「DHCPサーバを参照」や「DHCPサーバを使用」というように、ルータから自動的にIPアドレスが割り振られる設定になっていることが多いと思います。MacOSXの場合、「システム環境設定>ネットワーク」へ行き、AirMac(あるいはEthernet:現在インターネットに接続している方法を選択)を選択し、「TCP/IP」の項目内で設定できます。サーバ用に使うコンピュータにおいては、このIPアドレス設定の部分を、「手入力」に変更し、指定したIPアドレスを使うように設定し直します。
Windows XPの場合は、「コントロールパネル>ネットワーク接続」で、使用しているネットワーク接続(「ワイヤレスネットワーク接続」など)のプロパティを右クリックで開き、「インターネットプロトコル(TCP/IP)」を選択しプロパティボタンを押し、「IPアドレスを自動的に取得する」に設定されている部分を「次のIPアドレスを使う」に切り替えて、以下の設定を入力していきます。

上図の場合は、ルータのIPアドレスが「192.168.3.1」になり、AirMacが「192.168.3.2」、以下に続く各コンピュータは「192.168.3.3」、「192.168.3.4」というように最後の数値がひとつずつ増えていきます。IPアドレスが重ならないように、固定するIPアドレスを「192.168.3.10」に設定しておきます(1~254まで可)。サブネットマスクは自動的に「255.255.255.0」になるはずです。ルータのIPアドレス(ゲートウェイ)は、「DHCPサーバを参照」の時と同じなので「192.168.3.1」を記入します。「DNS」あるいは「DNSサーバ」の項目については、先ほど調べたグローバルIPアドレスである「219.196.xxx.xxx」を記入します(グローバルIPアドレスは、実際に調べたアドレスを入れてください)。サーバ用のコンピュータの設定は以上です。


「ポートマッピング設定」:
もうひとつしなければならないことは、ポートマッピング(ポート転送/ポートフォワーディング)の設定です。回線に接続しているルータ自体の設定を変更する必要があります。通常コンピュータ上のブラウザからルータのアドレスにアクセスし操作するようになっています(各ルータのマニュアルを参照してください)。大抵の場合は、「詳細設定」のような項目に入っていると思います。
プロトコル、ポート、転送先のIPアドレス(先ほど固定したサーバ用のIPアドレス)を入力する必要があります。プロトコルは「TCP/UDP」を選択し、WAN側とLAN側のポートは同じものを入れておきますが、今回の場合Processingのコードでポートを「12345」に設定しておいたので、それを入力することにします(「12345」〜「12346」までというように範囲指定する入力にしておきます)。転送先IPアドレスは、固定した「192.168.3.10」を入力しておきます。ポートマッピングの設定は以上です。尚、ポートは、0~65535までの番号が入れられますが、0~1023までは使用目的が決められているので、あまりつかわない方がいいと思います。

ポートマッピングによって、ポート「12345」(あるいは「12346」)を通してローカルネットワーク外からグローバルIPアドレス「219.196.xxx.xxx」に送られた信号は、サーバ用コンピュータのプライベートIPアドレス「192.168.3.10」に転送されることになります。

Processingのクライアント用のプログラム内の、

client = new Client(this, "219.196.xxx.xxx", 12345);

IPアドレス部分をグローバルIPアドレス「219.196.xxx.xxx」(実際に調べたアドレスを入れてください)に書き換えればローカルネットワーク外から通信できるようになります。

参照:YahooBBのモデムのポート転送設定方法


「外部から通信できない場合」:
ファイヤーウォールによって、外部からの通信をブロックしている場合があるので、ファイヤーウォール設定を解除して通信してみてください。ただし、セキュリティ上危険になるので注意してください。

尚、同じローカルネットワーク内にある別のコンピュータからは通信できないので(例えば上図の「コンピュータA」とサーバの「コンピュータC」との通信はできない)、異なるグローバルIPアドレス(外部)から通信してください。「コンピュータA」と「コンピュータC」を通信させる場合は、前半で説明したローカルネットワーク内での通信方法を利用してください。



10/23/2008

Arduino-Processing BlueTooth通信+曲げセンサ

以前、ワイヤレス通信としてXbeeモジュールを用いましたが、もう一つワイヤレス通信として「BlueTooth」を用いる方法があります。今回は、SparkfunのBlueToothモジュール「BlueSmiRF Gold」を使います(国内ではストロベリーリナックスで販売)。Xbeeは3.3V電源を使用しますが、「BlueSmiRF Gold」は3.3V〜6.0Vまでの電源を使うことができるので、そのままArduinoにも接続しやすい仕様となっています(ただし、日本において、「BlueSmiRF Gold」は技術基準適合証明を受けていないため、実験や開発用のみで使用しなければならないようです)。Xbeeの場合は最低でも二つのモジュールを用意しなければ通信実験できないのですが、多くのノートパソコンにはBlueToothが搭載されているので、一つのBlueToothモジュールがあれば、とりあえずコンピュータから送受信することができます。


(上画像:「BlueSmiRF Gold」/from Sparkfun


今回は、Arduino基板に曲げセンサと「BlueSmiRF Gold」を接続し、コンピュータのBlueTooth機能を利用して、Processingとワイヤレスでシリアル通信してみます。曲げセンサについては、2本を背中合わせに貼り合わせて、まっすぐな状態から両方向に曲げて出力値が変化するように加工します。


「コンピュータとのBluetooth接続設定」
まず、「BlueSmiRF Gold」とコンピュータのBluetoothの接続設定を行います。
「BlueSmiRF Gold」には以下のように6本の端子があります。

CTS:送信要求端子(非接続またはRTS端子へ)
PWR:電源端子(Arduino 5V端子へ)
GND:グランド端子(Arduino GND端子へ)
TX :送信端子(Arduino RX:0番端子へ)
RX :受信端子(Arduino TX:1番端子へ)
RTS:受信準備完了端子(非接続またはCTS端子へ)

「BlueSmiRF Gold」のPWR端子とGND端子をArduinoの5V端子とGND端子に接続し、USBを通して電源供給します(あるいは、外部電源でもかまいません)。そうすれば、「BlueSmiRF Gold」の赤色のLEDが点滅し始めます。他の端子については、今のところ接続する必要はありません。

MacOSXの場合、
・メニューバー右端のBluetoothアイコンをクリック。
・「Bluetooth:入」を選択し機能をオンにする。
・さらに「Bluetoothデバイスを設定...」を選択する。
・「Bluetooth設定アシスタント」の画面が現れる。
・「続ける」を押していき、「任意のデバイス」を選択。
・デバイスが検索されたら「パスキーオプション」を押す。
・「このデバイスではパスキーを使用しない」を選択し「OK」を押す。
・「続ける」を押していき、最後に「終了」を押して完了。

Windowsの「Bluetooth設定」の場合、
アプリケーションを立ち上げて「新しい接続」を押します。「新しい接続の追加ウィザード」の画面で、「エクスプレスモード」を選び「次へ」を押し、「FireFry-D39A」というようなデバイス名で「BlueSmiRF Gold」を認識します。「次へ」を押すとポートが「COM40」あたりに設定されます。設定されれば以下のような画面になります。

「FireFry-D39A」を選択しダブルクリックすれば「接続」しますが、ここでは「接続」せず「ハイパーターミナル」上で「接続」することにします。

Bluetoothが内蔵されていないコンピュータの場合は、以下のようなBluetooth USBアダプタをコンピュータに接続する必要があります。




「Zterm/ハイパーターミナルの設定」
「BlueSmiRF Gold」の赤色のLED点滅が緑色のLED点灯に変われば通信接続されたことになります。
ただし「BlueSmiRF Gold」のデフォルトの通信速度(ボーレート)が115200bpsであるため、9600bpsに設定し直すことにします。そのためには、「BlueSmiRF Gold」の内部設定をATコマンドによって変更します。ATコマンドを使うには、MacOSXなら「ZTerm」、Windowsなら「ハイパーターミナル」などのターミナルアプリケーションを使って送信すると便利です。
「BlueSmiRF Gold」を電源に接続し、コンピュータのBluetooth接続設定をした後、「ZTerm」(MacOSX)あるいは「ハイパーターミナル」(Windows)を起動します。

MacOSXの場合:
ZTermのDial>Directry...を選択すると以下の画面が現れます。

「Dial Directory」画面上の「New」ボタンを押すと以下のような別画面が現れます。

「Service Name:」の欄に任意名を記入します。「Local Echo」にチェックを入れます。その他は上のような設定でも大丈夫です。「OK」ボタンを押します(「Dial Directory」画面上の中央上の「Connection」ボタンでこの画面に戻ることができます)。
「Settings>Terminal...」あるいは「Dial Directory」画面上の「Terminal」ボタンを押すと以下の画面が現れます。

上のような内容で設定し「OK」ボタンを押す。
次に、「Settings>Modem Preferences...」を選択すると以下の画面が現れます。

ここで、画面上段の「Serial Port:」がBluetoothのシリアルポート(「/dev/tty.FireFly-D39A-SPP-1」など)になっているか確認してください(なっていなければ選択する)。「OK」ボタンを押し、「Dial Directory」画面に戻ります。「Dial」ボタンを押して通信接続します。接続中は、「BlueSmiRF Gold」の緑色のLEDが点灯します。接続されない場合は、「BlueSmiRF Gold」の電源を入れなおすか、「Zterm」を再起動してみてください。

Windowsの場合:
ハイパーターミナルを立ち上げます。

この画面上で、「名前:」に接続名(任意名)を記入し、「OK」を押します(次回接続するときは、「キャンセル」を押し、メニューバーの「ファイル>開く」から保存した設定ファイルを選択してください)。


「接続方法:」の欄で、先ほどの「Bluetooth設定」で割り当てられたポート「COM40」を選択し「OK」を押します。


「ビット/秒:」を「9600」、「フロー制御」を「なし」、「適用」と「OK」を押します。
この設定ウィンドウが閉じると自動的に接続が開始されますが、メニューバーの「通信>切断」で通信を中断し、「ファイル>プロパティ」をクリックし、以下の画面を出します。


「ASCII設定」ボタンを押すと、さらに以下の画面が現れます。


上画像のようにチェックをいれます。「OK」を押して戻ります。
メニューバー「通信>電話」をクリックし、通信を開始します。
通信が開始されれば、「BlueSmiRF Gold」の緑のLEDが点灯します。
後は、ATコマンドを入力していきます。


「ATコマンド入力/通信速度の設定変更」
コンピュータ側のBluetoothと接続され、「BlueSmiRF Gold」の緑色のLEDが点灯すれば、以下のようにATコマンドを入力していきます。

$$$

ドルを三回(最後にリターンキーは押さない)を入力すると「CMD」という返事が表示され、ATコマンドモードに切り替わり、緑のLEDが点灯しつつ赤いLEDが点滅し始めます。
注意しなければいけないことは、「BlueSmiRF Gold」にはタイマー機能(デフォルト:60秒)があり、電源を入れてから60秒以内に「$$$」を入力する必要があります。時間切れになると、赤いLEDの点滅速度が遅くなります。「CMD」が表示されなかったり、赤いLEDが高速に点滅しないときは、一旦通信を切断し、「BlueSmiRF Gold」の電源を切って再接続した後、60秒以内に再度「$$$」を入力してみてください。あるいは、以下のように、このタイマー機能の時間を設定し直すことも可能です。

ST,100

を入力し「リターンキー」を押せば、タイマーを100秒に設定することができます(「ST,」の後に数値を入れることで制限時間を設定できます)。ただし、「ST,」の後に「0」を入力すると「遠隔設定不可」、「255」を入力すると「時間制限なし」になります。

通信速度(ボーレート)を9600に変更するには、

SU,96

を入力し「リターンキー」を押します(「SU,」の後にボーレートの最初の2桁を入力、9600の場合「96」、4800の場合「48」を入力)。「AOK」が表示されれば、変更されたことになります。変更内容を確認するには、

D

を入力し「リターンキー」を押します。そうすると各設定が以下のように表示されます。

***Settings***
BTA=00066600D39A
BTName=FireFly-D39A
Baudrt=9600
Parity=None
Mode =Slav
Authen=0
Encryp=0
PinCod=1234
Bonded=0
Rem=NONE SET

「Baudrt=9600」になっているので、通信速度(ボーレート)は9600に変更されています。ATコマンドモードを終了するには、

---

というように、ハイフンを3回入力し、「リターンキー」を押してください。そうすると「END」という返事がきます。
その他のコマンドについては、
http://www.sparkfun.com/datasheets/RF/RN_BlueportII-ref-guide.pdf
に書いてあります。「BlueSmiRF Gold」の基本設定は以上です。
尚、「ZTerm」やATコマンド入力については、「Arduino+Xbee Shield/Processing+XBee Explorer USB」においても説明があります。


(「ZTerm」のATコマンド入力画面)


「曲げセンサの接続方法」
次は、曲げセンサについてです。通常、曲げセンサはまっすぐな状態の時に抵抗値が低く、曲げると抵抗値が高くなる特性があります。反対方向に曲げてもそれ以上抵抗値は変化しないので、曲げる方向は一方向に限られてしまいます。2本の曲げセンサを背中合わせに貼り合わせて1本として使えば、まっすぐな状態からどちらの方向に曲げても抵抗値が変化するようになります。曲げセンサの通電性のある面を外側にし、両面テープなどで貼り合わせ、それぞれの端子の部分は互いにショートしないようにビニルテープや熱収縮チューブなどで絶縁しておきます。
ひとつの曲げセンサにプルアップ抵抗(10KΩ)を取付け、もうひとつの曲げセンサにはプルダウン抵抗(10KΩ)を取付けます(プルアップ/プルダウン抵抗については「センサについて」を参照)。そうすることで、一方へ曲げると読み取られる電圧は下がり、逆方向へ曲げると電圧が上がるようになります。それぞれ読み取った値をプログラム上で合成しProcessingへ送信します。Arduinoのアナログ入力analogRead()で読み込むと、一方の値が約200~500に変化し、もう一方が約500~800に変化するので、合成すると約700~1300前後で値が変化することになります。まっすぐな状態のときは、約1000前後になります。
ちなみに、「Bi-directional Flexible Bend Sensor」という両方向性の曲げセンサがあります。


「スタンドアロン/外部電源の接続方法」

今回はワイヤレス通信なのでコンピュータにUSB接続せずに、外部電源として乾電池006P(9V)を用いスタンドアロンで操作できるようにします。
抵抗を取り付けた曲げセンサを、以下のようにArduinoのアナログ端子の0番ピンと1番ピンに接続します。
Arduinoへプログラムをアップロードする際には、Bluetoothモジュールを外して行って下さい。同時に、Arduino基板上の「USB-EXT」のジャンパピンも「USB」側に差込んでアップロードしてください。
アップロード後は、Arduino基板とBluetoothモジュールを以下のように接続し、「USB-EXT」のジャンパピンを「EXT」側に差し込んでください。




「Arduinoのプログラム」

void setup(){
//シリアル通信開始
Serial.begin(9600);
}

void loop(){
//変数を用意し、二つの読取り値を合成して代入
int val=analogRead(0)+analogRead(1);

//合図用データが届いたら
if(Serial.available()>0){
//合成した値を文字列(改行コード付き)で送信
Serial.println(val,DEC);

//バッファを空にしておく
Serial.read();
}
}



Arduinoからは、値を文字列として送信します。文字列にすることで、大きな値をそのままProcessingへ送信することができます(文字列でシリアル通信する方法については「Arduino-Processing シリアル通信5」を参照して下さい)。


「Processingのプログラム」
Processingの方は、読み取った値に応じて矩形が左右に動く単純なプログラムにします。Arduinoからは改行コードを含んだ文字列データが届くのでbufferUntil()を用い、改行コードまでをひとまとまりのデータとしてreadStringUntil()で読み込み、不要な改行コードをtrim()で取り除き、int()で整数値化し、最終的にmap()でオフセットや最小値/最大値を設定してX座標に代入します。少しゆとりをみて、合成された読み取り値の最小値を500、最大値を1500、図形のX座標値となる最小値を0、最大値を画面幅の600に設定することにします。map()で得られる値はfloat(小数)になるので、X座標用の変数xもfloat型にしておきます。
プログラムを実行し、マウスクリックでシリアル通信を開始することにします。


//シリアル通信ライブラリを取り込む
import processing.serial.*;
//ポートのインスタンス
Serial port;
//X座標用の変数(小数)
float x;

void setup(){
//横長の画面に設定
size(600,200);
//シリアルポート設定(Bluetoothのポート)
port=new Serial(this,"/dev/tty.FireFly-D39A-SPP-1",9600);

//「10」(ラインフィード:改行コード)が来る度に
//serialEvent()を呼び出す
port.bufferUntil(10);
}

void draw(){
//背景
background(100);
//矩形描画
rect(x,100,20,20);
}

void serialEvent(Serial p){
//文字列の変数stringDataを用意し、
//「10」(ラインフィード:改行コード)が来るまで読み込む
String stringData=port.readStringUntil(10);

//文字列データが空ではないとき
if(stringData!=null){
//文字列データに含まれる改行記号を取り除き整数にする
int val=int(trim(stringData));
//値のオフセット、最小値、最大値を設定しxに代入
x=map(val,500,1500,0,600);
//合図用データ送信
port.write('A');
}
}

//マウスをクリックしたらシリアル通信開始
void mousePressed(){
//通信開始用データ送信
port.write('A');
}

10/20/2008

Processing ライブラリのインストール先(v149以降)

現在Processingの最新バージョンは152になっており、いくつかの内容変更があります。特にProcessing 149以降では、ダウンロードしたライブラリをインストールする際(例えば、サウンドライブラリである「minim」など)、スケッチフォルダ内に「libraries」というフォルダを作成し、そのなかにダウンロードしたライブラリを入れるようになりました。
例えば、「minim」の場合なら、ダウンロードした「minim」というフォルダを、MacOSの場合、/Users/username/Documents/Processing/librariesの中に入れるということになります(「username」部分は各ユーザの名前のディレクトリです)。Macintosh HD>ユーザ>各ユーザ名>書類>Processing>libraries>minimという感じです。

追記:
バージョン155以降では、「libraries」フォルダがない場合には自動的に作成されるようになったようです。

10/18/2008

Arduino-Processing シリアル通信6


【変更】以下はArduino1.0まで対応したプログラム内容です。
特にシリアル通信においては、Arduino2.0使用の際、バイト送信する場合、
Serial.print(value,BYTE);
のかわりに、
Serial.write(value);
を使用してください。


これまでのシリアル通信では、ProcessingとArduinoの一対一の通信を行ってきましたが、今回はProcessingで二つのシリアルポートを使い、二つのArduinoとシリアル通信を行う実験をしてみます。それぞれのArduino基盤には可変抵抗器をとりつけて入力値をProcessingへ別々に送信することにします。Processingの画面では、二つの入力信号を個別に読み取ってそれぞれの状態を描画することにします。

具体的なサンプルとして、「Pong」(下画像)のように二つのコントローラによって対戦するプログラムにします。それぞれのArduino基盤がコントローラとしてコンピュータに接続され、画面上でそれぞれのラケットを動かすことになります(得点のプログラムは含まれていません)。


(上画像:Processingの画面「Pong」)

Arduino基盤と可変抵抗器の接続は以下のようになります(二つ必要です)。



Arduinoのプログラム:
void setup(){
  Serial.begin(9600);
}

void loop(){
  //可変抵抗器の読み取り
  int val=analogRead(0);
  //シリアル通信処理
  if(Serial.available()>0){//合図用データが一つ来たら
    //合図用データを読み込んでバッファを空にする
    Serial.read();
    //読取値を4で割り、バイトで送信
    Serial.print(val/4,BYTE);
  }
}

Arduino側のプログラムでは、可変抵抗器からの読取り値を4で割ってスケールダウンした値(0~255)をシリアル通信でProcessing側へ送信しています(同期通信させるために合図用データを用いるシリアル通信の方法については「Arduino-Processing シリアル通信2」を参照して下さい)。二つのArduino基盤とも同じ内容になります。

Processingのプログラム:
//シリアル通信ライブラリを取り込む
import processing.serial.*;
//二つのポートのインスタンス
Serial portA;
Serial portB;
//二つの読取値の変数
int valA=100,valB=100;
//ボ−ル座標用変数
int x=100,y=100;
//ボールの動きの向きの変数(1:正の向き、-1:負の向き)
int dirX=1,dirY=1;

void setup(){
  //画面サイズ設定
  size(300,256);
  //二つのシリアルポート設定
  portA = new Serial(this, "/dev/tty.usbserial-A50019vD", 9600);
  portB = new Serial(this, "/dev/tty.usbserial-A40014iU", 9600);
  //図形外形線なし
  noStroke();
  //塗り色(白)
  fill(255);
  //矩形描画位置を中央に設定
  rectMode(CENTER);
}

void draw(){
  //背景(黒)
  background(0);
  //左ラケット描画(valAをY座標に代入)
  rect(20,valA,10,30);
  //右ラケット描画(valBをY座標に代入)
  rect(280,valB,10,30);
  //ボール描画
  rect(x,y,10,10);

  //ボールX座標の動き
  x+=dirX;//X軸方向に+1または-1ずつ進める

  //ラケットAに当たった時のはね返り
  if(x==30 && y>valA-15 && y<valA+15){
    dirX*=-1;//向きを反転する
  }
  //ラケットBに当たった時のはね返り
  if(x==270 && y>valB-15 && y<valB+15){
    dirX*=-1;//向きを反転する
  }
  //画面左端からはみ出た場合
  if(x<0){
    x=270;//右側に戻る
  }
  //画面右端からはみ出た場合
  if(x>width){
    x=30;//画面左側に戻る
  }

  //ボールY座標の動き
  y+=dirY;//Y軸方向に+1または-1ずつ進める

  //画面上下位置でのはね返り
  if(y<5 || y>251){
    dirY*=-1;//向きを反転する
  }  
}

//キーを押した場合
void keyPressed(){
  //「s」キーでシリアル通信開始
  if(key=='s'){
    //二つのポートへ開始用データ送信
    portA.write(65);
    portB.write(65);
  }
}

//シリアル通信処理
void serialEvent(Serial p){
  //portAの場合
  if(p==portA){
    if(p.available()>0){
      //値を読み込みvalAに代入
      valA=p.read();
      //合図用データ送信
      portA.write(65);
    }
  }
  //portBの場合
  if(p==portB){
    if(p.available()>0){
      //値を読み込みvalBに代入
      valB=p.read();
      //合図用データ送信
      portB.write(65);
    }
  }
}

Processing側のプログラムでは、二つのシリアルポートを用意し、それぞれportA、portB(名前は任意)にしておきます。serialEvent(Serial p){...}の括弧内のpは、ポート名に対応しています(今回の場合は、pはportAまたはportBに対応します)。serialEvent()は、Processingがデータを受信した際に作動するので、if()文を使ってどちらのポートなのかを条件分けして判別し、ポートに応じてそれぞれの読込み値を変数に代入します。同期通信させるために、Arduinoから送信されたデータをp.available()で確認しデータを読み込んだ後に、合図用データ(0~255の数値あるいは'A'や'a'などの一つの文字/1バイト分のデータ)を送信しています。
Processingのプログラムを開始したら、「s」キーを押すことでシリアル通信を開始することにしました(プログラム開始から数秒経った後に「s」キーを押さないと、シリアル通信が開始されないことがあります)。

関連:
Arduino-Processing シリアル通信1」(一つの値を送る/非同期通信)
Arduino-Processing シリアル通信2」(複数の値をバイトで送る/同期通信)
Arduino-Processing シリアル通信3」(大きな値を複数送る)
Processing-Arduino シリアル通信4」(ProcessingからArduinoを制御する)
Arduino-Processing シリアル通信5」(複数の値を文字列で送信する)


[目次:Processing関係]  [HOMEへ戻る]  [目次:Arduino関係]