Processingで画面遷移効果（くだけちるエフェクト）

ゲームなどの画面遷移に使えそうな気がしたので、くだけちるエフェクトを簡単に実装してみた。

アプレット領域内でクリックすると、砕け散るエフェクトの後、次のシーンに遷移するサンプルである。

Applet対応のブラウザでご覧ください

破片の形状作成は Delaunay 分割を使いたいところだが、計算コストが少々大きいので今回は果てしなく原始的な方法にした。破片の頂点座標はランダムである。

ソースコードを晒すにはあまりにもお粗末なのだが、最近更新してなかったし何かしら書かなきゃヤバいだろうなーと思ったので一応公開しておく。

---

主な設計思想は、いつぞやの有限オートマトンとほぼ同じだ。

すなわち、様々な「状態」を抽象化したインタフェースを最初に作っておき、具体的な各状態クラスはそれを実装（implement）して作る。

インタフェースを実装したクラスのオブジェクトは、アップキャストする事でひとまとめに扱う事ができるため、わずらわしい状態管理が非常にラクになるのであった。

というわけで、今回の主要な（というか今回の肝である）遷移を司るクラスはこんな感じ。

view plainprint?

1. // シーンを司るインタフェースクラス  
2. // updateメソッドをオーバーライドして使う  
3. // 戻り値は、次に遷移するシーンオブジェクト  
4. // （遷移しない場合はthisポインタ）  
5. interface Scene {  
6.   Scene update();  
7.     
8.   // 連鎖的にupdateメソッドを移譲するため、  
9.   // 呼び出し先がnewを乱発しないための制御フラグを設定する  
10.   void setEnable(boolean isEnable);    
11. }  
12.   
13. // =======================================================  
14. // 遷移用クラス  
15. // =======================================================  
16. class SceneFrag implements Scene {  
17.   private PImage nextImage;  // 画面のイメージ  
18.   private final int MAX_TIME = 100;  
19.   private Fragments fragments;  
20.   int time;  
21.   Scene cur, next;  
22.     
23.   SceneFrag(Scene cur, Scene next) {  
24.     this.cur = cur;  
25.     this.next = next;  
26.       
27.     cur.setEnable(false);  
28.     next.setEnable(false);  
29.       
30.     nextImage = createImage(width, height, RGB);  
31.       
32.     fragments = new Fragments(200);  
33.     time = 0;  
34.   }  
35.     
36.   Scene update() {   
37.     noLights();  
38.     noStroke();  
39.     next.update();  
40.       
41.     // ========================  
42.     // 一度2次元に書き直す。  
43.     // 3Dで、投影面よりオブジェクトが手前にある場合の副作用を軽減できる  
44.     // ただし処理が重くなるので今回はコメントアウト  
45.     // ========================  
46.     /* 
47.     loadPixels(); 
48.     for(int i = 0; i < pixels.length; ++i) 
49.       nextImage.pixels[i] = pixels[i]; 
50.        
51.     updatePixels(); 
52.     noLights(); 
53.      
54.     background(0); 
55.     image(nextImage, 0, 0); 
56.     */  
57.       
58.     fragments.update();  
59.       
60.     fill(255, 255 * (MAX_TIME - time*2) / MAX_TIME);  
61.     rect(0, 0, width, height);  
62.       
63.     if(time++ < MAX_TIME) return this;  
64.       
65.     next.setEnable(true);  
66.     return next;  
67.   }  
68.     
69.   void setEnable(boolean isEnable) {  
70.     // まぁ何もしない  
71.   }  
72. }  
73.   
74. // 破片の集まりクラス  
75. class Fragments {  
76.   // テクスチャ  
77.   PImage tex;  
78.   Fragment[] f;  
79.     
80.   Fragments(int num) {  
81.     tex = createImage(width, height, RGB);  
82.     noStroke();  
83.     fill(255, 50);  
84.     rect(0, 0, width, height);  
85.       
86.     loadPixels();  
87.     for(int i = 0; i < pixels.length; i++) {  
88.       tex.pixels[i] = pixels[i];  
89.     }  
90.     f = new Fragment[num];  
91.     PVector[] p;  
92.       
93.     for(int i = 0; i < num; i++) {  
94.       p = new PVector[3];  
95.         
96.       // ここは感覚的に破片の座標を設定  
97.       p[0] = new PVector(random(width), random(height));  
98.       p[1] = new PVector(p[0].x + random(150)-75, p[0].y + random(150)-75);  
99.       p[2] = new PVector(p[1].x + random(150)-75, p[1].y + random(150)-75);  
100.       f[i] = new Fragment(p);  
101.     }  
102.   }  
103.     
104.   void update() {  
105.     stroke(0, 10);  
106.     for(int i = 0; i < f.length; ++i) {  
107.       f[i].update();  // 更新  
108.         
109.       // 破片を描画  
110.       textureMode(IMAGE);  
111.       beginShape(TRIANGLES);  
112.       texture(tex);  
113.       for(int j = 0; j < f[i].vertices.length; ++j) {  
114.         vertex(f[i].vertices[j].x, f[i].vertices[j].y,   
115.                f[i].texCoords[j].x, f[i].texCoords[j].y);  
116.       }  
117.       endShape();  
118.     }  
119.   }  
120. }  
121.   
122. // いっこあたりの破片を管理する  
123. class Fragment {  
124.   PVector[] texCoords;  // テクスチャ座標  
125.   PVector[] vertices;   // 頂点座標  
126.   PVector center;       // 重心  
127.     
128.   float dx, dy;  
129.   float ddy;  
130.   float angle;  // 角速度  
131.     
132.     
133.   Fragment(PVector[] vertices) {  
134.     // 頂点座標とテクスチャ座標をセット  
135.     this.vertices = vertices;  
136.       
137.     this.texCoords = new PVector[this.vertices.length];  
138.     for(int i = 0; i < this.vertices.length; i++) {  
139.       this.texCoords[i] = new PVector(this.vertices[i].x,   
140.         this.vertices[i].y, this.vertices[i].z);  
141.     }  
142.       
143.     // （初）速度・加速度を設定  
144.     dx = random(2)-1;  
145.     dy  = -random(5);  
146.     ddy = 0.2;  
147.     angle = radians(random(8)-4);  
148.     this.center = new PVector();  
149.   }  
150.   void update() {  
151.     this.center.x = this.center.y = 0;  
152.       
153.     for(int i = 0; i < vertices.length; ++i) {  
154.       // 各頂点を足して…  
155.       this.center.add(this.vertices[i]);  
156.     }  
157.     // 平均する（重心座標が求まる）  
158.     this.center.div(vertices.length);  
159.           
160.     for(int i = 0; i < vertices.length; ++i) {  
161.       // 重心を原点に合わせて  
162.       float tmpX = this.vertices[i].x - center.x;  
163.       float tmpY = this.vertices[i].y - center.y;  
164.         
165.       // 回転を施し、元の座標に戻す  
166.       this.vertices[i].x = cos(angle)*tmpX - sin(angle)*tmpY + center.x;  
167.       this.vertices[i].y = sin(angle)*tmpX + cos(angle)*tmpY + center.y;  
168.         
169.       // 並進移動        
170.       this.vertices[i].x += dx;  
171.       this.vertices[i].y += dy;  
172.     }      
173.       
174.     // 速度更新  
175.     dy += ddy;  
176.   }   
177. }  

