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ピクセル）を全て読み込みます。
・対象となる物体の色（特定の１ピクセル分の色）をpixels[]で取り出します。
・各ピクセルをred()、green()、blue()でRGBに分解します。
・各ピクセルの色と物体の色を各RGB色ごとに比較します。
・比較した各RGB色が設定した許容値（tolerance）以内であるかを判別します。
・許容値以内のピクセルがある場合、そのピクセルの座標値を調べます。
・選択された複数のピクセルの座標を統合して、最終的にXY座標を導き出します。
・導かれた座標を図形（赤い円）の座標に代入し、物体に合わせて図形（赤い円）が動くようにします。


「選択したピクセルの色をRGBに分解し判別する」：
ひとつのピクセルであるpixels[i]には、color(R,G,B)の３つの値が含まれています（アルファ値／透明度も含めれば４つになりますが、今回は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」が表示され、赤い円は前回の位置に留まります。再度近似色が画面内に現れれば、赤い円はその位置に移動します。


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

　[プログラムを表示]

//ビデオライブラリのインポート
import processing.video.*;
Capture video;//インスタンス生成
PFont font;//フォントを用意

int w=320;//画面幅
int h=240;//画面高
int tolerance=15;//色許容値用の変数（後で調整可）
color targetColor=color(255,0,0);//物体の色用の変数（後で変更可）

int x;//図形座標用変数
int y;
int xmin=w,xmax=0;//左端X座標、右端X座標
int ymin=h,ymax=0;//上端Y座標、下端Y座標

boolean detection=false;//物体検知のフラグ

void setup(){
  size(w, h);//画面サイズ設定
  smooth();//滑らかな描画に設定
  video = new Capture(this, w, h);//キャプチャ映像の設定
  font=loadFont("Monaco-10.vlw");//フォントをロード
  textFont(font);//フォントの設定
  noStroke();//外形線なし
}

void draw() {
  if(video.available()){//キャプチャ映像がある場合
    video.read();//映像読み込み
    //video.filter(BLUR,2);必要に応じてぼかしフィルタをつかう（ノイズ除去用）  
    set(0,0,video);//映像表示
    
    detection=false;//物体検知のフラグをfalse（検知なし）にしておく

    for(int i=0;i<w*h;i++){//画面全体のピクセル数だけ繰り返し処理
      //物体の色と各ピクセルの色の差を求める（RGB３色分）
      float difRed=abs(red(targetColor)-red(video.pixels[i]));
      float difGreen=abs(green(targetColor)-green(video.pixels[i]));
      float difBlue=abs(blue(targetColor)-blue(video.pixels[i]));

      //RGB各色が許容値以内の場合（近似色である場合）
      if(difRed<tolerance && difGreen<tolerance && difBlue<tolerance){
        //フラグを物体検知有りにする
        detection=true;

        //左端、右端のX座標、上端、下端のY座標を導く
        //今回の値と今までの値を比較し、最小値、最大値を調べる
        xmin=min(i%w,xmin);//左端（X最小値）
        xmax=max(i%w,xmax);//右端（X最大値）
        ymin=min(i/w,ymin);//上端（Y最小値）
        ymax=max(i/w,ymax);//下端（Y最大値）
      }
    }
    
    if(detection==true){//物体検知有りの場合
      x=(xmin+xmax)/2;//X座標を左端と右端の座標の中点とする
      y=(ymin+ymax)/2;//Y座標を上端と下端の座標の中点とする

      //左端、右端、上端、下端の座標値を初期化しておく
      xmin=w;
      xmax=0;
      ymin=h;
      ymax=0;
    }
  }
  
  fill(255,0,0);//塗り色：赤
  ellipse(x,y,20,20);//円描画（求めたXY座標を代入）

  //以下は設定内容の表示
  fill(targetColor);//指定した物体の色
  rect(0,0,10,10);//矩形表示
  
  String s;//物体検知有無表示の文字列変数
  if(detection==true){//物体検知有りの場合
    s="detected";//表示：「検知」
  }else{
    s="none";//表示：「なし」
  }
  text(tolerance+": "+s,20,10);//文字列表示（許容値：物体検知有無）
}

