ビジュアルエフェクト試行錯誤

今日は、実験作 2 作のご紹介です。

重くならないように、このページにはサムネイル画像を貼りました。 各作品名のハイパーリンクを踏めば、動作を確認できるページへジャンプします。

ぜひ実際に動作するサンプルをご覧ください。

---

【Rainbow in the Night】

きらきら輝くパーティクル。シンプルなピクセル操作を組み合わせで、あたかも発光しているかのような視覚効果が得られます。

マウスボタンを押し続けると、オーロラが出現します。

---

【White Cube】

ルービックキューブの柔軟な回転動作の可視化を実現するためにあれこれ考えた結果です。

パフォーマンス的な意味では、さらなる最適化の余地もありますが、『連鎖的な行列の作用がどんな幾何学的変化をもたらすのか』というもう一つのテーマを追究するため、敢えて行列スタックを多用しています。

---

【ソースコード】

[1] Rainbow in the Night

+ expand sourceview plainprint?

1. final int  N_PARTICLES = 2000;  
2. Particle[] particles;  
3. float[][]  speedRateMap;  
4. long       time;  
5.    
6. void setup() {  
7.   size(400, 300);  
8.   frameRate(30);  
9.   time = 0;  
10.      
11.   particles = new Particle[N_PARTICLES];  
12.   for(int i = 0; i < particles.length; i++) {  
13.     particles[i] = new Particle(random(width), random(height));  
14.   }  
15.      
16.   // 通常時・ブレーキ時のスピードレート  
17.   float normalSpeedRate = 2.0;  
18.   float brakeSpeedRate  = 0.1;  
19.      
20.   // ノイズ画像から速度レートマップ生成  
21.   // ========================================================  
22.   // smap を任意の画像に差し替えれば、  
23.   // パーティクルでメッセージを作る事も可能  
24.   speedRateMap = new float[width][height];  
25.   PImage smap = createCroud();  
26.   for(int y = 0; y < smap.height; y++) {  
27.     for(int x = 0; x < smap.width; x++) {  
28.       int c = smap.pixels[y * width + x] & 0xFF;  
29.       // マップに基づいて速度の減衰率を求める  
30.       float data = 1.0 - (float)c / 0xFF;  
31.       data *= (normalSpeedRate - brakeSpeedRate);  
32.       data += brakeSpeedRate;  
33.          
34.       speedRateMap[x][y] = data;  
35.     }  
36.   }  
37. }  
38.    
39. void draw() {  
40.   time++;  
41.   background(0);  
42.   stroke(255);  
43.      
44.   for(int i = 0; i < particles.length; i++) {  
45.     Particle p = particles[i];  
46.     stroke(p._color);  
47.     point(p.x, p.y);  
48.     p.update();  
49.   }  
50.   blendTwincle();  
51. }  
52.    
53. private void blendTwincle() {  
54.   PImage fg = createTwincle();  
55.    
56.   loadPixels();  
57.   for(int y = 0; y < height; y++) {  
58.     for(int x = 0; x < width; x++) {  
59.       int c1 = pixels[y * width + x];  
60.       int c2 = fg.pixels[y * width + x];  
61.       pixels[y * width + x] = addColor(c1, c2);  
62.     }  
63.   }  
64.   updatePixels();  
65. }  
66.    
67. int addColor(int c1, int c2) {  
68.   int r1 = c1 >> 16 & 0xFF;  
69.   int g1 = c1 >>  8 & 0xFF;  
70.   int b1 = c1       & 0xFF;  
71.          
72.   int r2 = c2 >> 16 & 0xFF;  
73.   int g2 = c2 >>  8 & 0xFF;  
74.   int b2 = c2       & 0xFF;  
75.          
76.   int r = r1 + r2 < 0xFF ? r1 + r2 : 0xFF;  
77.   int g = g1 + g2 < 0xFF ? g1 + g2 : 0xFF;  
78.   int b = b1 + b2 < 0xFF ? b1 + b2 : 0xFF;  
79.      
80.   return 0xFF << 24 | r << 16 | g << 8 | b;  
81. }  
82.    
83. // 指定した透過率で色を黒っぽくする  
84. int transColor(int c, float _alpha) {  
85.   float a;  
86.   a = min(_alpha, 1.0);  
87.   a = max(_alpha, 0.0);  
88.      
89.   int r1 = c >> 16 & 0xFF;  
90.   int g1 = c >>  8 & 0xFF;  
91.   int b1 = c       & 0xFF;  
92.      
93.   int r = (int)(r1 * a + 0.5);  
94.   int g = (int)(g1 * a + 0.5);  
95.   int b = (int)(b1 * a + 0.5);  
96.   return 0xFF << 24 | r << 16 | g << 8 | b;  
97. }  
98.    
99. PImage blendImage;  
100. private PImage createTwincle() {  
101.   if(blendImage == null)  
102.     blendImage = createImage(width / 2, height / 2, RGB);  
103.      
104.   PImage _capture = createImage(width / 2, height / 2, RGB);  
105.      
106.   float _alpha;  
107.   if(mousePressed) _alpha = 0.98;  // マウスボタンを押すとブーストする  
108.   else _alpha = random(0.9, 0.99);  
109.      
110.   loadPixels();  
111.   for(int y = 0; y < _capture.height; y++) {  
112.     for(int x = 0; x < _capture.width; x++) {  
113.       int c1 = blendImage.pixels[y * blendImage.width + x];  
114.       int c2 = pixels[(y * 2) * width + (x * 2)];  
115.    
116.       c1 = transColor(c1, _alpha);  
117.          
118.       blendImage.pixels[y * blendImage.width + x]  
119.         = _capture.pixels[y * _capture.width + x]  
120.           = addColor(c1, c2);  
121.     }  
122.   }  
123.   updatePixels();  
124.   blendImage.filter(BLUR);  
125.   _capture.resize(width, height);   
126.   return _capture;  
127. }  
128.    
129. class Particle {  
130.   public int x, y;  
131.   public int _color;  
132.   private float  _x,  _y;  
133.   private float _dx, _dy;  
134.   private final int MAX_H = 120;  // 色相の階調数  
135.      
136.   Particle(float x, float y) {  
137.     initialize();  
138.        
139.     this._x = (int)(this._x = x);  
140.     this._y = (int)(this._y = y);  
141.     _color = 0x00000000;  
142.   }  
143.      
144.   void update() {  
145.     float rate = 1.0;  
146.     // マップから速度レート読み込み  
147.     if (x >= 0 && x < speedRateMap.length  
148.         && y >= 0 && y < speedRateMap[0].length)  
149.           rate = speedRateMap[x][y];  
150.        
151.     x = (int)(_x += (_dx * rate));  
152.     y = (int)(_y += (_dy * rate));  
153.     if(y >= height) initialize();  
154.   }  
155.      
156.   private void initialize() {  
157.     colorMode(HSB, MAX_H, 100, 100);  
158.     _color = color(time % MAX_H, 50, 70);  
159.            
160.     x = (int)(_x = random(width));  
161.     y = (int)(_y = 0);  
162.        
163.     this._dx = random(-0.1, 0.1);  
164.     this._dy = random(2, 4);  
165.   }  
166. }  
167.    
168. // ==========================================================  
169. // 雲模様データの生成  
170. // ==========================================================  
171. private PImage createCroud() {  
172.   PImage img = createImage(width, height, RGB);  
173.      
174.   float xbase  = random(100);  
175.   float ybase  = random(100);  
176.      
177.   float xnoise = 0.0;  
178.   float ynoise = 0.0;  
179.   float inc    = 0.02;  
180.      
181.   for(int y = 0; y < height; y++) {  
182.     for(int x = 0; x < width; x++) {  
183.       int _gray =  
184.         (int)(noise(xnoise+xbase, ynoise+ybase)*0xFF+0.5);  
185.       img.pixels[y * width + x] = _gray;  
186.       xnoise += inc;  
187.     }  
188.     xnoise = 0.0;  
189.     ynoise += inc;  
190.   }  
191.   return img;  
192. }  