// シーンを司るインタフェースクラス
// updateメソッドをオーバーライドして使う
// 戻り値は、次に遷移するシーンオブジェクト
// （遷移しない場合はthisポインタ）
interface Scene {
  Scene update();
  
  // 連鎖的にupdateメソッドを移譲するため、
  // 呼び出し先がnewを乱発しないための制御フラグを設定する
  void setEnable(boolean isEnable);  
}

// =======================================================
// 遷移用クラス
// =======================================================
class SceneFrag implements Scene {
  private PImage nextImage;  // 画面のイメージ
  private final int MAX_TIME = 100;
  private Fragments fragments;
  int time;
  Scene cur, next;
  
  SceneFrag(Scene cur, Scene next) {
    this.cur = cur;
    this.next = next;
    
    cur.setEnable(false);
    next.setEnable(false);
    
    nextImage = createImage(width, height, RGB);
    
    fragments = new Fragments(200);
    time = 0;
  }
  
  Scene update() { 
    noLights();
    noStroke();
    next.update();
    
    // ========================
    // 一度2次元に書き直す。
    // 3Dで、投影面よりオブジェクトが手前にある場合の副作用を軽減できる
    // ただし処理が重くなるので今回はコメントアウト
    // ========================
    /*
    loadPixels();
    for(int i = 0; i < pixels.length; ++i)
      nextImage.pixels[i] = pixels[i];
      
    updatePixels();
    noLights();
    
    background(0);
    image(nextImage, 0, 0);
    */
    
    fragments.update();
    
    fill(255, 255 * (MAX_TIME - time*2) / MAX_TIME);
    rect(0, 0, width, height);
    
    if(time++ < MAX_TIME) return this;
    
    next.setEnable(true);
    return next;
  }
  
