Arduino-Processingシリアル通信

以下はProcessingプログラム上でマウスクリックしてArduinoボード上のLEDを点灯／消灯させるプログラムです。ProcessingとArduinoを連携させるにはシリアル通信という手段を用います。
まずProcessingのプログラムから行います。

import processing.serial.*;
Serial myPort;

void setup(){
  myPort=new Serial(this,Serial.list()[0],9600);
}

void draw(){
  //描画内容は特になし
}
void mousePressed(){
  myPort.write(1);
}

void mouseReleased(){
  myPort.write(0);
}

シリアル通信を行うためには、シリアル通信用のライブラリを導入する必要があります。
ProcessingのSketch>Import Library/Serial I/Oを選択すると、
import processing.serial.*;
がプログラムに書き足されます。
今回は画面上をクリックするだけで特に描画しないので、draw(){}内は空白です。
あとはmyPort（名前は任意）を設定し、setup(){}内にシリアルポート設定を上記のように書き足せばシリアル通信を行うことができます。
myPort.write()によって、()内の数値をArduinoに送信するプログラムを書き足します。
マウスを押した時に1を、マウスを放した時に0を送信することにし、Arduino側では1の値を受け取ったらLEDをオンにし、0を受け取ったらオフになるようにします。
マウスクリックする際には、Processingをランさせたときに表示される画面上をクリックしてください（100×100ピクセルのグレーのウィンドウが表示されます）。

以下はArduinoのプログラム：

void setup() {
  pinMode(13, OUTPUT);
  Serial.begin(9600);
}

void loop(){
  if(Serial.available()>0){
    if(Serial.read()==1){
      digitalWrite(13, HIGH);
    }else{
      digitalWrite(13, LOW);
    }
  }
}

Arduino側では、Serial.begin()によってシリアル通信開始を設定します。括弧内の9600は通信速度でありこのままの設定で構いませんが、Processing側と設定速度を同じにしておきます。
Serial.available()によって、Processing側から何個のデータが送られて来ているかをチェックします。Serial.available()>0というのは、受信データが０個より大きいとき、つまり１個データを受信したときに以下のプログラム（LED点灯／消灯）を実行するということになります。
受け取ったデータをSerial.read()で読取り、その内容が１であればdigitalWrite(13, HIGH)によってLEDを点灯させ、０であれば消灯させるという条件式になっています。
つまり、Processing側でマウスを押したとき（押し続けているとき）オンになり放したらオフになります。

この通信の場合は、Processing側からデータを送信し、Arduino側が受信する内容になります。
その逆でArduinoからデータを送信して、Processing側が受信してProcessingでプログラムした描画内容を操作するという場合のサンプルはこちらを参考にしてみてください（建築発明工作ゼミ2008：シリアル通信１）。

また、Xbee、Bluetoothなどを使えばワイヤレス送信させることも可能です。
・Xbeeのサンプル
・Bluetoothのサンプル
あるいは、インターネット越しに操作することも可能です。
・ネットワークのサンプル

Processingのプログラムをブログに掲載する方法

Processingのプログラムをブログに掲載するには、以下のページを参考にしてください。
http://ken-nou-kou.blogspot.com/2009/06/processing.html

Processing:基本プログラム

授業で行ったシンプルなボタン操作のプログラムです。



画面内の矩形をクリックすると背景が赤に変わります。

プログラム内容としては以下のようなことをしています。
・画面サイズ設定
・図形描画属性設定（色や外形線など）
・ボタンの矩形描画
・マウス座標取得（mouseX,mouseY）
・マウスの位置とボタンの矩形範囲の重なり判定
・マウスクリックによるコマンド
・マウスが押されたか押されていないかの状態をフラグを使って判別

boolean press=false;//ボタンを押したかどうかのフラグ用変数

void setup(){
  size(400,400);//画面サイズ設定
  fill(0);//ボタンの塗り面を黒に設定
  stroke(100);//ボタンの外形線の色設定（256段階あるうちの100のグレー）
  strokeWeight(3);//ボタンの外形線の太さ設定（3ピクセル）
}

void draw(){
  if(press==true){//ボタンが押されているとき
    background(255,0,0);//背景が赤になる
  }else{//ボタンが押されていないとき
    background(0);//背景が黒になる
  } 
  if(mouseX>200 && mouseX<300 && mouseY>200 && mouseY<250){//ボタンの矩形範囲にマウスがある時
    fill(100);//ボタン塗り色を100のグレーにする
  }else{
    fill(0);//ボタン塗り色を黒にする
  } 
  rect(200,200,100,50);//ボタンの表示（矩形）：rect(x座標,y座標,矩形幅,矩形高さ)
}

void mousePressed(){//マウスが押されたら発動する
  if(mouseX>200 && mouseX<300 && mouseY>200 && mouseY<250){//ボタンの矩形範囲にマウスがある時
    press=!press;//フラグ反転（ONの時OFF、OFFの時ONにする）
  }
}

また以下のようなシンプルなゲームのプログラム（壁打ちテニスのようなゲーム）

ゲームするには、画面内をクリックしてください。
プログラム内容としては：
・画面サイズ設定
・図形描画属性設定
・ボールの描画
・パドル（ラケット）の描画
・ボールの動く方向と１フレームに進む量
・マウスに合わせたパドルの動き
・壁３面にボール当たったときの判別と跳ね返り
・パドルにボールが当たったときの判別と跳ね返り
・パドルで何回打ち返したかのカウント
・パドルで打ち返せなかったときの判別
・ボール残数のカウント
・スコアとボール残数の表示
・ゲームオーバー表示
・ゲーム再開のためのクリック処理
簡単なゲームですが、少なくても以上のような内容をすべてプログラムしておく必要があります。
ボールやパドルの基準位置はrectMode(CENTER)を用いて図形中心に設定しています。
ボールが１辺10ピクセルでありボール座標が図形中心なので、例えば画面上端で跳ね返るときは、ボールX座標が5（１辺10ピクセルの半分）のときの跳ね返ることになります。