final int  N_PARTICLES = 2000;
Particle[] particles;
float[][]  speedRateMap;
long       time;
 
void setup() {
  size(400, 300);
  frameRate(30);
  time = 0;
   
  particles = new Particle[N_PARTICLES];
  for(int i = 0; i < particles.length; i++) {
    particles[i] = new Particle(random(width), random(height));
  }
   
  // 通常時・ブレーキ時のスピードレート
  float normalSpeedRate = 2.0;
  float brakeSpeedRate  = 0.1;
   
  // ノイズ画像から速度レートマップ生成
  // ========================================================
  // smap を任意の画像に差し替えれば、
  // パーティクルでメッセージを作る事も可能
  speedRateMap = new float[width][height];
  PImage smap = createCroud();
  for(int y = 0; y < smap.height; y++) {
    for(int x = 0; x < smap.width; x++) {
      int c = smap.pixels[y * width + x] & 0xFF;
      // マップに基づいて速度の減衰率を求める
      float data = 1.0 - (float)c / 0xFF;
      data *= (normalSpeedRate - brakeSpeedRate);
      data += brakeSpeedRate;
       
      speedRateMap[x][y] = data;
    }
  }
}
 
void draw() {
  time++;
  background(0);
  stroke(255);
   
  for(int i = 0; i < particles.length; i++) {
    Particle p = particles[i];
    stroke(p._color);
    point(p.x, p.y);
    p.update();
  }
  blendTwincle();
}
 