  void setEnable(boolean isEnable) {
    // まぁ何もしない
  }
}

// 破片の集まりクラス
class Fragments {
  // テクスチャ
  PImage tex;
  Fragment[] f;
  
  Fragments(int num) {
    tex = createImage(width, height, RGB);
    noStroke();
    fill(255, 50);
    rect(0, 0, width, height);
    
    loadPixels();
    for(int i = 0; i < pixels.length; i++) {
      tex.pixels[i] = pixels[i];
    }
    f = new Fragment[num];
    PVector[] p;
    
    for(int i = 0; i < num; i++) {
      p = new PVector[3];
      
      // ここは感覚的に破片の座標を設定
      p[0] = new PVector(random(width), random(height));
      p[1] = new PVector(p[0].x + random(150)-75, p[0].y + random(150)-75);
      p[2] = new PVector(p[1].x + random(150)-75, p[1].y + random(150)-75);
      f[i] = new Fragment(p);
    }
  }
  
  void update() {
    stroke(0, 10);
    for(int i = 0; i < f.length; ++i) {
      f[i].update();  // 更新
      
      // 破片を描画
      textureMode(IMAGE);
      beginShape(TRIANGLES);
      texture(tex);
      for(int j = 0; j < f[i].vertices.length; ++j) {
        vertex(f[i].vertices[j].x, f[i].vertices[j].y, 
               f[i].texCoords[j].x, f[i].texCoords[j].y);
      }
      endShape();
    }
  }
}

// いっこあたりの破片を管理する
class Fragment {
  PVector[] texCoords;  // テクスチャ座標
  PVector[] vertices;   // 頂点座標
  PVector center;       // 重心
  
  float dx, dy;
  float ddy;
  float angle;  // 角速度
  
  
  Fragment(PVector[] vertices) {
    // 頂点座標とテクスチャ座標をセット
    this.vertices = vertices;
    
    this.texCoords = new PVector[this.vertices.length];
    for(int i = 0; i < this.vertices.length; i++) {
      this.texCoords[i] = new PVector(this.vertices[i].x, 
        this.vertices[i].y, this.vertices[i].z);
    }
    
    // （初）速度・加速度を設定
    dx = random(2)-1;
    dy  = -random(5);
    ddy = 0.2;
    angle = radians(random(8)-4);
    this.center = new PVector();
  }
  void update() {
    this.center.x = this.center.y = 0;
    
    for(int i = 0; i < vertices.length; ++i) {
      // 各頂点を足して…
      this.center.add(this.vertices[i]);
    }
    // 平均する（重心座標が求まる）
    this.center.div(vertices.length);
        
    for(int i = 0; i < vertices.length; ++i) {
      // 重心を原点に合わせて
      float tmpX = this.vertices[i].x - center.x;
      float tmpY = this.vertices[i].y - center.y;
      
      // 回転を施し、元の座標に戻す
      this.vertices[i].x = cos(angle)*tmpX - sin(angle)*tmpY + center.x;
      this.vertices[i].y = sin(angle)*tmpX + cos(angle)*tmpY + center.y;
      
      // 並進移動      
      this.vertices[i].x += dx;
      this.vertices[i].y += dy;
    }    
    
    // 速度更新
    dy += ddy;
  } 
}

からくりはというと、状態遷移前のスクリーンショットをそのままテクスチャにして、おびただしい3角ポリゴン（Fragmentオブジェクト）に貼りつけているだけ。

Fragmentは、破片の幾何学的な頂点座標と、テクスチャの (u, v) 座標を保持するクラスであり、それらを集成したものがFragmentsである。