PFont font;//文字表示のフォントのオブジェクトを用意
int ballX;//ボールのX座標変数
int ballY;//ボールのY座標変数
int directionX;//ボールの動くX座標上の方向の変数（右向き：+1、左向き：-1）
int directionY;//ボールの動くY座標上の方向の変数（下向き：+1、上向き：-1）
int paddleX;//パドル（ラケット）のX座標の変数
int pts;//得点の変数
int balls;//ボール残り数の変数
int speed;//ボールの1フレームあたりの進む量

void setup(){
  size(400,400);//画面サイズ設定
  noStroke();//図形の外形線無し
  ballX=200;//最初のボールが登場するときのX座標値
  ballY=0;//最初のボールが登場するときのY座標値
  directionX=1;//X座標上のボールの向き（正の向き：右向き）のフラグ
  directionY=1;//Y座標上のボールの向き（正の向き：下向き）のフラグ
  rectMode(CENTER);//矩形描写の基準点を図形中心に設定
  font=createFont("Arial",16);//フォントの準備
  textFont(font,16);//フォント設定
  pts=0;//ポイント０（初期設定）
  balls=2;//残りボール数２（初期設定）
  speed=2;//ボールの1フレームあたりの進む量を２に設定
}
void draw(){
  background(0);//背景色（黒）
  if(ballX<5){//ボールが画面左にぶつかったとき
    ballX=5;//ボールの位置を5に設定
    directionX*=-1;//ボールの動く向きを反転
  }
  if(ballX>395){//ボールが画面右にぶつかったとき
    ballX=395;//ボールの位置を395に設定
    directionX*=-1;//ボールの動く向きを反転
  }
  if(ballY<5){//ボールが画面上にぶつかったとき
    ballY=5;
    directionY*=-1;
  }
  if(ballY>395){//ボールが画面下を越えたとき
    if(balls<1){//ボールが残り数１より小さい（ボール数：０）とき
      text("GAME OVER",150,200);//ゲームオーバー表示
      balls=0;
      speed=0;//ボールの1フレームに動く量を0にする（ボール停止）
      ballY=410;//ボールを画面外に移動させておく
    }else{//残りボールがあるとき
      ballY=5;//ボールを画面上部に移動させる
      balls--;//残りボール数を減らす
    }
  }
  if(ballX>mouseX-25 && ballX=370 && ballY<=370+speed){//ボールがラケットの位置にあるとき
    ballY=370;
    directionY*=-1;//ボールの動きの反転（ボールの打ち返し）
    pts++;//ポイント加算
  }
  ballX+=speed*directionX;//ボールのX軸移動
  ballY+=speed*directionY;//ボールのY軸移動
  rect(ballX,ballY,10,10);//ボールの描画
  rect(mouseX,380,50,10);//パドル（ラケット）の描画
  text("SCORE: "+nf(pts,4),20,20);//ポイント表示
  text("BALL LEFT: "+balls,280,20);//ボール残り数表示
}

void mousePressed(){//マウスを押した時の処理
  if(balls==0){//ボールが残り数0の時（ゲームオーバー時）
    balls=2;//ボールが残り数を2に戻す
    ballY=5;//ボールY座標値を画面上部に戻す
    speed=2;//ボールの1フレームに動く量を2に戻す
  }
}

各自既存のゲームなどを参考にプログラムを組んでみてください。ゲームすべてをプログラムするのは大変かもしれないので、部分的な動きや表現でも構わないので実験的にプログラムしてみてください。

Processingについて

Processingは、静止画、動画、インタラクティブな作品制作を手助けするプログラミング環境です。
このゼミでも今後利用作品制作に応じて利用して行きます。

Processingのサイト上のreferenceに使用する言語がのっています（各コマンドの辞書のようなもの）。それぞれの意味や使い方のサンプルが掲載されています。また、learningには、具体例を用いたプログラムのサンプルものっているので参考にしてください。
またlibraries（付加機能のようなもの）を用いれば、音声／ビデオ／ネットワークなど多岐にわたってのプログラミングが可能になります。必要に応じて今後の授業で扱って行く予定です。

Processingの学習方法については、「建築発明工作ゼミ2008」や「建築農業工作ゼミ2009-2010」でも扱っていますので参考にしてください。


静止画の図形描画について

画面サイズの設定：
size(600,400);//幅600ピクセル、高さ400ピクセルの画面に設定

背景色設定：
background(0,255,0); //()内にはRGB赤緑青の値（0〜255）を入れる。値は0=0%、255=100%。

図形の線／面の色や太さなどの設定：
fill(255,0,0);      //図形の塗り面を赤に設定。()内にはRGB赤緑青の値（0〜255）を入れる
noFill();           //図形の塗り面なし
stroke(255,255,0);  //外形線の色設定
noStroke();         //外形線なし
storokeWeight(3);   //外形線の太さ３ピクセルに設定

図形描画：
rect(100,200,50,50);     //矩形（長方形）描画、rect(X座標,Y座標,幅,高さ)
ellipse(100,200,50,50);  //楕円（円）描画、ellipse(X座標,Y座標,幅,高さ)
point(100,200);          //点描画、point(X座標,Y座標)
line(100,200,100,300);   //線描画、line(X1座標,Y1座標,X2座標,Y2座標)