ProcessingとTwitterをくっつける

くろねこさんが、昨日のサンプルをさっそく fork して下さいました（→くろねこさんの記事）。

パーティクルの動きの改良に加え、ソースコードもリファクタリングされて品質が上がっています。さすが！

---

さてさて、今日は Processing を Twitter に組み合わせてへんなのを作りますよー∩( ・ω・)∩

なんか、テキスト領域に Twitter のユーザ名を入れると、フォローしているおともだちが3次元空間を漂うというなんとも愉快なスケッチです。

実は、ほとんど昨日のソースコードを流用しただけの手抜き更新というのは内緒だよ。

---

【Processing と GUI】

本日一発目のテーマは、Processing スケッチへの GUI コンポーネントの組み込みです。 とりあえず完成すると以下のようになります（少し見づらいですが、動画の下の方にある藍色の矩形がテキストフィールドです）。

Processing 公式サイトにはいくつかのサードパーティ製ライブラリが紹介されています。僕はその中から、ControlP5 というライブラリを選びました（現時点の最新バージョンは ControlP5 0.5.4）。

OpenGL レンダラの環境でテキストフィールドを使用するためのミニマルなサンプルコードは以下の通り。なお、外部ライブラリの設置方法に関しては、うえちょこさんの記事に詳しく書かれています。

【ソースコード（展開してご覧ください）】

+ expand sourceview plainprint?

1. import processing.opengl.*;  
2. import controlP5.*;  
3.   
4. ControlP5 controlP5;  
5. Textfield tfUserName;  // テキストフィールド  
6.   
7.   
8. void setup() {  
9.   size(400, 300, OPENGL);  
10.   controlP5 = new ControlP5(this);  
11.     
12.   tfUserName = controlP5.addTextfield("userName", 10, 10, 200, 20);  
13.   tfUserName.setFocus(true);  
14. }  
15.   
16.   
17. void draw() {  
18.   hint(ENABLE_DEPTH_TEST);  
19.   background(0);  
20.   
21.   /* ============================== */  
22.   /* ここに描画用のコードを書きます */  
23.   /* ============================== */  
24.     
25.   // GUIコンポーネント描画のためにカメラ位置をリセット  
26.   camera();  
27.   hint(DISABLE_DEPTH_TEST);  
28. }  
29.   
30.   
31. // テキストが入力された際にコールバックされるメソッド  
32. public void userName(String txt) {  
33.   if(txt.trim().length() < 1) return;  
34.   
35.   println("「" + txt + "」が入力されました");  
36. }  

import processing.opengl.*;
import controlP5.*;

ControlP5 controlP5;
Textfield tfUserName;  // テキストフィールド


void setup() {
  size(400, 300, OPENGL);
  controlP5 = new ControlP5(this);
  
  tfUserName = controlP5.addTextfield("userName", 10, 10, 200, 20);
  tfUserName.setFocus(true);
}


void draw() {
  hint(ENABLE_DEPTH_TEST);
  background(0);

  /* ============================== */
  /* ここに描画用のコードを書きます */
  /* ============================== */
  
  // GUIコンポーネント描画のためにカメラ位置をリセット
  camera();
  hint(DISABLE_DEPTH_TEST);
}


// テキストが入力された際にコールバックされるメソッド
public void userName(String txt) {
  if(txt.trim().length() < 1) return;

  println("「" + txt + "」が入力されました");
}

デモ動画のソースコードは……適当に作ったため、あまり見せられる代物ではありませんが、たぶん昔の僕だったら「汚くてもいいからソースコードを知りたい」と思ったでしょうから、こっそり晒しておきますね。

【おまけソースコード（展開してご覧ください）】

+ expand sourceview plainprint?