リソース節減を考慮し、1枚のテクスチャを各破片に割り当てるために、テクスチャ用画像はFragmentsが管理している。

Fragmentsのupdateメソッドは、砕け散った前状態と次状態とを巧妙にブレンドして表示するためのものだ。

updateが呼ばれるたびにタイマーtimeがカウントアップされ、MAX_TIMEに達すると次状態へと遷移する。

---

完全版はこちら。

+ expand sourceview plainprint?

1. Scene scene;  
2.   
3. void setup() {  
4.   size(400, 300, P3D);  
5.   scene = new Scene1();  
6. }  
7. void draw() {  
8.   background(255, 0, 0, 10);  
9.   scene = scene.update();  
10. }  
11.   
12. // シーンを司るインタフェースクラス  
13. // updateメソッドをオーバーライドして使う  
14. // 戻り値は、次に遷移するシーンオブジェクト  
15. // （遷移しない場合はthisポインタ）  
16. interface Scene {  
17.   Scene update();  
18.     
19.   // 連鎖的にupdateメソッドを移譲するため、  
20.   // 呼び出し先がnewを乱発しないための制御フラグを設定する  
21.   void setEnable(boolean isEnable);    
22. }  
23.   
24.   
25. // =======================================================  
26. // デモ用の状態クラス  
27. // =======================================================  
28. class Scene1 implements Scene {  
29.   float h, p, b;     // ヘディング・ピッチ・バンク回転量  
30.   float dh, dp, db;  // 角速度  
31.   int objColor, bgColor;  
32.   boolean isEnable;  
33.     
34.   PVector[] stars;  
35.   float[] dx;  
36.   
37.   Scene1() {  
38.     // 色の付け方はてきとうです。  
39.     objColor = color(random(200, 255),   
40.       random(200, 255),   
41.       random(100, 255));  
42.     bgColor = color( red(objColor)/10,   
43.       green(objColor)/10,   
44.       blue(objColor)/10);  
45.       
46.     stars = new PVector[100];  
47.     dx = new float[stars.length];  
48.     for(int i = 0; i < stars.length; i++) {  
49.       stars[i] = new PVector(random(width), random(height));  
50.       dx[i] = random(5) + 1;  
51.     }  
52.         
53.     // 回転量・並進量を設定  
54.     h = random(0, 360);  
55.     p = random(-90, 90);  
56.     b = random(0, 360);  
57.     dh = random(-1, 1);  
58.     db = random(-1, 1);  
59.     dp = random(-1, 1);  
60.       
61.     isEnable = true;  
62.   }  
63.     
64.   Scene update() {  
65.     camera();  
66.     lights();  
67.       
68.     background(bgColor);  
69.       
70.     strokeWeight(1);  
71.     stroke(255);  
72.     for(int i = 0; i < stars.length; i++) {  
73.       point(stars[i].x, stars[i].y);  
74.       if((stars[i].x += dx[i]) > width) {  
75.         stars[i].x = 0;  
76.         dx[i] = random(5) + 1;  
77.       }  
78.     }  
79.     noStroke();  
80.       
81.     strokeWeight(3);  
82.     stroke(objColor);  
83.     noFill();  
84.       
85.     // デモシーン：立方体を適当に…  
86.     pushMatrix();  
87.     translate(width/2, height/2, -width);  
88.     rotateY(radians(h));  
89.     rotateX(radians(p));  
90.     rotateZ(radians(b));  
91.     box(250);  
92.     popMatrix();  
93.       
94.     h += dh;  
95.     p += dp;  
96.     b += db;  
97.       
98.     if (mousePressed && isEnable) {  
99.       return new SceneFrag(this, new Scene1());  
100.     } else {  
101.       return this;  
102.     }  
103.   }  
104.     
105.   void setEnable(boolean isEnable) {  
106.     this.isEnable = isEnable;  
107.   }  
108. }  
109.   
110.   
111. // =======================================================  
112. // 遷移用クラス（ここからが本編）  
113. // =======================================================  
114. class SceneFrag implements Scene {  
115.   private PImage nextImage;  // 画面のイメージ  
116.   private final int MAX_TIME = 100;  
117.   private Fragments fragments;  
118.   int time;  
119.   Scene cur, next;  
120.     
121.   SceneFrag(Scene cur, Scene next) {  
122.     this.cur = cur;  
123.     this.next = next;  
124.       
125.     cur.setEnable(false);  
126.     next.setEnable(false);  
127.       
128.     nextImage = createImage(width, height, RGB);  
129.       
130.     fragments = new Fragments(200);  
131.     time = 0;  
132.   }  
133.     
134.   Scene update() {   
135.     noLights();  
136.     noStroke();  
137.     next.update();  
138.       
139.     // ========================  
140.     // 一度2次元に書き直す。  
141.     // 3Dで、投影面よりオブジェクトが手前にある場合の副作用を軽減できる  
142.     // ただし処理が重くなるので今回はコメントアウト  
143.     // ========================  
144.     /* 
145.     loadPixels(); 
146.     for(int i = 0; i < pixels.length; ++i) 
147.       nextImage.pixels[i] = pixels[i]; 
148.        
149.     updatePixels(); 
150.     noLights(); 
151.      
152.     background(0); 
153.     image(nextImage, 0, 0); 
154.     */  
155.       
156.     fragments.update();  
157.       
158.     fill(255, 255 * (MAX_TIME - time*2) / MAX_TIME);  
159.     rect(0, 0, width, height);  
160.       
161.     if(time++ < MAX_TIME) return this;  
162.       
163.     next.setEnable(true);  
164.     return next;  
165.   }  
166.     
167.   void setEnable(boolean isEnable) {  
168.     // まぁ何もしない  
169.   }  
170. }  
171.   
172. // 破片の集まりクラス  
173. class Fragments {  
174.   // テクスチャ  
175.   PImage tex;  
176.   Fragment[] f;  
177.     
178.   Fragments(int num) {  
179.     tex = createImage(width, height, RGB);  
180.     noStroke();  
181.     fill(255, 50);  
182.     rect(0, 0, width, height);  
183.       
184.     loadPixels();  
185.     for(int i = 0; i < pixels.length; i++) {  
186.       tex.pixels[i] = pixels[i];  
187.     }  
188.     f = new Fragment[num];  
189.     PVector[] p;  
190.       
191.     for(int i = 0; i < num; i++) {  
192.       p = new PVector[3];  
193.         
194.       // ここは感覚的に破片の座標を設定  
195.       p[0] = new PVector(random(width), random(height));  
196.       p[1] = new PVector(p[0].x + random(150)-75, p[0].y + random(150)-75);  
197.       p[2] = new PVector(p[1].x + random(150)-75, p[1].y + random(150)-75);  
198.       f[i] = new Fragment(p);  
199.     }  
200.   }  
201.     
202.   void update() {  
203.     stroke(0, 10);  
204.     for(int i = 0; i < f.length; ++i) {  
205.       f[i].update();  // 更新  
206.         
207.       // 破片を描画  
208.       textureMode(IMAGE);  
209.       beginShape(TRIANGLES);  
210.       texture(tex);  
211.       for(int j = 0; j < f[i].vertices.length; ++j) {  
212.         vertex(f[i].vertices[j].x, f[i].vertices[j].y,   
213.                f[i].texCoords[j].x, f[i].texCoords[j].y);  
214.       }  
215.       endShape();  
216.     }  
217.   }  
218. }  
219.   
220. // いっこあたりの破片を管理する  
221. class Fragment {  
222.   PVector[] texCoords;  // テクスチャ座標  
223.   PVector[] vertices;   // 頂点座標  
224.   PVector center;       // 重心  
225.     
226.   float dx, dy;  
227.   float ddy;  
228.   float angle;  // 角速度  
229.     
230.     
231.   Fragment(PVector[] vertices) {  
232.     // 頂点座標とテクスチャ座標をセット  
233.     this.vertices = vertices;  
234.       
235.     this.texCoords = new PVector[this.vertices.length];  
236.     for(int i = 0; i < this.vertices.length; i++) {  
237.       this.texCoords[i] = new PVector(this.vertices[i].x,   
238.         this.vertices[i].y, this.vertices[i].z);  
239.     }  
240.       
241.     // （初）速度・加速度を設定  
242.     dx = random(2)-1;  
243.     dy  = -random(5);  
244.     ddy = 0.2;  
245.     angle = radians(random(8)-4);  
246.     this.center = new PVector();  
247.   }  
248.   void update() {  
249.     this.center.x = this.center.y = 0;  
250.       
251.     for(int i = 0; i < vertices.length; ++i) {  
252.       // 各頂点を足して…  
253.       this.center.add(this.vertices[i]);  
254.     }  
255.     // 平均する（重心座標が求まる）  
256.     this.center.div(vertices.length);  
257.           
258.     for(int i = 0; i < vertices.length; ++i) {  
259.       // 重心を原点に合わせて  
260.       float tmpX = this.vertices[i].x - center.x;  
261.       float tmpY = this.vertices[i].y - center.y;  
262.         
263.       // 回転を施し、元の座標に戻す  
264.       this.vertices[i].x = cos(angle)*tmpX - sin(angle)*tmpY + center.x;  
265.       this.vertices[i].y = sin(angle)*tmpX + cos(angle)*tmpY + center.y;  
266.         
267.       // 並進移動        
268.       this.vertices[i].x += dx;  
269.       this.vertices[i].y += dy;  
270.     }      
271.       
272.     // 速度更新  
273.     dy += ddy;  
274.   }   
275. }  

