ProcessingとArduinoをくっつける

【本日のお便りコーナー】

twitter4Jかー。この前購入してたarduino使うのかと思ってた∩（・ω・）∩2012年2月16日 9:7 via HootSuiteくろねこ
laprasDrum

—— というわけで、今日は Processing と Arduino を合体させてこんなの（↓）を作ってみようと思います。わー（歓声） ぱちぱち（拍手） ……あ、ちなみにこれの正体は最後に明らかになりますよ。

---

—— とは言ったものの、Processing と Arduino を連繋させる方法が見当もつきません。どこかにいいサンプルはないかと探していたら、こちらの記事を見つけたので参考にする事にしました。

【配線】

まずは Arduino の配線です。13 番ピンに LED を挿すらしいです（※ ピンぼけ容赦）。

LEDのアノードを13番ピンに、カソードをGNDに接続

【スケッチ（クリックで拡大）】

左側が Arduino スケッチ、右側が Processing スケッチです。サンプルとほとんど一緒。

今回は、配線 → Arduinoスケッチのアップロード → Processing スケッチの実行の順に行いました。あまり厳密にやらなくてもよさそうですが。

注意点としては、Processing 側の以下の箇所。

myPort = new Serial(this, Serial.list()[1], 9600);

コンストラクタの第2引数には Arduino が接続されているポートを指定してやる必要があります。

ここで使用しているSerial クラスの list(); メソッドは、使用可能なポート名の配列を返すメソッドです。その中から適切なポートを選んでやればよいみたいですね（僕の環境では [1] ）。

もしも何番のポートを選べばよいか判らない場合は、一度 Serial.list(); を実行して有効なポート名を列挙し、Arduino が接続されているポートと一致するインデックスを探すのがよいと思います。

【実行結果】

マウスボタンを押下すると LED が点灯し、離すと消灯します。

---

次に、Arduino からデータを送ってみる事にします。

……で、そのサンプルがこちらなのですが、残念ながら僕は可変抵抗器を持っていません。しかも、近所に電子部品を売っているお店がないので、とりあえず CdS セルで代用してみようと思います。

まずは CdS セルのおさらいも兼ねて、Arduino だけをいじってみる事にします。

【配線】

CdS セル と LED を使ってこんな感じの配線をします。

実写だとこんな感じ。

画像では見づらいですが、CdS セルをアナログ入力用の 0 番ピンに、LED を出力の 9 番ピンにそれぞれ繋いでいます。

【Arduino スケッチ】

次に、以下のようなコードを書いて、Arduino に送ります。

#define LED 9
int val = 0;

void setup() {
  pinMode(LED, OUTPUT);
}

void loop() {
  val = analogRead(0);
  
  analogWrite(LED, val/4);
  delay(10);
}

上記のソースの 9 行目にある

val = analogRead(0);

は、アナログ入力ピンの電圧を調べる関数です。Arduino は AD コンバータによって、0 ～ 5 [V] の入力電圧を 0 ～ 1023 の数値に変換しているため、変数 val は 0 ～ 1023 の範囲をとる事になります。

【実行結果】

これで、明るさに応じて LED の光の強さが変わるものができました。

このサンプルで得た電圧のデータを Processing に送ってやれば、今までにできなかった事ができるようになるのではないでしょうか。

---

やってみましょう。


【配線】

とりあえず、LED はもう要らない子なのでブレッドボードから外し、以下のような配線に戻します。

【Arduino スケッチ】

int val = 0;

void setup() {
  Serial.begin(9600);
}

void loop() {
  val = analogRead(0);
  
  // valを0～255の範囲に正規化してP5に送る
  Serial.write(map(val, 0, 1023, 0, 255));  
  delay(100);
}

【Processing スケッチ】

import processing.serial.*;
Serial myPort;

int val;
 
void setup()
{
  size(400, 300);
  
  String port = Serial.list()[1];
  myPort = new Serial(this, port, 9600);
}
 
void draw()
{
  // 電圧の強さに応じて背景色が変わるよ
  background(val);
}
 
void serialEvent(Serial p){
  // Arduinoからデータを読み取り
  val = myPort.read();
}

【実行結果】

CdS セルに充分な光が当たっているときは下図左、センサを手で完全に覆い隠すと下図右のようになりました。

基本的に、一度に Arduino とやり取りできるデータ量が 8 bits なので、簡単のために val の範囲を 0 ～ 255 に正規化しています（0 ～ 1023 のデータも、一応がんばれば送る事はできますが）。

---

【おまけ】

最後に、電圧の変化を無駄にビジュアル化してみます。

Arduino のスケッチはそのままで、Processing の方を以下のように書き換えるだけです。

【Processing スケッチ】

import processing.serial.*;
Serial myPort;

PFont font;

int   index;
int[] data;

int   val;
long  time;

void setup()
{
  size(640, 480, P3D);
  
  font = createFont("Meiryo", 20);
  
  index = 0;
  data  = new int[width];
  for(int i = 0; i < data.length; ++i) data[i] = -1;
  
  String port = Serial.list()[1];
  myPort = new Serial(this, port, 9600);
}

void draw()
{
  background(0);
  camera(0, -0xFF,   width, 
         0, -0xFF/2, 0, 
         0,  1,      0);
         

  float angle = radians(time) * 0.1f;
  rotateY(angle);
  
  pushMatrix();
  translate(-width/2, -0xFF, 0);
  
  int prevY = 0xFF;
  for(int x = 1; x < width; ++x) {
    int v = data[(x + index) % data.length];  // 電圧: 0 ～ 255
    int y = 0xFF - v;  // y座標値

    stroke(255, v);
    if(prevY < 0xFF) line(x - 1, prevY, x, y);
    prevY = y;
  }
  popMatrix();
  
  // じめん
  stroke(0, 255, 0, 100);
  for(int i = -width/2; i <= width / 2; i += 40) {
    line(-width/2, 0, i, width/2, 0, i);
    line(i, 0, -width/2, i, 0, width/2);
  } 
  
  pushMatrix();
  camera();
  hint(DISABLE_DEPTH_TEST);
  textMode(SCREEN);
  // 1単位あたりの分解能: 5000[mV] / 255 ≒ 19.6[mV]
  text("Voltage: " + (val * 19.6) + " [mV]", 10, 10);
  
  hint(ENABLE_DEPTH_TEST);
  popMatrix();
  
  ++time;
}
 
void serialEvent(Serial p){
  // Arduinoからデータを読み取り
  val = myPort.read();
  
  index = (index + 1) % data.length;
  data[index] = val;
}