1. import processing.opengl.*;  
2. import javax.media.opengl.*;    
3. import controlP5.*;  
4.   
5. final int FIELD_SIZE = 1000;  
6. final int FIELD_STEP =  100;  
7.   
8. ControlP5 controlP5;  
9. Textfield tfUserName;       // テキストフィールド  
10.   
11. PFont  font;    
12. long   time;    
13.   
14. List<Message> messageList;  // メッセージリスト  
15.   
16. void setup() {  
17.   size(640, 480, OPENGL);  
18.     
19.   messageList = new LinkedList<Message>();  
20.     
21.   controlP5 = new ControlP5(this);  
22.     
23.   tfUserName = controlP5.addTextfield("textfield", 10, 10, 200, 20);  
24.   tfUserName.setFocus(true);  
25.     
26.   font = createFont("Meiryo", 48);  
27. }  
28.   
29.   
30. void draw() {  
31.   background(0);  
32.   
33.   PGraphicsOpenGL pgl = (PGraphicsOpenGL)g;    
34.   
35.   // カメラの設定  
36.   float angle = 0.5f * radians(time);        
37.   camera(300*cos(angle), -300*sin(angle), 300*sin(angle),     
38.          0,               0,              0,     
39.          0,               1,              0);  
40.     
41.   // 地面の描画  
42.   pushStyle();  
43.   stroke(255, 0, 0);    
44.   for(int i = -FIELD_SIZE; i <= FIELD_SIZE; i += FIELD_STEP) {   
45.     line(          i, 0, -FIELD_SIZE,          i, 0, FIELD_SIZE);     
46.     line(-FIELD_SIZE, 0,           i, FIELD_SIZE, 0,          i);  
47.   }  
48.   popStyle();  
49.     
50.   // α合成を有効にする  
51.   GL gl = pgl.beginGL();  
52.   gl.glEnable(GL.GL_BLEND);  
53.   gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);    
54.   gl.glDisable(GL.GL_DEPTH_TEST);  
55.   pgl.endGL();  
56.     
57.   // メッセージの描画  
58.   for(Iterator iter = messageList.iterator(); iter.hasNext();) {  
59.     Message msg = (Message)iter.next();  
60.     // 更新して死んでたらリストから削除  
61.     if(!msg.update()) iter.remove();   
62.   }  
63.   time++;  
64.     
65.   // GUI コンポーネント描画のための設定  
66.   camera();  
67.   gl = pgl.beginGL();  
68.   gl.glDisable(GL.GL_DEPTH_TEST);  // 深度テストを無効化  
69.   gl.glEnable(GL.GL_BLEND);  
70.   gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);    
71.   pgl.endGL();  
72. }  
73.   
74.   
75. // テキストが入力された際にコールバックされるメソッド  
76. public synchronized void textfield(String txt) {  
77.   // 適当な初期位置を指定して、リストに新たなメッセージを追加する  
78.   messageList.add(new Message(txt,  
79.       new PVector(random(-100, 100), 0, random(-100, 100))));  
80. }  
81.   
82.   
83. // メッセージクラス  
84. class Message {  
85.   private final int   BASECOLOR = 0xFFFFFFFF;  // 基本色  
86.   private final int   TTL       = 200;         // 生存時間  
87.   private final float dY        = -0.5;        // y座標の増分  
88.   
89.   private String  message;       // メッセージ  
90.   private PVector pos;           // 位置  
91.   private int     time;          // 経過時間    
92.     
93.   // コンストラクタ  
94.   // -----------------------------  
95.   // メッセージと初期位置を指定する  
96.   Message(String msg, PVector pos) {  
97.     this.message = msg;  
98.     this.pos     = pos;  
99.   }  
100.     
101.   // update()  
102.   // -----------------------------  
103.   // 状態を更新し、生死状態を返す  
104.   // true:  有効（生きている）  
105.   // false: 無効（死んでいる）  
106.   boolean update() {  
107.     if(++time > TTL) return false;  
108.     pos.y += dY;  
109.       
110.     // ビルボーディング   
111.     pushMatrix();  
112.     translate(pos.x, pos.y, pos.z);  // 物体を並進（ローカル座標系）    
113.         
114.     // モデル-ビュー行列を取得    
115.     PMatrix3D builboardMat = (PMatrix3D)g.getMatrix();    
116.     // 回転成分を単位行列に    
117.     builboardMat.m00 = builboardMat.m11 = builboardMat.m22 = 1;    
118.     builboardMat.m01 = builboardMat.m02 =     
119.     builboardMat.m10 = builboardMat.m12 =     
120.     builboardMat.m20 = builboardMat.m21 = 0;    
121.       
122.     resetMatrix();    
123.     applyMatrix(builboardMat);    
124.   
125.     // アルファ値を計算  
126.     pushStyle();  
127.     int a = 255 - 255 * time / TTL;  
128.     fill(a << 24 | BASECOLOR & 0xFFFFFF);  
129.       
130.     // フォントを設定  
131.     textFont(font, 24);    
132.     textAlign(CENTER);  
133.       
134.     // テキストを描画  
135.     text(message, 0, 0);  
136.     popStyle();      
137.          
138.     popMatrix();  
139.     return true;  
140.   }  
141. }  