void mousePressed(){//クリックしたら
  //マウス座標上のピクセルの色（物体の色）を記憶しておく
  targetColor=video.pixels[mouseX+mouseY*w];
}

void keyPressed(){
  if(key=='c'){//「c」キーを押した場合
    video.settings();//カメラセッティング
  }
  if(key==CODED){
    if(keyCode==LEFT){//左キーを押した場合
      tolerance-=1;   //許容値を-1する
    }
    if(keyCode==RIGHT){//右キーを押した場合
      tolerance+=1;    //許容値を+1する
    }
  }
}

＊プログラムを開始する前に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　文字と画像」を参照）。

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

　[プログラムを表示]

import processing.video.*;
Capture video;
PFont font;

int w=320;
int h=240;
int tolerance=20;
color targetColor=color(255,0,0);

float x;//X座標変数（小数値）
float y;//Y座標変数（小数値）
int sumX,sumY;//座標平均値を求めるための加算用変数
int pixelNum;//近似色ピクセルの個数用変数
float filterX,filterY;//滑らかな動きのためのフィルタ用変数
boolean videoImage=true;//カメラ映像の表示／非表示切り替えフラグ

boolean detection=false;

void setup(){
  size(w, h);
  smooth();

  video = new Capture(this, w, h);
  font=loadFont("Monaco-10.vlw");
  textFont(font);
  noStroke();
}

void draw() {
  if(video.available()){
    video.read();

    scale(-1.0,1.0);//鏡像反転
    if(videoImage){//カメラ映像表示の場合
      image(video, -w, 0);//カメラ映像を表示する
    }else{               //カメラ映像非表示の場合
      background(0);     //背景（黒）にする
    }
    
    detection=false;
    
    for(int i=0;i<w*h;i++){
      float difRed=abs(red(targetColor)-red(video.pixels[i]));
      float difGreen=abs(green(targetColor)-green(video.pixels[i]));
      float difBlue=abs(blue(targetColor)-blue(video.pixels[i]));

      if(difRed<tolerance && difGreen<tolerance && difBlue<tolerance){
        detection=true;

        sumX+=(i%w);//X座標値を加算する
        sumY+=(i/w);//Y座標値を加算する
        pixelNum++;//近似色ピクセルの個数を加算する
        
      }
    }
    
    if(detection){//物体検知有りの場合
      x=sumX/pixelNum;//X座標平均値を求める
      y=sumY/pixelNum;//Y座標平均値を求める
      
      //初期化しておく
      sumX=0;
      sumY=0;
      pixelNum=0;
      
      tolerance--;//許容値を-1ずつ下げる
      if(tolerance<2){//許容値が2より小さくなったら
        tolerance=2;     //許容値を2に戻す
      }
    }else{//物体検知無しの場合
      tolerance++;//許容値を+1ずつ上げる
      if(tolerance>25){//許容値が25より大きくなったら
        tolerance=25;  //許容値を25に戻す
      }
    } 
  }
  scale(-1.0,1.0);//鏡像反転を戻しておく
  filterX+=(x-filterX)*0.3;//X座標変化量のフィルタ、「0.3」は係数
  filterY+=(y-filterY)*0.3;//Y座標変化量のフィルタ、「0.3」は係数

  fill(255,0,0);//塗り色（赤）
  ellipse(w-filterX,filterY,20,20);//フィルタ値を用いて円描画
  //ellipse(w-x,y,20,20);//フィルタ値を使わない場合

  fill(targetColor);
  rect(0,0,10,10);
  text(tolerance,20,10);
  String s;
  if(detection){
    s="detected";
  }else{
    s="none";
  }
  text(s,40,10);
}

void mousePressed(){
  targetColor=video.pixels[w-mouseX+mouseY*w];
}

void keyPressed(){
  if(key=='c'){
    video.settings();
  }
    
  if(key=='v'){//「v」キーを押して表示／非表示を切り替える
    if(videoImage){
      videoImage=false;
    }else{
      videoImage=true;
    }
  }

  /*許容値調整は自動なので以下は使わない
  if(key==CODED){
    if(keyCode==LEFT){
      tolerance-=1;
    }
    if(keyCode==RIGHT){
      tolerance+=1;
    }
  }
  */
}

