Processingできらきら3次元パーティクル

今日はこういうものを作ります。たぶんきれいですね。

このスケッチは、いくつかのテクニックを組み合わせて作ります。

恐らく、Processing ユーザにとっては馴染みの薄いものもあるかと思いますので、今日はそれらをひとつひとつ紹介しつつ完成形に持っていこうと考えています。

---

【ビルボードをつくる】

ビルボードとは、3次元空間中のカメラに対して常に正面を向くような2次元オブジェクトの事です。一昔前のゲームなどではよく応用されていた技術です（今もかな）。これ自体が独立したひとつのトピックなので、まずはここから始めてみましょう。

以下のサンプルは、テキスト（Hello, World）をビルボード上に表示するというものです。

【理論の解説】

ビルボードは、以下のような同次形のモデル・ビュー変換行列
$$\begin{align} {}^{\Sigma_{\mathrm{View}}}\vect{M}_{\Sigma_{\mathrm{Model}_{i}}} = \left(\! \begin{array}{ccc|c} m_{00} & m_{01} & m_{02} & m_{03} \\ m_{10} & m_{11} & m_{12} & m_{13} \\ m_{20} & m_{21} & m_{22} & m_{23} \\ \hline m_{30} & m_{31} & m_{32} & m_{33} \end{array} \!\right) \end{align}$$ ――のうち、左上の3×3の小行列を単位行列にした結果
$$\begin{align} \left( \! \begin{array}{ccc|c} 1 & 0 & 0 & m_{03} \\ 0 & 1 & 0 & m_{13} \\ 0 & 0 & 1 & m_{23} \\ \hline m_{30} & m_{31} & m_{32} & m_{33} \end{array} \!\right) \end{align}$$ を、新たなモデル・ビュー行列として設定します。たったこれだけ。かんたんですね。

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

+ expand sourceview plainprint?

1. import processing.opengl.*;  
2.   
3. PFont font;  
4. long  time;  
5.   
6. void setup() {  
7.   size(800, 600, OPENGL);  
8.     
9.   // フォント生成（メイリオ）  
10.   font = createFont("Meiryo", 48);  
11.     
12.   // デプスソートを有効にする  
13.   // これがないとテキスト表示がおかしくなる  
14.   hint(ENABLE_DEPTH_SORT);  
15.     
16. }  
17.   
18. void draw() {  
19.   background(0);  
20.     
21.   /* ================== */  
22.   /* カメラを適当に設定 */  
23.   /* ================== */  
24.   float angle = 0.5f * radians(time);  
25.     
26.   camera(0, -300*sin(angle), 300,   
27.          0,               0,   0,   
28.          0,               1,   0);  
29.   rotateY(angle);  // ちょっと回す  
30.   
31.   /* ================ */  
32.   /* ビルボーディング */  
33.   /* ================ */  
34.   pushMatrix();  
35.   translate(100, 0, 0);  // 物体を並進（ローカル座標系）  
36.     
37.   // モデル-ビュー行列を取得  
38.   PMatrix3D builboardMat = (PMatrix3D)g.getMatrix();  
39.   // 回転成分を単位行列に  
40.   builboardMat.m00 = builboardMat.m11 = builboardMat.m22 = 1;  
41.   builboardMat.m01 = builboardMat.m02 =   
42.   builboardMat.m10 = builboardMat.m12 =   
43.   builboardMat.m20 = builboardMat.m21 = 0;  
44.   
45.   resetMatrix();  
46.   applyMatrix(builboardMat);  
47.     
48.   fill(255);  
49.   stroke(0);  
50.   textFont(font, 24);  
51.   textAlign(CENTER);  
52.   text("Hello, World!", 0, 0);  
53.   
54.   popMatrix();  
55.   
56.   /* ============== */  
57.   /* 地面とかの描画 */  
58.   /* ============== */  
59.   pushStyle();  
60.   // 地面の描画   
61.   stroke(0, 255, 0);  
62.   for(int x = -1000; x <= 1000; x += 100)  
63.     line(x, 0, -1000, x, 0, 1000);   
64.   for(int z = -1000; z <= 1000; z += 100)  
65.     line(-1000, 0, z, 1000, 0, z);  
66.     
67.   // 回転軸の描画  
68.   stroke(255, 0, 0);  
69.   line(0, -500, 0, 0, 500, 0);  
70.   popStyle();  
71.     
72.   time++;  
73. }  

import processing.opengl.*;

PFont font;
long  time;