import processing.opengl.*;
import javax.media.opengl.*;  
import controlP5.*;

final int FIELD_SIZE = 1000;
final int FIELD_STEP =  100;

ControlP5 controlP5;
Textfield tfUserName;       // テキストフィールド

PFont  font;  
long   time;  

List<Message> messageList;  // メッセージリスト

void setup() {
  size(640, 480, OPENGL);
  
  messageList = new LinkedList<Message>();
  
  controlP5 = new ControlP5(this);
  
  tfUserName = controlP5.addTextfield("textfield", 10, 10, 200, 20);
  tfUserName.setFocus(true);
  
  font = createFont("Meiryo", 48);
}


void draw() {
  background(0);

  PGraphicsOpenGL pgl = (PGraphicsOpenGL)g;  

  // カメラの設定
  float angle = 0.5f * radians(time);      
  camera(300*cos(angle), -300*sin(angle), 300*sin(angle),   
         0,               0,              0,   
         0,               1,              0);
  
  // 地面の描画
  pushStyle();
  stroke(255, 0, 0);  
  for(int i = -FIELD_SIZE; i <= FIELD_SIZE; i += FIELD_STEP) { 
    line(          i, 0, -FIELD_SIZE,          i, 0, FIELD_SIZE);   
    line(-FIELD_SIZE, 0,           i, FIELD_SIZE, 0,          i);
  }
  popStyle();
  
  // α合成を有効にする
  GL gl = pgl.beginGL();
  gl.glEnable(GL.GL_BLEND);
  gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);  
  gl.glDisable(GL.GL_DEPTH_TEST);
  pgl.endGL();
  
  // メッセージの描画
  for(Iterator iter = messageList.iterator(); iter.hasNext();) {
    Message msg = (Message)iter.next();
    // 更新して死んでたらリストから削除
    if(!msg.update()) iter.remove(); 
  }
  time++;
  
  // GUI コンポーネント描画のための設定
  camera();
  gl = pgl.beginGL();
  gl.glDisable(GL.GL_DEPTH_TEST);  // 深度テストを無効化
  gl.glEnable(GL.GL_BLEND);
  gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);  
  pgl.endGL();
}


// テキストが入力された際にコールバックされるメソッド
public synchronized void textfield(String txt) {
  // 適当な初期位置を指定して、リストに新たなメッセージを追加する
  messageList.add(new Message(txt,
      new PVector(random(-100, 100), 0, random(-100, 100))));
}


// メッセージクラス
class Message {
  private final int   BASECOLOR = 0xFFFFFFFF;  // 基本色
  private final int   TTL       = 200;         // 生存時間
  private final float dY        = -0.5;        // y座標の増分

  private String  message;       // メッセージ
  private PVector pos;           // 位置
  private int     time;          // 経過時間  
  
  // コンストラクタ
  // -----------------------------
  // メッセージと初期位置を指定する
  Message(String msg, PVector pos) {
    this.message = msg;
    this.pos     = pos;
  }
  