＊プログラムを開始する前に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:青の４種類の8ビット（合計32ビット）の値が含まれています。32ビットの内訳（２進数の場合）は

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カメラを使って動体検知する。

工作機械について

「旋盤」では、取り付けた材料（金属や樹脂など）を回転させ、バイト（刃）で切削し、回転系の部品（車輪、プーリーなど）を制作することができます。旋盤加工できる部品の寸法は、旋盤の「心間（回転体材料の長さ）」と「心高（回転体材料の半径）」によって決まります。より大きな部品を制作する場合は、この二つの寸法が大きな機種を選ぶ必要があります。



「フライス盤」では、スライドテーブル上に取り付けた材料（金属や樹脂など）を移動させることで、直線や円形に溝加工したり、エッジを段状に加工したり、材料表面をフラットに切削したりすることができます。材料を固定するスライドテーブル（XY方向の移動量）や回転テーブルのサイズによって加工サイズが決まります。

「旋盤」と「フライス盤」を組み合わせれば、ほとんどの機械部品を制作することができると言われています。


小型工作機械メーカー／販売：
・ベルメックスインターナショナル
・寿貿易／メカニクス
・東洋アソシエイツ
・プロクソン





工具屋ドットコム楽天市場店
プロ工具にDIY　モンジュSHOP
ケンチクボーイ
卸問屋　都築屋本舗

次回（11/22）授業について

次回11/22（土）は、１５：００から授業を開始します（お間違えないように）。

・空間内における制作物の配置、身体との関わり、空間全体のイメージなど（前回のコラージュ）を引き続き制作してきてください。
・使用される部品や材料なども持参して下さい。授業内で、個人ごとに制作の指導をします。
・必要に応じて「旋盤」「フライス盤」「ボール盤」で、金属部品制作（回転部分や固定部分の部品など）の実習も行う予定です。

精密小型旋盤　Compact3

posted with amazlet at 09.03.31

東洋アソシエイツ
売り上げランキング: 95873

Amazon.co.jp で詳細を見る

Arduino デジタルカラーセンサ S9706

今回は秋月電子で購入したデジタルカラーセンサS9706の実験をします。S9706は、RGB３色の同時測光が可能であり、９×９素子（高感度）と３×３素子（低感度）の感度設定が２段階あり、感度設定用の端子（Range端子）をHIGHまたはLOWで切り替えて設定できます。検出結果は12ビットの値でシリアル出力されます。S9706は表面実装用の小さな部品（1.27mmピッチ）なので、DIP変換基板などにハンダ付けして使用したほうが実験しやすくなります。

S9706には、

・Range端子（感度設定）
・Gate端子（測光時間の設定）
・CK端子（クロックパルス）
・Dout端子（出力）
・Vdd端子（5V電源）
・Gnd端子（グランド）

の６端子あります。
それぞれを以下のように接続します。尚、測光時間を調節できるように可変抵抗器も接続することにします。



データシートの動作手順によれば、以下のように説明されています。
（１）Gate端子とCK端子をLowにします。
（２）Range端子で、所望の感度を選択します（今回は、可変抵抗器で調節可能にしておきます）。
（３）Gate端子をLow→Highにして光量の積算を開始します。
（４）所望の積算時間の後にGate端子をHigh→Lowにして光量の積算を終了します。
（５）測定データは、CK端子に36のCKパルスを入れることで、Dout端子から出力されます。

Dout端子からの12ビットのシリアル出力を読み込むためには、CK端子へ12回のパルスを３回送る必要があります。最初の12パルスによって赤、次の12パルスによって緑、そして最後の12パルスによって青が出力されます。この部分の手続きは、shiftIn()というファンクション（名前は任意）を用意することにします。付属のデータシートのタイミングチャートに従ってプログラムしていくことにします。
最終的に得られたRGB三色の値（12ビット:0~4095）をシリアル通信でProcessingへ送信し、Processingの画面上で色表示することにします。