Scene scene;

void setup() {
  size(400, 300, P3D);
  scene = new Scene1();
}
void draw() {
  background(255, 0, 0, 10);
  scene = scene.update();
}

// シーンを司るインタフェースクラス
// updateメソッドをオーバーライドして使う
// 戻り値は、次に遷移するシーンオブジェクト
// （遷移しない場合はthisポインタ）
interface Scene {
  Scene update();
  
  // 連鎖的にupdateメソッドを移譲するため、
  // 呼び出し先がnewを乱発しないための制御フラグを設定する
  void setEnable(boolean isEnable);  
}


// =======================================================
// デモ用の状態クラス
// =======================================================
class Scene1 implements Scene {
  float h, p, b;     // ヘディング・ピッチ・バンク回転量
  float dh, dp, db;  // 角速度
  int objColor, bgColor;
  boolean isEnable;
  
  PVector[] stars;
  float[] dx;

  Scene1() {
    // 色の付け方はてきとうです。
    objColor = color(random(200, 255), 
      random(200, 255), 
      random(100, 255));
    bgColor = color( red(objColor)/10, 
      green(objColor)/10, 
      blue(objColor)/10);
    
    stars = new PVector[100];
    dx = new float[stars.length];
    for(int i = 0; i < stars.length; i++) {
      stars[i] = new PVector(random(width), random(height));
      dx[i] = random(5) + 1;
    }
      
    // 回転量・並進量を設定
    h = random(0, 360);
    p = random(-90, 90);
    b = random(0, 360);
    dh = random(-1, 1);
    db = random(-1, 1);
    dp = random(-1, 1);
    
    isEnable = true;
  }
  