private void blendTwincle() {
  PImage fg = createTwincle();
 
  loadPixels();
  for(int y = 0; y < height; y++) {
    for(int x = 0; x < width; x++) {
      int c1 = pixels[y * width + x];
      int c2 = fg.pixels[y * width + x];
      pixels[y * width + x] = addColor(c1, c2);
    }
  }
  updatePixels();
}
 
int addColor(int c1, int c2) {
  int r1 = c1 >> 16 & 0xFF;
  int g1 = c1 >>  8 & 0xFF;
  int b1 = c1       & 0xFF;
       
  int r2 = c2 >> 16 & 0xFF;
  int g2 = c2 >>  8 & 0xFF;
  int b2 = c2       & 0xFF;
       
  int r = r1 + r2 < 0xFF ? r1 + r2 : 0xFF;
  int g = g1 + g2 < 0xFF ? g1 + g2 : 0xFF;
  int b = b1 + b2 < 0xFF ? b1 + b2 : 0xFF;
   
  return 0xFF << 24 | r << 16 | g << 8 | b;
}
 
// 指定した透過率で色を黒っぽくする
int transColor(int c, float _alpha) {
  float a;
  a = min(_alpha, 1.0);
  a = max(_alpha, 0.0);
   
  int r1 = c >> 16 & 0xFF;
  int g1 = c >>  8 & 0xFF;
  int b1 = c       & 0xFF;
   
  int r = (int)(r1 * a + 0.5);
  int g = (int)(g1 * a + 0.5);
  int b = (int)(b1 * a + 0.5);
  return 0xFF << 24 | r << 16 | g << 8 | b;
}
 
PImage blendImage;
private PImage createTwincle() {
  if(blendImage == null)
    blendImage = createImage(width / 2, height / 2, RGB);
   
  PImage _capture = createImage(width / 2, height / 2, RGB);
   
  float _alpha;
  if(mousePressed) _alpha = 0.98;  // マウスボタンを押すとブーストする
  else _alpha = random(0.9, 0.99);
   
  loadPixels();
  for(int y = 0; y < _capture.height; y++) {
    for(int x = 0; x < _capture.width; x++) {
      int c1 = blendImage.pixels[y * blendImage.width + x];
      int c2 = pixels[(y * 2) * width + (x * 2)];
 
      c1 = transColor(c1, _alpha);
       
      blendImage.pixels[y * blendImage.width + x]
        = _capture.pixels[y * _capture.width + x]
          = addColor(c1, c2);
    }
  }
  updatePixels();
  blendImage.filter(BLUR);
  _capture.resize(width, height); 
  return _capture;
}
 
class Particle {
  public int x, y;
  public int _color;
  private float  _x,  _y;
  private float _dx, _dy;
  private final int MAX_H = 120;  // 色相の階調数
   
  Particle(float x, float y) {
    initialize();
     
    this._x = (int)(this._x = x);
    this._y = (int)(this._y = y);
    _color = 0x00000000;
  }
   
  void update() {
    float rate = 1.0;
    // マップから速度レート読み込み
    if (x >= 0 && x < speedRateMap.length
        && y >= 0 && y < speedRateMap[0].length)
          rate = speedRateMap[x][y];
     
    x = (int)(_x += (_dx * rate));
    y = (int)(_y += (_dy * rate));
    if(y >= height) initialize();
  }
   
  private void initialize() {
    colorMode(HSB, MAX_H, 100, 100);
    _color = color(time % MAX_H, 50, 70);
         
    x = (int)(_x = random(width));
    y = (int)(_y = 0);
     
    this._dx = random(-0.1, 0.1);
    this._dy = random(2, 4);
  }
}
 