  // update()
  // -----------------------------
  // 状態を更新し、生死状態を返す
  // true:  有効（生きている）
  // false: 無効（死んでいる）
  boolean update() {
    if(++time > TTL) return false;
    pos.y += dY;
    
    // ビルボーディング 
    pushMatrix();
    translate(pos.x, pos.y, pos.z);  // 物体を並進（ローカル座標系）  
      
    // モデル-ビュー行列を取得  
    PMatrix3D builboardMat = (PMatrix3D)g.getMatrix();  
    // 回転成分を単位行列に  
    builboardMat.m00 = builboardMat.m11 = builboardMat.m22 = 1;  
    builboardMat.m01 = builboardMat.m02 =   
    builboardMat.m10 = builboardMat.m12 =   
    builboardMat.m20 = builboardMat.m21 = 0;  
    
    resetMatrix();  
    applyMatrix(builboardMat);  

    // アルファ値を計算
    pushStyle();
    int a = 255 - 255 * time / TTL;
    fill(a << 24 | BASECOLOR & 0xFFFFFF);
    
    // フォントを設定
    textFont(font, 24);  
    textAlign(CENTER);
    
    // テキストを描画
    text(message, 0, 0);
    popStyle();    
       
    popMatrix();
    return true;
  }
}

---

【Processing と Twitter】

GUI は一旦おいといて(つ´∀｀)つ

今度は Twitter との連繋を考えてみます。ここでのゴールは、ひとまず Twitter でフォローしている方々のアイコンを 3次元空間中に散りばめる事です。

Twitter API を直叩きするのも面倒なので、Twitter4J という便利なライブラリをちょこっと使います。ライブラリは公式サイト あるいは GitHub から入手できます。今回は最新安定版である twitter4j-2.2.5.zip を選択しました。

今日はもう疲れ始めたので、OAuth 認証の要らないフォロー/フォロワー一覧を取得するところまでやろうかと思います。

JavaDoc などを参照しつつ、フレンド（自分がフォローしているアカウント） を調べるプログラムを Processing で書いてみました。

【ソースコード（展開してご覧ください）】

+ expand sourceview plainprint?

1. import twitter4j.*;  
2.   
3. final String USER_NAME = "tercel_s";  
4.   
5. Twitter twitter;  
6.   
7. void setup() {  
8.   twitter = new TwitterFactory().getInstance();  
9.     
10.   try {  
11.       
12.     // 指定したユーザがフォローしているアカウント一覧を取得  
13.     IDs friends = twitter.getFriendsIDs(USER_NAME, -1);  
14.     long[] friendsIDs = friends.getIDs();  
15.       
16.     // Twitter ID からユーザ情報を逐次取得して表示  
17.     for(long id : friendsIDs) {  
18.       User user = twitter.showUser(id);  
19.       println(user.getName() + " (" + user.getScreenName() + ")");  
20.     }  
21.       
22.   } catch (TwitterException ex) {  
23.     if(ex.isCausedByNetworkIssue()) {  
24.       // 何らかの事情でネットワークに接続できませんでした  
25.     } else {  
26.       int statusCode = ex.getStatusCode();  
27.       switch(statusCode) {  
28.         case 400:  // Bad Request  
29.           // リクエストに不正があるかレートリミットに達しました  
30.           break;  
31.         case 401:  // Unauthorized  
32.           // 認証情報に間違いがあります  
33.           break;  
34.         case 403:  // Forbidden  
35.           // リクエストが拒否されました  
36.           break;  
37.         case 404:  // Not Found  
38.           // 存在しないリソースにアクセスしました  
39.           break;  
40.         case 500:  // Server Internal Error  
41.           // サーバ障害が発生しています  
42.           break;  
43.         case 502:  // Bad Gateway  
44.           // Twitterサービスに障害が発生しています  
45.           break;  
46.         case 503:  // Service Unavailable  
47.           // Twitterが過負荷状態です  
48.           break;  
49.       }  
50.     }  
51.   }  
52.     
53.   noLoop();  
54. }  
55.   
56. void draw() {  
57.   //   
58. }  

import twitter4j.*;

final String USER_NAME = "tercel_s";

Twitter twitter;