void setup() {
  size(800, 600, OPENGL);
  
  // フォント生成（メイリオ）
  font = createFont("Meiryo", 48);
  
  // デプスソートを有効にする
  // これがないとテキスト表示がおかしくなる
  hint(ENABLE_DEPTH_SORT);
  
}

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

  /* ================ */
  /* ビルボーディング */
  /* ================ */
  pushMatrix();
  translate(100, 0, 0);  // 物体を並進（ローカル座標系）
  
  // モデル-ビュー行列を取得
  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);
  
  fill(255);
  stroke(0);
  textFont(font, 24);
  textAlign(CENTER);
  text("Hello, World!", 0, 0);

  popMatrix();

  /* ============== */
  /* 地面とかの描画 */
  /* ============== */
  pushStyle();
  // 地面の描画 
  stroke(0, 255, 0);
  for(int x = -1000; x <= 1000; x += 100)
    line(x, 0, -1000, x, 0, 1000); 
  for(int z = -1000; z <= 1000; z += 100)
    line(-1000, 0, z, 1000, 0, z);
  
  // 回転軸の描画
  stroke(255, 0, 0);
  line(0, -500, 0, 0, 500, 0);
  popStyle();
  
  time++;
}

---

【自然なランダムウォークをつくる】

自然なランダムウォークというと少しおかしな日本語ですが、あちこちに動きが飛ばず、なめらかな軌跡を描くような動きを作ります。

タネを明かせば Perlin ノイズを何のひねりもなく使っただけで、当たり判定とかは考慮していません。

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

ここでは、動く個体を Agent クラスにまとめています。

+ expand sourceview plainprint?

