*以下のサンプルは、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を使って表示する。
1/30/2009
1/11/2009
展覧会報告
建築発明工作ゼミの展覧会「BODY, FURNI, ROOM」が「GALLERY OBJECTIVE CORRELATIVE」にて、2008.12.14-17まで開催されました。
巨大な折り紙、振動モータ、プロジェクタ、超磁歪素子スピーカ(壁上)を使って相互作用する。
室内壁面上に氷をつくる(ペルチェ素子使用)
カーテンがモータ制御によって自動的に開閉し、重心移動によりカーテンレール自体が回転する。
巨大な折り紙、振動モータ、プロジェクタ、超磁歪素子スピーカ(壁上)を使って相互作用する。
室内壁面上に氷をつくる(ペルチェ素子使用)
カーテンがモータ制御によって自動的に開閉し、重心移動によりカーテンレール自体が回転する。
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を選択します。
以下のようなプログラムが表示されるはずです。
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の任意のピンの入出力設定(Arduino.INPUT または Arduino.OUTPUT)を行うことができます。
出力をHIGHかLOWにするには、
で、出力値をarduino.LOWかarduino.HIGHで設定します。
そのほか、
という感じになるので、arduino.を頭につければ、Arduino上でのプログラムとほぼ同じです。
通常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上でのプログラムとほぼ同じです。
ラベル:
arduino,
Firmata,
processing
12/06/2008
スピーカ/音出力について
音を出力するものとしてコーンスピーカが一般的に使われますが、それ以外にも以下のようなものがあります。
・「圧電スピーカ」:パルスを送り振動させブザーのような音を鳴らす(「Arduino 圧電スピーカ」を参照)。
・「振動モータ」:偏心錘がついたモータによって振動させる(携帯電話のバイブレータなど)。
・「ソレノイド」:電磁石の力によって金属のシリンダーを往復運動させ、物体などをたたくことで音を出す。
・「パラメトリックスピーカ」:指向性スピーカ(超音波スピーカによる方向性/反射性のある音のビーム)。
・超磁歪素子という振動体を物体に接触させると、その物体がスピーカのように振動し音を出す機器として以下のようなものがあります。
1550円
2980円から。
5500円。
7971円。
4280円。
5577円。
また、音の入力装置(通常のマイク以外)として「ギター用ピックアップ」のように金属弦の振動を磁気的に拾いとる部品もあります。
あるいは磁気テープを読み取る場合、以下のような製品のヘッド部分を取り出して利用することもできます。
カセットテープヘッドについてのまとめ。
680円。
以下は改造例。
・「圧電スピーカ」:パルスを送り振動させブザーのような音を鳴らす(「Arduino 圧電スピーカ」を参照)。
・「振動モータ」:偏心錘がついたモータによって振動させる(携帯電話のバイブレータなど)。
・「ソレノイド」:電磁石の力によって金属のシリンダーを往復運動させ、物体などをたたくことで音を出す。
・「パラメトリックスピーカ」:指向性スピーカ(超音波スピーカによる方向性/反射性のある音のビーム)。
・超磁歪素子という振動体を物体に接触させると、その物体がスピーカのように振動し音を出す機器として以下のようなものがあります。
どこでも伝導スピーカー ホワイト(p-0034-39)
posted with amazlet at 10.04.21
ピーナッツクラブ
売り上げランキング: 7277
売り上げランキング: 7277
1550円
ピタッとスピーカー(ブルー)DN-A002BU
posted with amazlet at 10.04.17
株式会社 StrapyaNext
売り上げランキング: 14047
売り上げランキング: 14047
2980円から。
5500円。
エンティス デジタルサウンドジェネレーター Tunebug-Vibe Tunebug-vibe
posted with amazlet at 10.04.21
エンティス (2009-12-18)
売り上げランキング: 3390
売り上げランキング: 3390
7971円。
DESIGN FACTORY どこでもスピーカー
posted with amazlet at 09.03.30
㈱デザインファクトリー
売り上げランキング: 13234
売り上げランキング: 13234
4280円。
NIMZY VIBRO BLASTER SILVER
posted with amazlet at 09.07.29
海連 (2006-10-31)
売り上げランキング: 42650
売り上げランキング: 42650
デバイスネット ヨロズオーディオ DN-A001
posted with amazlet at 09.07.29
デバイスネット (2008-12-05)
売り上げランキング: 19195
売り上げランキング: 19195
5577円。
FOSTEX エア アクティブ・コンタクト・スピーカー ウォーム・シルバー GY-1(S)
posted with amazlet at 09.07.29
FOSTEX (2006-06-23)
売り上げランキング: 43846
売り上げランキング: 43846
また、音の入力装置(通常のマイク以外)として「ギター用ピックアップ」のように金属弦の振動を磁気的に拾いとる部品もあります。
Dimarzio DP175/True Velvet Neck/WH エレキギター用ピックアップ
posted with amazlet at 09.03.30
DiMarzio
売り上げランキング: 120012
売り上げランキング: 120012
あるいは磁気テープを読み取る場合、以下のような製品のヘッド部分を取り出して利用することもできます。
カセットテープヘッドについてのまとめ。
680円。
以下は改造例。
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カメラを使い、色を手がかりに物体を追いかける。
*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」キーを押せば、カメラセッティング画面に切り替わります(手動露出や手動コントラストなどに切り替えた方が認識しやすくなります)。
[プログラムを表示]
import processing.video.*; Capture video; PFont font; int w=320; int h=240; //前回画面ピクセル色を保存するための配列を用意 color[] exColor=new color[w*h]; //許容値の変数:50に設定しておく int tolerance=50; int sumX,sumY;//平均値を求めるための合計座標値の変数 int pixelNum;//変化のあったピクセルを数えるための変数 float x,y;//座標値の変数 float filterX,filterY;//フィルタをかけた座標値の変数 boolean movement=false;//動体の有無のフラグ void setup(){ size(w, h); video = new Capture(this, w, h); font=createFont("Monaco",10); textFont(font); rectMode(CENTER); noStroke(); } void draw() { if(video.available()){ background(0); video.read(); set(0,0,video);//カメラ映像表示 loadPixels();//画面内ピクセルをロードしておく movement=false;//動体のフラグをfalseに戻しておく for(int i=0;i<w*h;i++){ //前回と今回の画面のピクセルの各色の差を求める float difRed=abs(red(exColor[i])-red(video.pixels[i])); float difGreen=abs(green(exColor[i])-green(video.pixels[i])); float difBlue=abs(blue(exColor[i])-blue(video.pixels[i])); //色の差が許容値以上の場合(動体がある場合) if(difRed>tolerance && difGreen>tolerance && difBlue>tolerance){ movement=true;//動体有りのフラグをtrueにしておく pixels[i]=color(0,255,0);//そのピクセルを緑にする sumX+=i%w;//平均値を求めるためにX座標値を加算する sumY+=i/w;//平均値を求めるためにY座標値を加算する pixelNum++;//変化のあったピクセル数を数える } //次回ループのために今回の画面を前回の画面として保存しておく exColor[i]=video.pixels[i]; } //動体があった場合(画面内に変化があった場合) if(movement==true){ updatePixels();//画面内ピクセルをアップデート x=sumX/pixelNum;//X座標平均値を求める y=sumY/pixelNum;//Y座標平均値を求める //各変数を初期化しておく sumX=0; sumY=0; pixelNum=0; } } filterX+=(x-filterX)*0.3;//X座標にフィルタをかける filterY+=(y-filterY)*0.3;//Y座標にフィルタをかける fill(255,0,0); rect(filterX,filterY,20,20);//正方形描画 text(tolerance,10,10);//許容値を表示 } void keyPressed(){ if(key=='c'){ video.settings();//カメラセッティング } if(key==CODED){ if(keyCode==LEFT){ tolerance-=1;//許容値を-1する } if(keyCode==RIGHT){ tolerance+=1;//許容値を+1する } } }
「Pongをプレイ」
次に、応用として「Pong」のパドルをモーショントラッキングで動かすサンプルをつくってみます。
動作によって変化があったピクセルの位置が画面内の左側あるいは右側を判別し、左右のパドルを個別に動かせるようにします。画面の端から50ピクセル幅のエリアで動作検知します(画面中央付近では反応しません)。
(モーショントラッキングで「Pong」をプレイする)
プレイしやすいように、カメラ映像は左右反転(鏡像)しています。
左右矢印キーで許容値を調整します(画面には許容値は表示されません)。
画面上部に点数を表示。
「c」キーでカメラセッティング。
「スペース」キーで点数をリセット。
[プログラムを表示]
import processing.video.*; Capture video; PFont font; int w=320; int h=240; //前回画面ピクセル色を保存するための配列を用意 color[] exColor=new color[w*h]; int tolerance=20; float y;//右パドルのY座標 int sumY;//平均値を求めるための合計座標値の変数 int pixelNum;//変化のあったピクセル数を数えるための変数 float filterY;//フィルタをかけたY座標変数 boolean movement=false;//動体検知フラグ float y2;//左パドルのY座標 int sumY2;//平均値を求めるための合計座標値の変数 int pixelNum2;//変化のあったピクセル数を数えるための変数 float filterY2;//フィルタをかけたY座標変数 boolean movement2=false;//動体検知フラグ int ballX=-200,ballY=height/3;//ボール座標 int dirX=1,dirY=1;//ボールの向きの変数 int speedX=2,speedY=2;//ボール移動量変数 int pt=0,pt2=0;//点数の変数 void setup(){ size(w, h); video = new Capture(this, w, h); font=createFont("Monaco",10); textFont(font); rectMode(CENTER); noStroke(); } void draw() { if(video.available()){ background(0); video.read(); scale(-1,1);//画面を鏡像(左右反転) image(video,-w,0);//鏡像のため映像のX座標を-wにして表示 scale(-1,1);//鏡像を戻しておく movement=false;//動体検知のフラグをfalseにしておく(初期化) movement2=false; for(int i=0;i<w*h;i++){ //前回と今回の画面のピクセルの各色の差を求める float difRed=abs(red(exColor[i])-red(video.pixels[i])); float difGreen=abs(green(exColor[i])-green(video.pixels[i])); float difBlue=abs(blue(exColor[i])-blue(video.pixels[i])); //色の差が許容値以上の場合(動体がある場合) if(difRed>tolerance && difGreen>tolerance && difBlue>tolerance){ if(i%w<50){//X座標が50以下の場合(画面右側の場合) movement=true;//動態検知フラグをtrueにしておく sumY+=i/w;//平均値を求めるために座標値を加算しておく pixelNum++;//ピクセル数を数えておく } if(i%w>width-50){//X座標が270以上の場合(画面左側の場合) movement2=true; sumY2+=i/w; pixelNum2++; } } //次回ループのために今回の画面を前回の画面として保存しておく exColor[i]=video.pixels[i]; } if(movement==true){//動体検知した場合(画面右) y=sumY/pixelNum;//平均Y座標を求める //0に戻しておく(初期化) sumY=0; pixelNum=0; } if(movement2==true){//動体検知した場合(画面左) y2=sumY2/pixelNum2; sumY2=0; pixelNum2=0; } } //フィルタをかけたパドルのY座標値 filterY+=(y-filterY)*0.4; filterY2+=(y2-filterY2)*0.4; //ボール上下跳ね返りの処理 if(ballY<5){ ballY=5; dirY=1; } if(ballY>height-5){ ballY=height-5; dirY=-1; } //ボールがパドルに当たって跳ね返る処理 if(ballX>25 && ballX<30 && ballY>filterY2-28 && ballY<filterY2+28 && dirX==-1){ ballX=30; dirX=1; } if(ballX>width-30 && ballX<width-25 && ballY>filterY-28 && ballY<filterY+28 && dirX==1){ ballX=width-30; dirX=-1; } //ボールが画面端から出てしまったときの処理(得点処理) if(ballX<0 && dirX==-1){ ballX=width+200;//ボールを画面反対側へ移動 pt+=1;//左プレイヤー点数加算 } if(ballX>width && dirX==1){ ballX=-200;//ボールを画面反対側へ移動 pt2+=1;//右プレイヤー点数加算 } //ボールの移動量 ballX+=speedX*dirX; ballY+=speedY*dirY; fill(255);//塗り色(白) rect(width-20,filterY,10,50);//右パドル表示 rect(20,filterY2,10,50);//左パドル表示 rect(ballX,ballY,10,10);//ボール表示 text(pt,60,20);//左プレイヤー点数表示 text(pt2,width-65,20);//右プレイヤー点数表示 } void keyPressed(){ if(key=='c'){//cキーでカメラセッティング video.settings(); } if(key==' '){//スペースキーで点数をリセット pt=0; pt2=0; } if(key==CODED){ if(keyCode==LEFT){ tolerance-=1; if(tolerance<0){ tolerance=0; } } if(keyCode==RIGHT){ tolerance+=1; } } }
関連:
Webカメラ:
「Processing Video (Webカメラ)」--Webカメラの使い方/映像にフィルタをかけて表示。
「Arduino+Processing マトリクスLED+Webカメラ」--Webカメラ映像をマトリクスLEDに映す。
「Processing Webカメラを光センサとして使う」--点光源で画面内に線を描く。
「Processing Webカメラ/定点記録画像」--Webカメラ映像を0.5秒おきに画像保存(JPEG)する。
「Processing Webカメラ/カラートラッキング」--Webカメラを使い、色を手がかりに物体を追いかける。
ラベル:
processing,
Webカメラ,
モーショントラッキング
登録:
投稿 (Atom)