void setup() {
  twitter = new TwitterFactory().getInstance();
  
  try {
    
    // 指定したユーザがフォローしているアカウント一覧を取得
    IDs friends = twitter.getFriendsIDs(USER_NAME, -1);
    long[] friendsIDs = friends.getIDs();
    
    // Twitter ID からユーザ情報を逐次取得して表示
    for(long id : friendsIDs) {
      User user = twitter.showUser(id);
      println(user.getName() + " (" + user.getScreenName() + ")");
    }
    
  } catch (TwitterException ex) {
    if(ex.isCausedByNetworkIssue()) {
      // 何らかの事情でネットワークに接続できませんでした
    } else {
      int statusCode = ex.getStatusCode();
      switch(statusCode) {
        case 400:  // Bad Request
          // リクエストに不正があるかレートリミットに達しました
          break;
        case 401:  // Unauthorized
          // 認証情報に間違いがあります
          break;
        case 403:  // Forbidden
          // リクエストが拒否されました
          break;
        case 404:  // Not Found
          // 存在しないリソースにアクセスしました
          break;
        case 500:  // Server Internal Error
          // サーバ障害が発生しています
          break;
        case 502:  // Bad Gateway
          // Twitterサービスに障害が発生しています
          break;
        case 503:  // Service Unavailable
          // Twitterが過負荷状態です
          break;
      }
    }
  }
  
  noLoop();
}

void draw() {
  // 
}

実行すると、コンソールにフレンド一覧が列挙されます。

ただこれ、けっこう時間がかかります。ですので、フォロー一覧の読み込み処理は別スレッドに移した方がよいでしょう。適当にマルチスレッド化するとこうなります（本当に適当なので、よい子はマネしないでね）。

【ソースコード（展開してご覧ください）】

+ expand sourceview plainprint?

1. import twitter4j.*;  
2.   
3. final String USER_NAME = "tercel_s";  
4.   
5. Twitter twitter;  
6. boolean isLoading;  
7.   
8. void setup() {  
9.   twitter = new TwitterFactory().getInstance();  
10.     
11.   // マルチスレッドだよ∩( ・ω・)∩  
12.   new Thread() {  
13.     public synchronized void run() {  
14.       isLoading = true;  
15.       try {  
16.         // 指定したユーザがフォローしているアカウント一覧を取得  
17.         IDs friends = twitter.getFriendsIDs(USER_NAME, -1);  
18.         long[] friendsIDs = friends.getIDs();  
19.           
20.         // Twitter ID からユーザ情報を逐次取得して表示  
21.         for(long id : friendsIDs) {  
22.           User user = twitter.showUser(id);  
23.           println(user.getName() + " (" + user.getScreenName() + ")");  
24.         }  
25.         isLoading = false;  
26.       } catch (TwitterException ex) {  
27.         /* 省略 */  
28.       } finally {  
29.         isLoading = false;  // デッドロック回避用  
30.       }  
31.     }  
32.   }.start();  
33. }  
34.   
35. void draw() {   
36.   //   
37. }  

import twitter4j.*;

final String USER_NAME = "tercel_s";

Twitter twitter;
boolean isLoading;

void setup() {
  twitter = new TwitterFactory().getInstance();
  
  // マルチスレッドだよ∩( ・ω・)∩
  new Thread() {
    public synchronized void run() {
      isLoading = true;
      try {
        // 指定したユーザがフォローしているアカウント一覧を取得
        IDs friends = twitter.getFriendsIDs(USER_NAME, -1);
        long[] friendsIDs = friends.getIDs();
        
        // Twitter ID からユーザ情報を逐次取得して表示
        for(long id : friendsIDs) {
          User user = twitter.showUser(id);
          println(user.getName() + " (" + user.getScreenName() + ")");
        }
        isLoading = false;
      } catch (TwitterException ex) {
        /* 省略 */
      } finally {
        isLoading = false;  // デッドロック回避用
      }
    }
  }.start();
}

void draw() { 
  // 
}

これさえできれば、デモ動画の作品を作るのは簡単です。ほとんど昨日のパーティクルをユーザのアイコンに差し換えただけです。

【おまけソースコード（展開してご覧ください）】

+ expand sourceview plainprint?