「Arduinoのプログラム」：

　[プログラムを表示]

#define RANGE 8 // 8番ピンをRange端子に設定
#define GATE  9 // 9番ピンをGate端子に設定
#define CK   10 //10番ピンをCK端子に設定
#define DOUT 11 //11番ピンをDout端子に設定

int red,green,blue;//RGB三色の変数を用意

void setup(){
  //Range,Gate,CK端子をデジタル出力に設定
  pinMode(RANGE,OUTPUT);
  pinMode(GATE,OUTPUT);
  pinMode(CK,OUTPUT);
  //Dout端子をデジタル入力に設定
  pinMode(DOUT,INPUT);
  //シリアル通信設定
  Serial.begin(9600);
}

void loop(){
  //測光時間用の可変抵抗器の読み込み（アナログ入力:０番ピン）
  int val=analogRead(0);

  //Gate,CK端子をLowに設定
  digitalWrite(GATE,LOW);
  digitalWrite(CK,LOW);
  delayMicroseconds(2000);//2000マイクロ秒待機

  //感度設定（HIGH:高感度に設定）  
  digitalWrite(RANGE,HIGH);

  //測光開始（光量の積算を開始） 
  digitalWrite(GATE,HIGH);
  //測光時間（valを代入し可変的に設定）
  delay(val+1);
  
  //測光終了（光量の積算を終了） 
  digitalWrite(GATE,LOW);
  delayMicroseconds(4);//4マイクロ秒待機
  
  red=shiftIn();//赤の処理
  green=shiftIn();//緑の処理
  blue=shiftIn();//青の処理

  //Gate端子をHighに戻す  
  digitalWrite(GATE,HIGH);

  //シリアル通信でProcessingへ三色の値を文字列で送信  
  if(Serial.available()>0){
    Serial.print(red,DEC);
    Serial.print(",");
    Serial.print(green,DEC);
    Serial.print(",");
    Serial.println(blue,DEC);
    Serial.read();
  }
}

//12ビット分のパルス送信と読み込み処理
int shiftIn(){
  int result=0;//検出結果用の変数を用意（0：初期化）
  for(int i=0;i<12;i++){//12ビット分の繰り返し処理
    digitalWrite(CK,HIGH);//1ビット分のクロックパルス出力（HIGH）
    delayMicroseconds(1);//1マイクロ秒待機
    if(digitalRead(DOUT)==HIGH){//Dout端子からの出力がHighの場合
      result+=(1<<i);//12ビットのi桁目に1を代入（i桁分だけ左にシフト）
    }
    digitalWrite(CK,LOW);//1ビット分のクロックパルス出力（LOW）
    delayMicroseconds(1);//1マイクロ秒待機
  }
  delayMicroseconds(3);//3マイクロ秒待機
  return result;//結果を出力
}

アナログ入力に接続された可変抵抗器で、測光時間を1ミリ秒から1024ミリ秒まで可変的に設定可能になります。測光時間が短ければ全体的に暗い色として認識されるので適宜調節してください（白色LEDを取り付けて反射光を使って読み取らせることもできると思います）。
12ビットの値を読み込む処理をするint shiftIn(){...}では、一色につき12回CK端子へパルス（HIGH:1μsec+LOW:1μsec）を送ります。12回分のパルスをfor文で繰り返し処理させています。for(){...}の中では、digitalWrite(CK,HIGH)で1回HIGHを送ったあと1マイクロ秒待機すると、Dout端子から1ビット分の出力があるので、digitalRead(DOUT)でHIGHかLOWかを読み込みます。そしてdigitalWrite(CK,LOW)によって、CK端子をLOWに戻しておきます。
読み込み値を、
000000000000~111111111111（十進数の0~4095）
までの二進数で処理するため、digitalRead(DOUT)がHIGHの場合は12ビット中のその桁が1になります。S9706では、右の桁から出力されます。つまり、for(){...}では、最初に処理される桁は右側の一桁であり、最後に処理される桁は左側の一桁（12桁目）になります。