  Scene update() {
    camera();
    lights();
    
    background(bgColor);
    
    strokeWeight(1);
    stroke(255);
    for(int i = 0; i < stars.length; i++) {
      point(stars[i].x, stars[i].y);
      if((stars[i].x += dx[i]) > width) {
        stars[i].x = 0;
        dx[i] = random(5) + 1;
      }
    }
    noStroke();
    
    strokeWeight(3);
    stroke(objColor);
    noFill();
    
    // デモシーン：立方体を適当に…
    pushMatrix();
    translate(width/2, height/2, -width);
    rotateY(radians(h));
    rotateX(radians(p));
    rotateZ(radians(b));
    box(250);
    popMatrix();
    
    h += dh;
    p += dp;
    b += db;
    
    if (mousePressed && isEnable) {
      return new SceneFrag(this, new Scene1());
    } else {
      return this;
    }
  }
  
  void setEnable(boolean isEnable) {
    this.isEnable = isEnable;
  }
}


// =======================================================
// 遷移用クラス（ここからが本編）
// =======================================================
class SceneFrag implements Scene {
  private PImage nextImage;  // 画面のイメージ
  private final int MAX_TIME = 100;
  private Fragments fragments;
  int time;
  Scene cur, next;
  
  SceneFrag(Scene cur, Scene next) {
    this.cur = cur;
    this.next = next;
    
    cur.setEnable(false);
    next.setEnable(false);
    
    nextImage = createImage(width, height, RGB);
    
    fragments = new Fragments(200);
    time = 0;
  }
  
