ネットワーク（OpenSound Control）

同一のPC内でのネットワーク

今回は、processingを使ったネットワークについて実習を行いながらドローイングチャットを制作します。
processingのネットワーク機能は他の言語に比べるとかなり簡単ですが、それでも少し複雑なので、順を追って書いていきます。
なお、ネットワークの接続方法はいくつかありますが、ここではoscP5OpenSound Control for Processingというライブラリを使用します。上記のサイトでライブラリをダウンロード、インストールしてください。
OpenSound Controlは様々なプラットフォーム間とのデータ通信を可能にする非常に便利な規格です。Processing, Flash, Max/MSPなどの間での通信が代表的です。

まず、ライブラリをインポートします。

//open sound controlのライブラリを追加する（必須）
import oscP5.*;
import netP5.*;

次に変数を宣言します。oscP5は受信したデータを格納するための変数です。

OscP5 oscP5;    //受信用の変数
NetAddress myRemoteLocation;    //送信用のアドレスを保持する変数

int x, y;    //相手側のx, y座標を格納するための変数

次に初期化です。毎回使うsize()やbackgroud()はいいとして、ポイントは受信用の変数と送信用のアドレスを設定するということです。
ここで、ネットワークを使うときの大前提になる知識として、IPアドレスとポート番号があります。
IPアドレスは、それぞれのパソコンに必ず１つだけ割り当てられているアドレスで、日常生活で言えば住所に当たります。
更に、ポート番号はマンションに例えると部屋番号です。つまり送られたデータは必ず特定の住所の特定の部屋に届けられなくてはいけないということです。

まずは、受信用のポートを10000にしておきましょう。
さらに、最初の段階はテストなので相手方のIPアドレスを127.0.0.1（プログラムが走っているパソコン自身のアドレス）、ポート番号を12000にします。

void setup() {
  size(400,400);
  background(0);
  noStroke();
  
  //受信用の変数。右の数字はポート番号。送信側のポート番号とあわせる。
  oscP5 = new OscP5(this,10000);

  //送信用オブジェクト。左側の数字が相手のIPアドレス、右側が相手のポート番号。
  myRemoteLocation = new NetAddress("127.0.0.1", 12000);

  //データを送る先の関数を登録する。ここでは、getDataは相手先の関数。
  //「/pattern」は送信側と受信側で同じである必要がある暗号のようなもの
  oscP5.plug(this,"getData","/pattern");
}

次に、相手側からのメッセージを受け取る関数を書きます。厳密に言うと、以下のコードはメソッドというのですが、機能は関数と同じなので、ここでは関数と呼びます。
このコードではint型の２つの変数を受け取ってそれぞれx, yという変数に値を入れています。

//相手側からのメッセージを受け取る関数。fromAとfromBをそれぞれx, yに代入
public void getData(int fromA, int fromB) {
  x = fromA; 
  y = fromB; 
  println("I got: "+fromA+", "+fromB);  
}

次にdraw()関数の部分です。ここではデータを送る作業をしています。マウスを押すとマウスのx, y座標が受信側のプログラムに送られます。そして、最後のellipse()では、上記のgetData()で受け取った値がx, y座標に反映されます。

void draw() {
  if(mousePressed==true) {
    //アドレスパターン/testとともにoscメッセージを生成
    OscMessage myMessage = new OscMessage("/pattern");

    myMessage.add(mouseX); //マウスのx座標をoscメッセージとして追加
    myMessage.add(mouseY); //マウスのy座標をoscメッセージとして追加

    //メッセージを受信側に送る
    oscP5.send(myMessage, myRemoteLocation); 
  }
  //円を描く
  fill(255);
  ellipse(x, y, 30, 30);
}

最後に、何らかのキーを押したら画面がリセットされるコードを書きましょう。

//キーを押したら画面は全て黒になる
void keyPressed(){
  background(0);
}

完全なコードは以下の通りです。

//This code has been arranged by Yasushi Noguchi. Last updated on July 1, 2009.
//oscP5plug by andreas schlegel

//open sound controlのライブラリを追加する（必須）
import oscP5.*;
import netP5.*;

OscP5 oscP5;    //受信用の変数
NetAddress myRemoteLocation;    //送信用のアドレスを保持する変数

int x, y;    //相手側のx, y座標を格納するための変数

void setup() {
  size(400,400);
  background(0);
  noStroke();
  
  //受信用の変数。右の数字はポート番号。送信側のポート番号とあわせる。
  oscP5 = new OscP5(this,10000);

  //送信用オブジェクト。左側の数字が相手のIPアドレス、右側が相手のポート番号。
  myRemoteLocation = new NetAddress("127.0.0.1", 12000);

  oscP5.plug(this,"getData","/pattern");
}

//相手側からのメッセージを受け取るコード。fromAとfromBをそれぞれx, yに代入
public void getData(int fromA, int fromB) {
  x = fromA; 
  y = fromB;
  println("I got: "+fromA+", "+fromB);  
}

void draw() {
  if(mousePressed==true) {
    //アドレスパターン/patternとともにoscメッセージを生成
    OscMessage myMessage = new OscMessage("/pattern");

    myMessage.add(mouseX); //oscメッセージを追加
    myMessage.add(mouseY); //oscメッセージを追加

    //メッセージを受信側に送る
    oscP5.send(myMessage, myRemoteLocation); 
  }
  //円を描く
  fill(255);
  ellipse(x, y, 30, 30);
}

//キーを押したら画面は全て黒になる
void keyPressed(){
  background(0);
}

次に、ドローイングチャットですから、プログラムがふたつある必要があります。上記のコードと殆ど同じなのですが、受信用のポート番号が違います。自分で考えてみましょう。
完成したら二つのプログラムを起動し、マウスクリック／ドラッグしてましょう。相手側のプログラムに円が現れれば成功です。

解答

setup()関数の中のコードでポート番号を入れ替える。

//受信用の変数。右の数字はポート番号。送信側のポート番号とあわせる。
  oscP5 = new OscP5(this,12000);

  //送信用オブジェクト。左側の数字が相手のIPアドレス、右側が相手のポート番号。
  myRemoteLocation = new NetAddress("127.0.0.1", 10000);

PC間でのネットワーク

ここまで行ったらパソコン同士で通信することも可能になります。まずは、アップルメニュー＞ネットワーク環境＞ネットワーク環境設定を選びます。

次に下図の赤丸の位置に記載されているIPアドレスを確認します。これがあなたのパソコンのアドレスです。

２台のパソコンでデータの受け渡しをするので、あなたのアドレスを相手に教え、相手のパソコンのアドレスを教えてもらってください。

そして、先ほどのsetup()関数の中に書かれている、
myRemoteLocation = new NetAddress(“127.0.0.1”, 10000);
の127.0.0.1を相手のアドレスに書き換えてください。
そして、お互いのプログラムを立ち上げて、それぞれ自分のプログラムのウインドウをドラッグしてみてください。互いのマウスの軌跡が反映されます。