1. import processing.opengl.*;  
2. import javax.media.opengl.*;  
3. import twitter4j.*;  
4.   
5. final int FIELD_SIZE = 1000;  
6. final int FIELD_STEP =  100;  
7.   
8. final String USER_NAME = "tercel_s";    
9. boolean      isLoading;  
10.   
11. List<Agent> agentList;  // フレンドアイコンのリスト  
12.   
13. long time;  
14.   
15. void setup() {  
16.   size(800, 600, OPENGL);    
17.     
18.   agentList = new ArrayList<Agent>();  
19.   
20.   // マルチスレッドでフレンドを読み込む  
21.   new Thread(new FriendLoader()).start();  
22.   hint(ENABLE_DEPTH_SORT);  
23. }  
24.   
25. void draw() {   
26.   background(0);  
27.     
28.   /* ================== */  
29.   /* カメラを適当に設定 */  
30.   /* ================== */  
31.   float angle = 0.05f * radians(time);  
32.     
33.   camera(800, -200,   0,   
34.            0,    0,   0,   
35.            0,    1,   0);  
36.   rotateY(angle);  // ちょっと回す  
37.   
38.   pushStyle();  
39.     
40.   // テクスチャの加算合成を有効にする  
41.   PGraphicsOpenGL pgl = (PGraphicsOpenGL)g;  
42.   GL gl = pgl.beginGL();  
43.     
44.   gl.glEnable(GL.GL_BLEND);  
45.   gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);  
46.   pgl.endGL();    
47.     
48.   noStroke();  
49.   fill(0);  
50.     
51.   // フレンド一覧を表示  
52.   for(int i = 0; i < agentList.size(); ++i) {  
53.     agentList.get(i).update();  
54.   }  
55.   
56.   popStyle();  
57.   
58.   /* ============== */  
59.   /* 地面とかの描画 */  
60.   /* ============== */  
61.   pushStyle();  
62.   // 地面の描画   
63.   stroke(0, 255, 0, 100);  
64.   for(int i = -FIELD_SIZE; i <= FIELD_SIZE; i += FIELD_STEP) {   
65.     line(          i, 0, -FIELD_SIZE,          i, 0, FIELD_SIZE);     
66.     line(-FIELD_SIZE, 0,           i, FIELD_SIZE, 0,          i);  
67.   }  
68.     
69.   popStyle();  
70.     
71.   time++;  
72.   mm.addFrame();  
73.   if(time > 60 * 60) {  
74.     mm.finish();  
75.     background(0);  
76.     noLoop();  
77.   }  
78. }  
79.   
80.   
81. // フレンドを読み込むためのクラス  
82. class FriendLoader implements Runnable {  
83.   public void run() {  
84.     isLoading = true;  
85.     Twitter twitter = new TwitterFactory().getInstance();  
86.     try {  
87.       // まずは自分自身をリストに追加  
88.       User me = twitter.showUser(USER_NAME);  
89.       PImage myIcon = loadImage(me.getProfileImageURL().toString());  
90.       myIcon.resize(100, 100);  
91.       agentList.add(new Agent(myIcon, new PVector()));  
92.               
93.       // 自分がフォローしているアカウント一覧を取得  
94.       IDs friends = twitter.getFriendsIDs(USER_NAME, -1);  
95.       long[] friendsIDs = friends.getIDs();  
96.           
97.       // Twitter ID からユーザ情報を逐次取得  
98.       for(long id : friendsIDs) {  
99.         User user = twitter.showUser(id);  
100.             
101.         // アイコン取得とリサイズ  
102.         PImage profileImage = loadImage(user.getProfileImageURL().toString());  
103.         if(profileImage == null) continue;  
104.           
105.         profileImage.resize(100, 100);  
106.   
107.         // 位置の設定  
108.         float x = random(-1000, 1000);  
109.         float z = random(-1000, 1000);  
110.         agentList.add(new Agent(profileImage, new PVector(x, 0, z)));  
111.       }  
112.         
113.       isLoading = false;  
114.     } catch (TwitterException ex) {  
115.       /* 省略 */  
116.     } finally {  
117.       isLoading = false;  // デッドロック回避用  
118.     }  
119.   }  
120. }  
121.   
122.   
123. // エージェント  
124. class Agent {  
125.   private final float TERRITORY_SIZE = 2000;  
126.   private final float NOISE_SCALE    = 0.001f;  
127.   private final float AGENT_SIZE     = 50;   
128.     
129.   private PImage  tex;     // テクスチャ  
130.     
131.   private PVector center;  // 縄張りの中心座標  
132.   private PVector offset;  // 中心からのオフセット  
133.   private PVector pos;     // 座標  
134.     
135.   private long time;      // 経過時間  
136.   float xOffset, zOffset; // ノイズ生成用  
137.     
138.   Agent(PImage tex, PVector center) {  
139.     this.center = center;  
140.     this.tex    = tex;  
141.     pos         = new PVector();  
142.     offset      = new PVector();  
143.     xOffset     = random(TERRITORY_SIZE);  
144.     zOffset     = random(TERRITORY_SIZE);  
145.   }  
146.     
147.   PVector getPos() {  
148.     return pos;  
149.   }  
150.     
151.   void update() {  
152.     if (tex == null) return;  
153.     time++;  
154.       
155.     offset.x = (noise((time + xOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;  
156.     offset.z = (noise((time + zOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;  
157.       
158.     pushMatrix();  
159.     pos.set(center.x + offset.x, center.y, center.z + offset.z);  
160.     translate(pos.x, pos.y, pos.z);  
161.       
162.     // モデル-ビュー行列を取得  
163.     PMatrix3D builboardMat = (PMatrix3D)g.getMatrix();  
164.     // 回転成分を単位行列に  
165.     builboardMat.m00 = builboardMat.m11 = builboardMat.m22 = 1;  
166.     builboardMat.m01 = builboardMat.m02 =   
167.     builboardMat.m10 = builboardMat.m12 =   
168.     builboardMat.m20 = builboardMat.m21 = 0;  
169.     
170.     resetMatrix();  
171.     applyMatrix(builboardMat);  
172.           
173.     beginShape(QUADS);  
174.     texture(tex);  
175.     vertex(-0.5f * AGENT_SIZE, -AGENT_SIZE, 0, 0,         0);  
176.     vertex(-0.5f * AGENT_SIZE,           0, 0, 0,         tex.height-1);  
177.     vertex( 0.5f * AGENT_SIZE,           0, 0, tex.width, tex.height-1);  
178.     vertex( 0.5f * AGENT_SIZE, -AGENT_SIZE, 0, tex.width, 0);      
179.     endShape();  
180.           
181.     popMatrix();  
182.   }  
183. }  

import processing.opengl.*;
import javax.media.opengl.*;
import twitter4j.*;

final int FIELD_SIZE = 1000;
final int FIELD_STEP =  100;

final String USER_NAME = "tercel_s";  
boolean      isLoading;

List<Agent> agentList;  // フレンドアイコンのリスト

long time;

void setup() {
  size(800, 600, OPENGL);  
  
  agentList = new ArrayList<Agent>();

  // マルチスレッドでフレンドを読み込む
  new Thread(new FriendLoader()).start();
  hint(ENABLE_DEPTH_SORT);
}

void draw() { 
  background(0);
  
  /* ================== */
  /* カメラを適当に設定 */
  /* ================== */
  float angle = 0.05f * radians(time);
  
  camera(800, -200,   0, 
           0,    0,   0, 
           0,    1,   0);
  rotateY(angle);  // ちょっと回す

  pushStyle();
  
  // テクスチャの加算合成を有効にする
  PGraphicsOpenGL pgl = (PGraphicsOpenGL)g;
  GL gl = pgl.beginGL();
  
  gl.glEnable(GL.GL_BLEND);
  gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE_MINUS_SRC_ALPHA);
  pgl.endGL();  
  
  noStroke();
  fill(0);
  
  // フレンド一覧を表示
  for(int i = 0; i < agentList.size(); ++i) {
    agentList.get(i).update();
  }

  popStyle();

  /* ============== */
  /* 地面とかの描画 */
  /* ============== */
  pushStyle();
  // 地面の描画 
  stroke(0, 255, 0, 100);
  for(int i = -FIELD_SIZE; i <= FIELD_SIZE; i += FIELD_STEP) { 
    line(          i, 0, -FIELD_SIZE,          i, 0, FIELD_SIZE);   
    line(-FIELD_SIZE, 0,           i, FIELD_SIZE, 0,          i);
  }
  
  popStyle();
  
  time++;
  mm.addFrame();
  if(time > 60 * 60) {
    mm.finish();
    background(0);
    noLoop();
  }
}


// フレンドを読み込むためのクラス
class FriendLoader implements Runnable {
  public void run() {
    isLoading = true;
    Twitter twitter = new TwitterFactory().getInstance();
    try {
      // まずは自分自身をリストに追加
      User me = twitter.showUser(USER_NAME);
      PImage myIcon = loadImage(me.getProfileImageURL().toString());
      myIcon.resize(100, 100);
      agentList.add(new Agent(myIcon, new PVector()));
            
      // 自分がフォローしているアカウント一覧を取得
      IDs friends = twitter.getFriendsIDs(USER_NAME, -1);
      long[] friendsIDs = friends.getIDs();
        
      // Twitter ID からユーザ情報を逐次取得
      for(long id : friendsIDs) {
        User user = twitter.showUser(id);
          
        // アイコン取得とリサイズ
        PImage profileImage = loadImage(user.getProfileImageURL().toString());
        if(profileImage == null) continue;
        
        profileImage.resize(100, 100);

        // 位置の設定
        float x = random(-1000, 1000);
        float z = random(-1000, 1000);
        agentList.add(new Agent(profileImage, new PVector(x, 0, z)));
      }
      
      isLoading = false;
    } catch (TwitterException ex) {
      /* 省略 */
    } finally {
      isLoading = false;  // デッドロック回避用
    }
  }
}


// エージェント
class Agent {
  private final float TERRITORY_SIZE = 2000;
  private final float NOISE_SCALE    = 0.001f;
  private final float AGENT_SIZE     = 50; 
  
  private PImage  tex;     // テクスチャ
  
  private PVector center;  // 縄張りの中心座標
  private PVector offset;  // 中心からのオフセット
  private PVector pos;     // 座標
  
  private long time;      // 経過時間
  float xOffset, zOffset; // ノイズ生成用
  
  Agent(PImage tex, PVector center) {
    this.center = center;
    this.tex    = tex;
    pos         = new PVector();
    offset      = new PVector();
    xOffset     = random(TERRITORY_SIZE);
    zOffset     = random(TERRITORY_SIZE);
  }
  
  PVector getPos() {
    return pos;
  }
  
  void update() {
    if (tex == null) return;
    time++;
    
    offset.x = (noise((time + xOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;
    offset.z = (noise((time + zOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;
    
    pushMatrix();
    pos.set(center.x + offset.x, center.y, center.z + offset.z);
    translate(pos.x, pos.y, pos.z);
    
    // モデル-ビュー行列を取得
    PMatrix3D builboardMat = (PMatrix3D)g.getMatrix();
    // 回転成分を単位行列に
    builboardMat.m00 = builboardMat.m11 = builboardMat.m22 = 1;
    builboardMat.m01 = builboardMat.m02 = 
    builboardMat.m10 = builboardMat.m12 = 
    builboardMat.m20 = builboardMat.m21 = 0;
  
    resetMatrix();
    applyMatrix(builboardMat);
        
    beginShape(QUADS);
    texture(tex);
    vertex(-0.5f * AGENT_SIZE, -AGENT_SIZE, 0, 0,         0);
    vertex(-0.5f * AGENT_SIZE,           0, 0, 0,         tex.height-1);
    vertex( 0.5f * AGENT_SIZE,           0, 0, tex.width, tex.height-1);
    vertex( 0.5f * AGENT_SIZE, -AGENT_SIZE, 0, tex.width, 0);    
    endShape();
        
    popMatrix();
  }
}

あとはこの 2 つを適当に組み合わせれば、冒頭の動画のようなものが作れると思います。

なしくずしてきにめでたしめでたし。

---

そんなこんなで久しぶりに Twitter ネタを書きましたが、このプログラムにはまだまだアラがあります。

まず、Twitter の API 呼び出しには制限が設けられており、このプログラムを試しているとあっという間に API 上限に引っかかってしまいます。フォローしているアカウントの情報を一人ずつ取得していくと、アホみたいなスピードで限界に近付いていきます。

次に、計算機資源の問題があります。今はとりあえずフレンド情報を全読みしていますが、それこそ何十万人もフォローしているような人が動かしたら、あっという間にメモリを喰い尽くして死ぬでしょう。

それでもまぁ、とりあえず Twitter と P5 をくっつけてそれっぽい事ができたので今日はよしとします。ふぅ、つかれた(´-ω-`)