// ==========================================================
// 雲模様データの生成
// ==========================================================
private PImage createCroud() {
  PImage img = createImage(width, height, RGB);
   
  float xbase  = random(100);
  float ybase  = random(100);
   
  float xnoise = 0.0;
  float ynoise = 0.0;
  float inc    = 0.02;
   
  for(int y = 0; y < height; y++) {
    for(int x = 0; x < width; x++) {
      int _gray =
        (int)(noise(xnoise+xbase, ynoise+ybase)*0xFF+0.5);
      img.pixels[y * width + x] = _gray;
      xnoise += inc;
    }
    xnoise = 0.0;
    ynoise += inc;
  }
  return img;
}

[2] White Cube

+ expand sourceview plainprint?

1. final float C_SIZE   = 100;  
2. final float C_MARGIN =   2;  
3.    
4. void setup() {  
5.   size(400, 300, P3D);  
6. }  
7.    
8. // 回転用パラメータ  
9. long t;  
10. int mode_RotAxis, mode_RotPos, mode_RotDir;  
11. void draw() {  
12.   background(0);  
13.   fill(255);  
14.    
15.   camera();  
16.   lights();  
17.   float cam_dist  = 500;  
18.   float cam_angle = radians(t*0.1);  
19.   camera(cam_dist*cos(cam_angle), -cam_dist, cam_dist*sin(cam_angle),  
20.          0, 0, 0, 0, 1, 0);  
21.   noStroke();  
22.      
23.   pushMatrix();  
24.   float offset = C_SIZE + C_MARGIN;  
25.   translate(-offset, -offset, -offset);  
26.      
27.   // ここで回転のモード切り替え  
28.   if((t+=3) % 90 == 0) {  
29.     mode_RotAxis = (int)(random(3));  
30.     mode_RotPos  = (int)(random(3));  
31.     mode_RotDir  = random(1) < 0.5 ? -1 : 1;  
32.   }  
33.      
34.   translate(offset, offset, offset);  
35.   switch (mode_RotAxis) {  
36.     case 0:  
37.       rotateX(radians(90));  
38.       break;  
39.     case 1:  
40.       rotateY(radians(90));  
41.       break;  
42.   }  
43.   translate(-offset, -offset, -offset);  
44.      
45.   for(int i = 0; i < 3; i++) {  
46.     for(int j = 0; j < 3; j++) {  
47.       for(int k = 0; k < 3; k++) {  
48.         pushMatrix();  
49.         translate(offset, offset, offset);  
50.         if(k == mode_RotPos) rotateZ(mode_RotDir * radians(t));  
51.         translate(-offset, -offset, -offset);  
52.         translate(i * offset, j * offset, k * offset);  
53.         box(C_SIZE);  
54.         popMatrix();  
55.       }  
56.     }     
57.   }  
58.   popMatrix();  
59. }  

final float C_SIZE   = 100;
final float C_MARGIN =   2;
 
void setup() {
  size(400, 300, P3D);
}
 
// 回転用パラメータ
long t;
int mode_RotAxis, mode_RotPos, mode_RotDir;
void draw() {
  background(0);
  fill(255);
 
  camera();
  lights();
  float cam_dist  = 500;
  float cam_angle = radians(t*0.1);
  camera(cam_dist*cos(cam_angle), -cam_dist, cam_dist*sin(cam_angle),
         0, 0, 0, 0, 1, 0);
  noStroke();
   
  pushMatrix();
  float offset = C_SIZE + C_MARGIN;
  translate(-offset, -offset, -offset);
   
  // ここで回転のモード切り替え
  if((t+=3) % 90 == 0) {
    mode_RotAxis = (int)(random(3));
    mode_RotPos  = (int)(random(3));
    mode_RotDir  = random(1) < 0.5 ? -1 : 1;
  }
   
  translate(offset, offset, offset);
  switch (mode_RotAxis) {
    case 0:
      rotateX(radians(90));
      break;
    case 1:
      rotateY(radians(90));
      break;
  }
  translate(-offset, -offset, -offset);
   
  for(int i = 0; i < 3; i++) {
    for(int j = 0; j < 3; j++) {
      for(int k = 0; k < 3; k++) {
        pushMatrix();
        translate(offset, offset, offset);
        if(k == mode_RotPos) rotateZ(mode_RotDir * radians(t));
        translate(-offset, -offset, -offset);
        translate(i * offset, j * offset, k * offset);
        box(C_SIZE);
        popMatrix();
      }
    }   
  }
  popMatrix();
}

---

【裏話】

『Rainbow in the Night』 は、もともと Rainbow Shower という題にするつもりでしたが、同名の植物（厳密には雑種）が存在するため、閲覧者に意図せぬ先入観を扶植してしまうのではないかと思い、現在の名称に変更しました。

素直に日本語で 『虹の星屑』 とでも名付けておけばよかったです。