Processingの方では４つの矩形を用意し、RGBの三色それぞれの色面とRGBを合成した色面として表示します。Arduinoとのシリアル通信は文字列で行います（複数の文字列のシリアル通信は「Arduino-Processing　シリアル通信５」を参照してください）。Processing側でクリックしたらシリアル通信を開始することにします。


Processing上の画面：左から赤、緑、青、３色合成

「Processingのプログラム」：

　[プログラムを表示]

//シリアルライブラリを取り込む
import processing.serial.*;
//シリアル通信用変数portを用意
Serial port;

//読み込み値（三色）の変数を用意
int r,g,b;

void setup(){
  //画面サイズ設定
  size(400,200);
  //ポート設定
  port = new Serial(this,"/dev/tty.usbserial-A6006kvP",9600);
  //「10」（ラインフィード）までを読み込む設定にする
  port.bufferUntil(10);
  //外形線なし
  noStroke(); 
}

void draw(){
  //背景色（黒）
  background(0);
  
  fill(r,0,0);//値を塗色の赤に代入
  rect(0,0,100,100);//赤の矩形
  fill(0,g,0);//値を塗色の緑に代入
  rect(100,0,100,100);//緑の矩形
  fill(0,0,b);//値を塗色の青に代入
  rect(200,0,100,100);//青の矩形
  fill(r,g,b);//三つの値を塗色のRGBに代入
  rect(300,0,100,100);//RGB合成した矩形
}

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

  //文字列データが空ではないとき
  if(stringData!=null){
    //文字列データに含まれる改行記号を取り除く
    stringData=trim(stringData);

    //整数型の配列data[]を用意し、
    //コンマ記号をもとに文字列データを区切って
    //配列data[]に整数化して入れておく
    int data[]=int(split(stringData,','));

    //配列data[]内のデータが３つなら、
    if(data.length==3){
      //三つの値をそれぞれマッピングして代入
      r=int(map(data[0],0,4095,0,255));
      g=int(map(data[1],0,4095,0,255));
      b=int(map(data[2],0,4095,0,255));

      //合図用データ送信
      port.write(65);
    }
  }  
}

//マウスが押されたら通信開始
void mousePressed(){
  //開始用データ送信
  port.write(65);
}

Arduinoからは0~4095の範囲で値が送られてくるので、fill(r,g,b)の各値に代入するため、map()を使って0~255までの値（さらにint()で括って整数に変換）に変換しています。

CCD/CMOSイメージ・センサの基礎と応用―原理、構造、動作方式、諸特性からシステム概要まで (C&E基礎解説シリーズ)

posted with amazlet at 09.03.30

米本 和也
CQ出版
売り上げランキング: 21816

Amazon.co.jp で詳細を見る

「room01~03」について

「room01~03」概要：
既存のギャラリー空間に対して、各自の制作物（ツール／デバイス）を挿入することで、空間の機能や質あるいは空間に対する人間の知覚を変容させることを目標とします。
ギャラリーに訪れる人は、制作物（作品）に対する「鑑賞者」になるというよりも、制作物によって変容した空間の性質を体験する「体験者」になります。また、制作物を通して意味を生成したり理解されたりすることを目標とするのではなく、フィジカルに体験される物理的現象（あるいは肉体的な身体を通した感覚）を目標とします。つまり、解釈や理解によって空間の質を変容させるのではなく、実際的にあるいは物理的に空間が変容することに重点をおいてください。

「room01~03」までのステップ：
（１）ある現象を測定したり記録／伝達するような「ツール／デバイス」の実験的なプロトタイプ制作。
（２）「ツール／デバイス」を体験可能なかたちとする（「体験者」との関わりを配慮した形態）。
（３）「ツール／デバイス」と「体験者」を「空間」内に配置する（「体験者」に応じた設置方法や配置方法の工夫）。
（４）「体験者」の身体の変化と「ツール／デバイス」の変化が「空間」に与える影響力を強化する。

演習：
（１）デバイスのコラージュ
（２）デバイスと身体のコラージュ
（３）空間内に配置されるデバイスと身体のコラージュ
（４）変容する空間のコラージュ