  Scene update() { 
    noLights();
    noStroke();
    next.update();
    
    // ========================
    // 一度2次元に書き直す。
    // 3Dで、投影面よりオブジェクトが手前にある場合の副作用を軽減できる
    // ただし処理が重くなるので今回はコメントアウト
    // ========================
    /*
    loadPixels();
    for(int i = 0; i < pixels.length; ++i)
      nextImage.pixels[i] = pixels[i];
      
    updatePixels();
    noLights();
    
    background(0);
    image(nextImage, 0, 0);
    */
    
    fragments.update();
    
    fill(255, 255 * (MAX_TIME - time*2) / MAX_TIME);
    rect(0, 0, width, height);
    
    if(time++ < MAX_TIME) return this;
    
    next.setEnable(true);
    return next;
  }
  
  void setEnable(boolean isEnable) {
    // まぁ何もしない
  }
}

// 破片の集まりクラス
class Fragments {
  // テクスチャ
  PImage tex;
  Fragment[] f;
  
  Fragments(int num) {
    tex = createImage(width, height, RGB);
    noStroke();
    fill(255, 50);
    rect(0, 0, width, height);
    
    loadPixels();
    for(int i = 0; i < pixels.length; i++) {
      tex.pixels[i] = pixels[i];
    }
    f = new Fragment[num];
    PVector[] p;
    
    for(int i = 0; i < num; i++) {
      p = new PVector[3];
      
      // ここは感覚的に破片の座標を設定
      p[0] = new PVector(random(width), random(height));
      p[1] = new PVector(p[0].x + random(150)-75, p[0].y + random(150)-75);
      p[2] = new PVector(p[1].x + random(150)-75, p[1].y + random(150)-75);
      f[i] = new Fragment(p);
    }
  }
  
  void update() {
    stroke(0, 10);
    for(int i = 0; i < f.length; ++i) {
      f[i].update();  // 更新
      
      // 破片を描画
      textureMode(IMAGE);
      beginShape(TRIANGLES);
      texture(tex);
      for(int j = 0; j < f[i].vertices.length; ++j) {
        vertex(f[i].vertices[j].x, f[i].vertices[j].y, 
               f[i].texCoords[j].x, f[i].texCoords[j].y);
      }
      endShape();
    }
  }
}

// いっこあたりの破片を管理する
class Fragment {
  PVector[] texCoords;  // テクスチャ座標
  PVector[] vertices;   // 頂点座標
  PVector center;       // 重心
  
  float dx, dy;
  float ddy;
  float angle;  // 角速度
  
  
  Fragment(PVector[] vertices) {
    // 頂点座標とテクスチャ座標をセット
    this.vertices = vertices;
    
    this.texCoords = new PVector[this.vertices.length];
    for(int i = 0; i < this.vertices.length; i++) {
      this.texCoords[i] = new PVector(this.vertices[i].x, 
        this.vertices[i].y, this.vertices[i].z);
    }
    
    // （初）速度・加速度を設定
    dx = random(2)-1;
    dy  = -random(5);
    ddy = 0.2;
    angle = radians(random(8)-4);
    this.center = new PVector();
  }
  void update() {
    this.center.x = this.center.y = 0;
    
    for(int i = 0; i < vertices.length; ++i) {
      // 各頂点を足して…
      this.center.add(this.vertices[i]);
    }
    // 平均する（重心座標が求まる）
    this.center.div(vertices.length);
        
    for(int i = 0; i < vertices.length; ++i) {
      // 重心を原点に合わせて
      float tmpX = this.vertices[i].x - center.x;
      float tmpY = this.vertices[i].y - center.y;
      
      // 回転を施し、元の座標に戻す
      this.vertices[i].x = cos(angle)*tmpX - sin(angle)*tmpY + center.x;
      this.vertices[i].y = sin(angle)*tmpX + cos(angle)*tmpY + center.y;
      
      // 並進移動      
      this.vertices[i].x += dx;
      this.vertices[i].y += dy;
    }    
    
    // 速度更新
    dy += ddy;
  } 
}

---

【6月6日追記】

ちょっと改良。