1. import processing.opengl.*;  
2.   
3. List<Agent> agentList;  
4. long  time;  
5.   
6. void setup() {  
7.   size(800, 600, OPENGL);  
8.     
9.   agentList = new ArrayList<Agent>();  
10.   for(int i = 0; i < 200; ++i) {  
11.     float x = random(-200, 200);  
12.     float z = random(-200, 200);  
13.     agentList.add(new Agent(new PVector(x, 0, z)));  
14.   }  
15. }  
16.   
17. void draw() {  
18.   background(0);  
19.   camera();  
20.   lights();  
21.       
22.   /* ================== */  
23.   /* カメラを適当に設定 */  
24.   /* ================== */  
25.   float angle = 0.1f * radians(time);  
26.     
27.   camera(800, -200,   0,   
28.          0,      0,   0,   
29.          0,      1,   0);  
30.   rotateY(angle);  // ちょっと回す  
31.   
32.   pushStyle();  
33.   noStroke();  
34.   colorMode(HSB, agentList.size() -1, 100, 100);  
35.   for(int i = 0; i < agentList.size(); ++i) {  
36.     fill(i, 100, 100);  
37.     agentList.get(i).update();  
38.   }    
39.   popStyle();  
40.   
41.   /* ============== */  
42.   /* 地面とかの描画 */  
43.   /* ============== */  
44.   pushStyle();  
45.   // 地面の描画   
46.   stroke(0, 255, 0);  
47.   for(int x = -1000; x <= 1000; x += 100)  
48.     line(x, 0, -1000, x, 0, 1000);   
49.   for(int z = -1000; z <= 1000; z += 100)  
50.     line(-1000, 0, z, 1000, 0, z);  
51.     
52.   // 回転軸の描画  
53.   stroke(255, 0, 0);  
54.   line(0, -500, 0, 0, 500, 0);  
55.   popStyle();  
56.     
57.   time++;  
58. }  
59.   
60. class Agent {  
61.   private final float TERRITORY_SIZE = 2000;  
62.   private final float NOISE_SCALE    = 0.001f;  
63.   private final float AGENT_SIZE     = 10;   
64.     
65.   private PVector center;  // 縄張りの中心座標  
66.   private PVector offset;  // 中心からのオフセット  
67.   private PVector pos;     // 座標  
68.     
69.   private long time;      // 経過時間  
70.   float xOffset, zOffset; // ノイズ生成用  
71.     
72.   Agent(PVector center) {  
73.     this.center = center;  
74.     pos         = new PVector();  
75.     offset      = new PVector();  
76.     xOffset     = random(TERRITORY_SIZE);  
77.     zOffset     = random(TERRITORY_SIZE);  
78.   }  
79.     
80.   PVector getPos() {  
81.     return pos;  
82.   }  
83.     
84.   void update() {  
85.     time++;  
86.       
87.     offset.x = (noise((time + xOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;  
88.     offset.z = (noise((time + zOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;  
89.       
90.     pushMatrix();  
91.     pos.set(center.x + offset.x, center.y - AGENT_SIZE * 0.5, center.z + offset.z);  
92.     translate(pos.x, pos.y, pos.z);  
93.       
94.     box(AGENT_SIZE);  
95.           
96.     popMatrix();  
97.   }  
98. }  

import processing.opengl.*;

List<Agent> agentList;
long  time;

void setup() {
  size(800, 600, OPENGL);
  
  agentList = new ArrayList<Agent>();
  for(int i = 0; i < 200; ++i) {
    float x = random(-200, 200);
    float z = random(-200, 200);
    agentList.add(new Agent(new PVector(x, 0, z)));
  }
}

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

  pushStyle();
  noStroke();
  colorMode(HSB, agentList.size() -1, 100, 100);
  for(int i = 0; i < agentList.size(); ++i) {
    fill(i, 100, 100);
    agentList.get(i).update();
  }  
  popStyle();

  /* ============== */
  /* 地面とかの描画 */
  /* ============== */
  pushStyle();
  // 地面の描画 
  stroke(0, 255, 0);
  for(int x = -1000; x <= 1000; x += 100)
    line(x, 0, -1000, x, 0, 1000); 
  for(int z = -1000; z <= 1000; z += 100)
    line(-1000, 0, z, 1000, 0, z);
  
  // 回転軸の描画
  stroke(255, 0, 0);
  line(0, -500, 0, 0, 500, 0);
  popStyle();
  
  time++;
}

class Agent {
  private final float TERRITORY_SIZE = 2000;
  private final float NOISE_SCALE    = 0.001f;
  private final float AGENT_SIZE     = 10; 
  
  private PVector center;  // 縄張りの中心座標
  private PVector offset;  // 中心からのオフセット
  private PVector pos;     // 座標
  
  private long time;      // 経過時間
  float xOffset, zOffset; // ノイズ生成用
  
  Agent(PVector center) {
    this.center = center;
    pos         = new PVector();
    offset      = new PVector();
    xOffset     = random(TERRITORY_SIZE);
    zOffset     = random(TERRITORY_SIZE);
  }
  
  PVector getPos() {
    return pos;
  }
  
  void update() {
    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 - AGENT_SIZE * 0.5, center.z + offset.z);
    translate(pos.x, pos.y, pos.z);
    
    box(AGENT_SIZE);
        
    popMatrix();
  }
}

---

【合体させる】

あとは、この2つのテクニックをてきとうに合体させるだけです。

下図（左）のように、とりあえずランダムに動き回るビルボードを山のように作って、 それにテクスチャを貼れば完成。意外と簡単ですね。

左： ビルボードの輪郭 / 右：テクスチャを貼った結果

ここで、glBlendFunc メソッドを使って加算合成モードにすると、ビルボード同士が重なった際に輝度が上がります。完成形のソースコードを以下に示します。

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

+ expand sourceview plainprint?

1. import processing.opengl.*;  
2. import javax.media.opengl.*;  
3.   
4. PGraphics   tex;  
5. List<Agent> agentList;  
6. long        time;  
7.   
8. void setup() {  
9.   size(800, 600, OPENGL);  
10.    
11.   // テクスチャ生成  
12.   tex = createTexture();  
13.     
14.   agentList = new ArrayList<Agent>();  
15.   for(int i = 0; i < 1000; ++i) {  
16.     float x = random(-1000, 1000);  
17.     float z = random(-1000, 1000);  
18.     agentList.add(new Agent(new PVector(x, 0, z)));  
19.   }  
20. }  
21.   
22. void draw() {  
23.   background(0);  
24.       
25.   /* ================== */  
26.   /* カメラを適当に設定 */  
27.   /* ================== */  
28.   float angle = 0.05f * radians(time);  
29.     
30.   camera(800, -200,   0,   
31.            0,    0,   0,   
32.            0,    1,   0);  
33.   rotateY(angle);  // ちょっと回す  
34.   
35.   pushStyle();  
36.     
37.   // テクスチャの加算合成を有効にする  
38.   PGraphicsOpenGL pgl = (PGraphicsOpenGL)g;  
39.   GL gl = pgl.beginGL();  
40.   gl.glDisable(GL.GL_DEPTH_TEST);  
41.   gl.glEnable(GL.GL_BLEND);  
42.   gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE);  
43.   pgl.endGL();    
44.     
45.   noStroke();  
46.   fill(0);  
47.   for(int i = 0; i < agentList.size(); ++i) {  
48.     agentList.get(i).update();  
49.   }  
50.   
51.   popStyle();  
52.   
53.   /* ============== */  
54.   /* 地面とかの描画 */  
55.   /* ============== */  
56.   pushStyle();  
57.   // 地面の描画   
58.   stroke(0, 255, 0, 100);  
59.   for(int x = -1000; x <= 1000; x += 100)  
60.     line(x, 0, -1000, x, 0, 1000);   
61.   for(int z = -1000; z <= 1000; z += 100)  
62.     line(-1000, 0, z, 1000, 0, z);  
63.     
64.   popStyle();  
65.     
66.   time++;  
67. }  
68.   
69. PGraphics createTexture() {  
70.   PGraphics tex = createGraphics(100, 100, P2D);  
71.   float r = tex.width * 2 / 3;  
72.     
73.   tex.beginDraw();  
74.   tex.background(0);  
75.   tex.noStroke();  
76.   tex.fill(100, 150, 255);  
77.   tex.ellipse(tex.width/2, tex.height/2, r, r);  
78.   tex.filter(BLUR, 10.0);  
79.   tex.endDraw();  
80.   return tex;  
81. }  
82.   
83. class Agent {  
84.   private final float TERRITORY_SIZE = 2000;  
85.   private final float NOISE_SCALE    = 0.001f;  
86.   private final float AGENT_SIZE     = random(50);   
87.     
88.   private PVector center;  // 縄張りの中心座標  
89.   private PVector offset;  // 中心からのオフセット  
90.   private PVector pos;     // 座標  
91.     
92.   private long time;      // 経過時間  
93.   float xOffset, zOffset; // ノイズ生成用  
94.     
95.   Agent(PVector center) {  
96.     this.center = center;  
97.     pos         = new PVector();  
98.     offset      = new PVector();  
99.     xOffset     = random(TERRITORY_SIZE);  
100.     zOffset     = random(TERRITORY_SIZE);  
101.   }  
102.     
103.   PVector getPos() {  
104.     return pos;  
105.   }  
106.     
107.   void update() {  
108.     time++;  
109.       
110.     offset.x = (noise((time + xOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;  
111.     offset.z = (noise((time + zOffset) * NOISE_SCALE) - 0.5f) * TERRITORY_SIZE;  
112.       
113.     pushMatrix();  
114.     pos.set(center.x + offset.x, center.y, center.z + offset.z);  
115.     translate(pos.x, pos.y, pos.z);  
116.       
117.     // モデル-ビュー行列を取得  
118.     PMatrix3D builboardMat = (PMatrix3D)g.getMatrix();  
119.     // 回転成分を単位行列に  
120.     builboardMat.m00 = builboardMat.m11 = builboardMat.m22 = 1;  
121.     builboardMat.m01 = builboardMat.m02 =   
122.     builboardMat.m10 = builboardMat.m12 =   
123.     builboardMat.m20 = builboardMat.m21 = 0;  
124.     
125.     resetMatrix();  
126.     applyMatrix(builboardMat);  
127.           
128.     beginShape(QUADS);  
129.     texture(tex);  
130.     vertex(-0.5f * AGENT_SIZE, -AGENT_SIZE, 0, 0,         0);  
131.     vertex(-0.5f * AGENT_SIZE,           0, 0, 0,         tex.height-1);  
132.     vertex( 0.5f * AGENT_SIZE,           0, 0, tex.width, tex.height-1);  
133.     vertex( 0.5f * AGENT_SIZE, -AGENT_SIZE, 0, tex.width, 0);      
134.     endShape();  
135.           
136.     popMatrix();  
137.   }  
138. }  

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

PGraphics   tex;
List<Agent> agentList;
long        time;

void setup() {
  size(800, 600, OPENGL);
 
  // テクスチャ生成
  tex = createTexture();
  
  agentList = new ArrayList<Agent>();
  for(int i = 0; i < 1000; ++i) {
    float x = random(-1000, 1000);
    float z = random(-1000, 1000);
    agentList.add(new Agent(new PVector(x, 0, z)));
  }
}

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.glDisable(GL.GL_DEPTH_TEST);
  gl.glEnable(GL.GL_BLEND);
  gl.glBlendFunc(GL.GL_SRC_ALPHA, GL.GL_ONE);
  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 x = -1000; x <= 1000; x += 100)
    line(x, 0, -1000, x, 0, 1000); 
  for(int z = -1000; z <= 1000; z += 100)
    line(-1000, 0, z, 1000, 0, z);
  
  popStyle();
  
  time++;
}

PGraphics createTexture() {
  PGraphics tex = createGraphics(100, 100, P2D);
  float r = tex.width * 2 / 3;
  
  tex.beginDraw();
  tex.background(0);
  tex.noStroke();
  tex.fill(100, 150, 255);
  tex.ellipse(tex.width/2, tex.height/2, r, r);
  tex.filter(BLUR, 10.0);
  tex.endDraw();
  return tex;
}

class Agent {
  private final float TERRITORY_SIZE = 2000;
  private final float NOISE_SCALE    = 0.001f;
  private final float AGENT_SIZE     = random(50); 
  
  private PVector center;  // 縄張りの中心座標
  private PVector offset;  // 中心からのオフセット
  private PVector pos;     // 座標
  
  private long time;      // 経過時間
  float xOffset, zOffset; // ノイズ生成用
  
  Agent(PVector center) {
    this.center = center;
    pos         = new PVector();
    offset      = new PVector();
    xOffset     = random(TERRITORY_SIZE);
    zOffset     = random(TERRITORY_SIZE);
  }
  
  PVector getPos() {
    return pos;
  }
  
  void update() {
    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();
  }
}